48 lines
894 B
JavaScript
48 lines
894 B
JavaScript
import { LitElement, css, html } from 'lit'
|
|
import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
|
|
|
|
class SvgIcon extends LitElement {
|
|
static properties = {
|
|
name: { type: String },
|
|
element: { state: true },
|
|
}
|
|
|
|
constructor() {
|
|
super()
|
|
this.name = ''
|
|
}
|
|
|
|
attributeChangedCallback(att, _, nv) {
|
|
if (att === 'name' && nv) {
|
|
this.loadSVG(nv)
|
|
}
|
|
}
|
|
|
|
async loadSVG(name) {
|
|
const { default: svg } = await import(`../assets/icons/${name}.svg?raw`)
|
|
this.element = html`${unsafeSVG(svg)}`
|
|
}
|
|
|
|
render() {
|
|
return this.element
|
|
}
|
|
|
|
static styles = css`
|
|
:host {
|
|
--svg-shadow: 0px 0px 0px transparent;
|
|
}
|
|
|
|
svg {
|
|
fill: currentcolor;
|
|
display: block;
|
|
height: 1em;
|
|
width: 1em;
|
|
padding: 0;
|
|
margin: 0;
|
|
filter: drop-shadow(var(--svg-shadow));
|
|
}
|
|
`
|
|
}
|
|
|
|
customElements.define('mm-icon', SvgIcon)
|