customElement包装svg的iconfont

阿里巴巴的iconfont很好用，但是

1.小项目不友好，即便你只需要一个图标，也需要建一个项目，非常冗余。
2.图标修改不友好，每次都要生成新的文件或者链接。
3.对一些无法访问外网的环境，或者不适合用链接方式的情况下（比如库项目，要求使用方再引入一个链接有点不合适）。这种情况通常是把所有图标都下载到本地，体积大，也很繁琐。

解决方案: 使用customElement

简单使用:

<svg-font type="people" size="32"></svg-font>

直接拷贝svg代码进来就行

const icons = {
    search: '<svg t="1673504537557" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2269" width="16" height="16"><path d="M1005.312 914.752l-198.528-198.464A448 448 0 1 0 0 448a448 448 0 0 0 716.288 358.784l198.4 198.4a64 64 0 1 0 90.624-90.432zM448 767.936A320 320 0 1 1 448 128a320 320 0 0 1 0 640z" fill="#262626" p-id="2270"></path></svg>',
    people: '<svg t="1673505612557" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3218" width="16" height="16"><path d="M633.856 403.136A190.784 190.784 0 0 0 704 256c0-105.856-86.144-192-192-192S320 150.144 320 256c0 59.392 27.648 111.872 70.144 147.136A224.128 224.128 0 0 0 256 608v256C256 952.256 327.808 1024 416 1024h192c88.256 0 160-71.744 160-160v-256c0-91.52-55.296-170.112-134.144-204.864zM512 128c70.592 0 128 57.408 128 128s-57.408 128-128 128-128-57.408-128-128 57.408-128 128-128z m192 736c0 52.928-43.072 96-96 96h-192c-52.928 0-96-43.072-96-96v-256C320 519.808 391.808 448 480 448h64C632.256 448 704 519.808 704 608v256zM902.4 473.92c34.88-29.376 57.6-72.832 57.6-121.92C960 263.808 888.256 192 800 192a32 32 0 0 0 0 64c52.928 0 96 43.072 96 96S852.928 448 800 448a32 32 0 0 0 0 64c88.256 0 160 71.744 160 160v192c0 17.6-14.4 32-32 32h-64a32 32 0 0 0 0 64h64c52.928 0 96-43.072 96-96v-192c0-86.4-49.728-160.704-121.6-198.08zM224 448C171.072 448 128 404.928 128 352S171.072 256 224 256a32 32 0 0 0 0-64A160.192 160.192 0 0 0 64 352c0 49.088 22.72 92.544 57.664 121.92C49.728 511.296 0 585.536 0 672v192c0 52.928 43.072 96 96 96h64a32 32 0 0 0 0-64h-64a32 32 0 0 1-32-32v-192C64 583.744 135.808 512 224 512a32 32 0 0 0 0-64z" p-id="3219"></path></svg>',
    product: '<svg t="1673505738195" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4369" width="16" height="16"><path d="M537.984 139.52l277.333333 123.178667A64 64 0 0 1 853.333333 321.194667v381.610666a64 64 0 0 1-38.016 58.496l-277.333333 123.157334a64 64 0 0 1-51.968 0l-277.333333-123.157334A64 64 0 0 1 170.666667 702.805333V321.194667a64 64 0 0 1 38.016-58.496l277.333333-123.157334a64 64 0 0 1 51.968 0zM234.666667 381.44v321.365333l250.666666 111.317334V488.853333L234.666667 381.44z m554.666666 2.304l-240 102.826667V809.386667L789.333333 702.805333V383.744zM512 198.037333l-266.581333 118.378667 269.290666 115.413333 266.517334-114.24L512 198.037333z" fill="#007FFC" p-id="4370"></path></svg>',
}


customElements.define('svg-font', class extends HTMLElement {
    constructor() {
        super();
        const shadowRoot = this.attachShadow({ mode: 'open' })
        shadowRoot.innerHTML = icons[this.getAttribute('type') ?? Object.keys(icons)[0]]
        let size = this.getAttribute('size')??'16'
        shadowRoot.firstChild.setAttribute('width', size)
        shadowRoot.firstChild.setAttribute('height', size)
    }
})

codepen