- 【序】今天想为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名即可
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
问题三
- 【疑惑】：阿里iconfont引入的原理是什么？
- 【解惑】：我们将这段js的原理拆开来看：
!function(t){var l,h,c,a,p,C,i,d=`
<svg><symbol id="icon-gengduo" viewBox="0 0 1024 1024"></symbol></svg>
`,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("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}
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元素大概是这样的：
<body>
<div>
<svg style="aria-hidden:true;position:absolute;width:0;height:0;overflow:hidden">
<symbol id="icon-gengduo" viewBox="0 0 1024 1024"></symbol>
</svg>
</div>
</body>
在使用时你在任意位置使用dom就是这个样子
<body>
<div>
<svg style="aria-hidden:true;position:absolute;width:0;height:0;overflow:hidden">
<symbol id="icon-gengduo" viewBox="0 0 1024 1024"></symbol>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-gengduo"></use>
</svg>
</div>
</body>
总结：其中原理就是当svg脱离文档流后symbol就能够在任意位置被svg进行引用，多么奇妙的技巧
网友评论