[{"data":1,"prerenderedAt":74},["ShallowReactive",2],{"content:\u002Farticles:9074":3},{"item":4,"md":15,"html":16,"menu":17,"excerpt":28,"related":29},{"title":5,"len":6,"tags":7,"id":9,"time":10,"modifyTime":11,"encrypt":12,"showComments":13,"customSlug":14},"vite+vue3下如何使用动态导入的svg-sprite",2867,[8],"vue",9074,1632102764931,1707966919983,false,true,"",null,"\u003Cp data-marked-line=\"1\">  几个月前我刚接触vue3时就研究过，一直搞忘了分享。\u003C\u002Fp>\n\u003Cfieldset data-marked-line=\"2\">\u003Clegend>起因\u003C\u002Flegend>\u003Cp>  我的vue项目一般都使用动态导入的svg-sprite，意思是：既要是个雪碧图，用\u003Ccode><use>\u003C\u002Fcode>\n标签复用；而且页面的svg应该是动态按需加载的。我觉得这样性能比较好，在vue2中\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fyunyuyuan\u002Fcloudflare-blog\u002Fblob\u002Fmaster\u002Fcomponents\u002Fsvg-icon.vue#L28\" target=\"_blank\">实现比较简单\u003C\u002Fa>，但是vue3+vite下我并未找到合适的解决方案，只有雪碧图没有动态导入。于是乎我就想自己做一个。\u003C\u002Fp>\n\u003C\u002Ffieldset>\u003Ch1 data-marked-line=\"7\">\u003Csup class=\"fake-head\" id=\"%E6%80%9D%E8%B7%AF\">\u003C\u002Fsup>\u003Ca class=\"header-link\" href=\"#%E6%80%9D%E8%B7%AF\">思路\u003C\u002Fa>\u003C\u002Fh1>\u003Cp data-marked-line=\"9\">\u003Cstrong>就两点\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul data-marked-line=\"11\">\n\u003Cli>首先要做一个\u003Ca href=\"https:\u002F\u002Fcn.vitejs.dev\u002Fguide\u002Fapi-plugin.html\" target=\"_blank\">vite plugin\u003C\u002Fa>，作为一个loader加载\u003Ccode>.svg\u003C\u002Fcode>文件，读取svg文件的内容，类似\u003Ccode>raw-loader\u003C\u002Fcode>。\u003C\u002Fli>\n\u003Cli>然后需要一个component，它去动态加载svg文件，并把svg文件的内容拼接到雪碧图里。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch1 data-marked-line=\"14\">\u003Csup class=\"fake-head\" id=\"%E4%BB%A3%E7%A0%81\">\u003C\u002Fsup>\u003Ca class=\"header-link\" href=\"#%E4%BB%A3%E7%A0%81\">代码\u003C\u002Fa>\u003C\u002Fh1>\u003Cp data-marked-line=\"16\">\u003Ccode>vite.config.ts\u003C\u002Fcode>中这样写:\u003C\u002Fp>\n\u003Cpre data-marked-line=\"18\" data-lang=\"ts\" data-shiki>\u003Ccode class=\"language-ts\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">import\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> {\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">defineConfig\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">Plugin\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">} \u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">from\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\"> 'vite'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">import\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\"> vue\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> from\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\"> '@vitejs\u002Fplugin-vue'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">import\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\"> fs\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> from\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\"> \"fs\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">import\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> {\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">dataToEsm\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">} \u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">from\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\"> \"rollup-pluginutils\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">const\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> rawSvgPlugin\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#ABB2BF\">:\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#E5C07B\">Plugin\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">  name\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">'raw-svg-file-loader'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">  transform\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#E36209;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#ABB2BF\">:\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> string\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#E36209;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic\">filepath\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#ABB2BF\">:\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> string\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">    \u002F\u002F 判断后缀是否为svg\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">    if\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">filepath\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">slice\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\">-\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#D19A66\">4\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">) \u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\">!==\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\"> '.svg'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">) \u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">return\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#D19A66\"> null\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">    const\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> content\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\"> fs\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">readFileSync\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">filepath\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">).\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">toString\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">    return\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">      \u002F\u002F 直接返回svg文件的原始内容\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">      code\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">dataToEsm\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">content\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">export\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> default\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\"> defineConfig\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">  plugins\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: [\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">vue\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(), \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">rawSvgPlugin\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">})\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp data-marked-line=\"41\">\u003Ccode>IconSvg.vue\u003C\u002Fcode>文件:\u003C\u002Fp>\n\u003Cpre data-marked-line=\"43\" data-lang=\"vue\" data-shiki>\u003Ccode class=\"language-vue\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#E06C75\">script\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#D19A66\"> setup\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#D19A66\"> lang\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">\u002F\u002F index.html里写一个<div id=\"SVG_CONTAINER\"><\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">const\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> SvgContainerId\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\"> \"SVG_CONTAINER\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">const\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> props\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">  name\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: { \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">type\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">String\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">required\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#D19A66\">true\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">const\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> icon\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\"> ref\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">onMounted\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(() \u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">  watch\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">    () \u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\"> props\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">name\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">    (\u003C\u002Fspan>\u003Cspan style=\"color:#E36209;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic\">name\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">) \u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">      const\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\"> `icon-\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#C678DD\">${\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">name\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#C678DD\">}\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">`\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">      const\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> eId\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\"> \"#\"\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> +\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">      const\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> container\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\"> document\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">getElementById\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">SvgContainerId\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">      \u002F\u002F 存储已经加载过的svg\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">      const\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> svgIconList\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#ABB2BF\">:\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#E5C07B\"> Set\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\">string\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">> \u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\">=\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">window\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> as\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> any\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">).\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">svgIconList\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> ||\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> ((\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">window\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> as\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> any\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">).\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">svgIconList\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> new\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\"> Set\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">());\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">      if\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\">!\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">svgIconList\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">has\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">id\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">)) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">        svgIconList\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">add\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">id\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">        \u002F\u002F 动态引入\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#61AFEF\">        import\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">`..\u002Fassets\u002Fsvg\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#C678DD\">${\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">name\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#C678DD\">}\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">.svg`\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">).\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">then\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">((\u003C\u002Fspan>\u003Cspan style=\"color:#E36209;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic\">res\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">) \u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">          const\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> svgElement\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> new\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\"> DOMParser\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">            .\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">parseFromString\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">res\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">default\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">\"image\u002Fsvg+xml\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">            .\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">querySelector\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">\"svg\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">          if\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">svgElement\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\">            \u002F\u002F 去掉无用的属性\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">            for\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">const\u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#E5C07B\"> key\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> of\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> [\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">\"width\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">\"height\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">\"x\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">\"y\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">]) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">              svgElement\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">removeAttribute\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">key\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">            }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">            svgElement\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">id\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">            container\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\">!\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">appendChild\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">svgElement\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">          }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">        }).\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">catch\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(() \u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\"> svgIconList\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">delete\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">id\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">      }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#E5C07B\">      icon\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">value\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#56B6C2\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\"> eId\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">    },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">    { \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">immediate\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#D19A66\">true\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">  );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#E06C75\">script\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#E06C75\">template\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#E06C75\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#D19A66\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">\"--icon-svg common-svg\"\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#D19A66\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">\"true\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#E06C75\">use\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#D19A66\"> :href\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">\"icon\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#E06C75\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#E06C75\">template\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#E06C75\">style\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#D19A66\"> lang\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">\"scss\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#22863A;--shiki-dark:#E06C75\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#D19A66\">.--icon-svg\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#005CC5;--shiki-dark:#ABB2BF\">  display\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#D19A66\">inline-flex\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#005CC5;--shiki-dark:#ABB2BF\">  align-items\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#D19A66\">center\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#005CC5;--shiki-dark:#ABB2BF\">  justify-content\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">: \u003C\u002Fspan>\u003Cspan style=\"color:#005CC5;--shiki-dark:#D19A66\">center\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#E06C75\">style\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp data-marked-line=\"102\">在\u003Ccode>main.ts\u003C\u002Fcode>里只需要全局注册IconSvg组件就行了:\u003C\u002Fp>\n\u003Cpre data-marked-line=\"104\" data-lang=\"ts\" data-shiki>\u003Ccode class=\"language-ts\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">import\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> { \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">createApp\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"> } \u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">from\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\"> 'vue'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">import\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\"> App\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> from\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\"> '.\u002FApp.vue'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\">import\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\"> IconSvg\u003C\u002Fspan>\u003Cspan style=\"color:#D73A49;--shiki-dark:#C678DD\"> from\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\"> \".\u002Fassets\u002Fsvg\u002FIconSvg.vue\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">createApp\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">App\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">).\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">component\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">'svg-icon'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">, \u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#E06C75\">IconSvg\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">).\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#61AFEF\">mount\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">'#app'\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp data-marked-line=\"112\">这样使用:\u003C\u002Fp>\n\u003Cpre data-marked-line=\"114\" data-lang=\"html\" data-shiki>\u003Ccode class=\"language-html\">\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\"><!-- 对应home.svg -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\"><\u003C\u002Fspan>\u003Cspan style=\"color:#22863A;--shiki-dark:#E06C75\">svg-icon\u003C\u002Fspan>\u003Cspan style=\"color:#6F42C1;--shiki-dark:#D19A66\"> name\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">=\u003C\u002Fspan>\u003Cspan style=\"color:#032F62;--shiki-dark:#98C379\">\"home\"\u003C\u002Fspan>\u003Cspan style=\"color:#24292E;--shiki-dark:#ABB2BF\">\u002F>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch1 data-marked-line=\"119\">\u003Csup class=\"fake-head\" id=\"%E5%B0%8F%E7%BB%93\">\u003C\u002Fsup>\u003Ca class=\"header-link\" href=\"#%E5%B0%8F%E7%BB%93\">小结\u003C\u002Fa>\u003C\u002Fh1>\u003Cp data-marked-line=\"121\">这样做问题是解决了，可以动态导入svg并生成雪碧图，但是方式有点不优雅，有点投机取巧的感觉\u003Cimg src=\"\u002Fsticker\u002Fyellow-face\u002F47.png\" alt=\"sticker\"\u002F>\u003C\u002Fp>\n",[18,22,25],{"size":19,"text":20,"url":21},"big","思路","%E6%80%9D%E8%B7%AF",{"size":19,"text":23,"url":24},"代码","%E4%BB%A3%E7%A0%81",{"size":19,"text":26,"url":27},"小结","%E5%B0%8F%E7%BB%93","几个月前我刚接触vue3时就研究过，一直搞忘了分享。 起因 我的vue项目一般都使用动态导入的svg-sprite，意思是：既要是个雪碧图，用 标签复用；而且页面的svg应该是动态按需加载的。我觉得这样性能比较好，在vue2中实现比较简单，但是vue3+vite下我并未找到合适的解决方案，只有雪碧图…",[30,42,49,56,66],{"item":31,"count":41},{"title":32,"len":33,"tags":34,"id":37,"time":38,"modifyTime":39,"showComments":13,"encrypt":12,"customSlug":40},"关于本站的重构 (又双叒叕重构了)",1503,[35,8,36],"前端","杂谈",8500,1741528184917,1759579038298,"about-renovate",1,{"item":43,"count":41},{"title":44,"len":45,"tags":46,"id":47,"time":48,"modifyTime":48,"encrypt":12,"showComments":13,"customSlug":14},"vue3用于管理axios异步请求一致性的功能函数",3227,[8,35],9820,1725014139074,{"item":50,"count":41},{"title":51,"len":52,"tags":53,"id":54,"time":55,"modifyTime":55,"encrypt":12,"showComments":13,"customSlug":14},"Nuxt3创建SSE server以及client的简明教程",1905,[35,8],5449,1720261091923,{"item":57,"count":41},{"title":58,"len":59,"tags":60,"id":63,"time":64,"modifyTime":65,"encrypt":12,"showComments":13,"customSlug":14},"树莓派桌面小屏",1678,[61,8,62],"树莓派","python",8442,1645457432535,1685333435027,{"item":67,"count":41},{"title":68,"id":69,"time":70,"modifyTime":71,"len":72,"encrypt":12,"showComments":13,"tags":73,"customSlug":14},"适用于静态HTML的一种图片懒加载策略",4176,1640525746928,1640786463701,2387,[8],1793351210103]