40 lines
1005 B
TypeScript
40 lines
1005 B
TypeScript
|
import { DeesElement, html, customElement, css } from '@design.estate/dees-element';
|
||
|
|
import { shxElementStyles } from './tokens.js';
|
||
|
|
|
||
|
|
declare global {
|
||
|
|
interface HTMLElementTagNameMap {
|
||
|
|
'shx-icon': ShxIcon;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@customElement('shx-icon')
|
||
|
|
export class ShxIcon extends DeesElement {
|
||
|
|
public static demo = () => html`<shx-icon></shx-icon>`;
|
||
|
|
public static demoGroups = ['smarthome.exchange primitives'];
|
||
|
|
|
||
|
|
public static styles = [
|
||
|
|
...shxElementStyles,
|
||
|
|
css`
|
||
|
|
:host {
|
||
|
|
display: inline-flex;
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
color: var(--shx-accent);
|
||
|
|
}
|
||
|
|
svg {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
];
|
||
|
|
|
||
|
|
public render() {
|
||
|
|
return html`
|
||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<path d="M4 9.5 12 3l8 6.5V20a1 1 0 0 1-1 1h-5v-7h-4v7H5a1 1 0 0 1-1-1V9.5Z"></path>
|
||
|
|
<path d="M9 21v-7h6v7"></path>
|
||
|
|
</svg>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|