svg symbol css,svg-symbol引用方法

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

问题一

【疑惑】：为什么要使用svg的图片格式？

【解答】：

常用的两种icon的用法优缺点对比：

font-class

兼容性良好，支持ie8+，及所有现代浏览器。

相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。

因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。

不过因为本质上还是使用的字体，所以多色图标还是不支持的。

svg

支持多色图标了，不再受单色限制。

通过一些技巧，支持像字体那样，通过font-size,color来调整样式。

兼容性较差，支持 ie9+,及现代浏览器。

浏览器渲染svg的性能一般，还不如png。

方便做高性能的动画效果

总结起来：

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

问题二

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

【解惑】：

在阿里iconfont中创建一个项目，并收藏一些icon

a. 进入到一个icon项目中后，将需要的icon添加到项目中

image.png

b. 点击右上角

image.png

c. 添加到项目

image.png

进入到自己的项目

a. 打开自己收藏的项目

image.png

b. 生成js导入链接

image.png

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

引入自己的项目

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/]

总的来说主要最关键的有两部分：

给body内部的最顶上添加一个svg元素

给svg元素添加上style，style给position:absolute 并且隐藏起来

其它的就是这段脚本的执行时机，再dom加载完成

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

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

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