svg-symbol引用方法

• 【序】今天想为vue封装一个可以通过name就生成一个icon的组件，平时我们都是通过class来添加一个字体icon，但是看到ant-design-vue 中是使用的svg-icon的，并且配合阿里的iconfont库，使用起来非常方便，令我心动，让我们一起研究一下这个组件是怎么做到的。

问题一

• 【疑惑】：为什么要使用svg的图片格式？
• 【解答】：
  常用的两种icon的用法优缺点对比：

font-class

1. 兼容性良好，支持ie8+，及所有现代浏览器。
2. 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
3. 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
4. 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

svg

1. 支持多色图标了，不再受单色限制。
2. 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
3. 兼容性较差，支持 ie9+,及现代浏览器。
4. 浏览器渲染svg的性能一般，还不如png。
5. 方便做高性能的动画效果

总结起来：
没有动画需求，没有多色图标的需求，还是使用font-class会更好，反之使用svg更好

问题二

• 【疑惑】：怎么样引入svg的项目呢？
• 【解惑】：

1. 在阿里iconfont中创建一个项目，并收藏一些icon
   a. 进入到一个icon项目中后，将需要的icon添加到项目中

   
   
   image.png
   
   

   b. 点击右上角

   
   
   image.png
   
   c. 添加到项目
   
   image.png

2. 进入到自己的项目
   a. 打开自己收藏的项目

   
   
   image.png
   
   

   b. 生成js导入链接

   
   
   image.png
   
   好的，现在就得到了该项目中所有收藏的icon的js项目了，接下来我们就可以将该js引入到项目中！

3. 引入自己的项目
   a. 最简单的办法就是生成一个script标签，并将地址赋值给src
   我们可以在public/index.html中直接添加
   b. 本地引入，将地址放到浏览器地址栏就能够得到这段js的内容，将它复制到一个本地文件
   然后给一个plugin，require这一段代码就可以了
   c. 接下来可以在component下的任意位置写一个,并将#icon-xxx中的icon-xxx替换成你需要的icon名即可

问题三

• 【疑惑】：阿里iconfont引入的原理是什么？
• 【解惑】：我们将这段js的原理拆开来看：

!function(t){var l,h,c,a,p,C,i,d=`

`,o=(l=document.getElementsByTagName("script"))[l.length-1].getAttribute("data-injectcss");
if(o&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;
try{document.write("")}
catch(t){console&&console.log(t)}}function L(){C||(C=!0,a())}h=function(){var t,l,h,c,a,p=document.createElement("div");p.innerHTML=d,d=null,(t=p.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",l=t,(h=document.body).firstChild?(c=l,(a=h.firstChild).parentNode.insertBefore(c,a)):h.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(h,0):(c=function(){document.removeEventListener("DOMContentLoaded",c,!1),h()},document.addEventListener("DOMContentLoaded",c,!1)):document.attachEvent&&(a=h,p=t.document,C=!1,(i=function(){try{p.documentElement.doScroll("left")}catch(t){return void setTimeout(i,50)}L()})(),p.onreadystatechange=function(){"complete"==p.readyState&&(p.onreadystatechange=null,L())})}(window);

建议复制到IDE中格式化后再看[dog/]
总的来说主要最关键的有两部分：

1. 给body内部的最顶上添加一个svg元素
2. 给svg元素添加上style，style给position:absolute 并且隐藏起来
   其它的就是这段脚本的执行时机，再dom加载完成

如果脚本加载完毕后此时你的dom元素大概是这样的：

在使用时你在任意位置使用dom就是这个样子

总结：其中原理就是当svg脱离文档流后symbol就能够在任意位置被svg进行引用，多么奇妙的技巧