1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import { Component } from '../component.ts'import { h, strToHash } from '../core.ts'import { addStylesToHead } from './_helpers.ts'
interface IconProps {  src: string  active?: boolean  color?: string  style?: string  size?: number  onClick?: (e: MouseEvent) => void}
export class Icon extends Component<IconProps> {  cssHash: string
  didUnmount() {    // not sure if I want to remove the css, since there might be another Icon with the same styles.    // const el = document.querySelector(`[data-css-hash*="${this.cssHash}"]`)    // if (el) el.remove()  }
  render() {    const { src, size = 16, active = true, color = '#6204EE', style = '', ...rest } = this.props
    // @ts-ignore    const children = this.props.children
    this.cssHash = strToHash(active + color + size.toString())
    const colors = {      active: color,      inactive: '#00000070'    }
    const styles = `    i.icon-${this.cssHash} {      width: ${size}px;      height: ${size}px;      display: inline-block;      content: '';
      /*-webkit-mask: url(YOUR_SVG_URL) no-repeat 50% 50%;      mask: url(YOUR_SVG_URL) no-repeat 50% 50%;*/
      -webkit-mask-size: cover;      mask-size: cover; 
      background-color: ${colors.active};    }
    i.icon-${this.cssHash}.icon_inactive-${this.cssHash} {      background-color: ${colors.inactive};    }    `
    addStylesToHead(styles, this.cssHash)
    // const iconStyle = `-webkit-mask: url(/dev/font-awesome/ellipsis-v-solid.svg) no-repeat 50% 50%;mask: url(/dev/font-awesome/ellipsis-v-solid.svg) no-repeat 50% 50%;`    const iconStyle = `-webkit-mask: url(${src || children}) no-repeat 50% 50%; mask: url(${      src || children    }) no-repeat 50% 50%;`
    const classes = [`icon-${this.cssHash}`]    if (!active) classes.push(`icon_inactive-${this.cssHash}`)
    const icon = h('i', { class: classes.join(' '), ...rest, style: iconStyle + style })
    return icon  }}