iconfont使用icon svg文件svg-symbol引用方法

最新推荐文章于 2024-01-31 00:15:32 发布

liu__software

最新推荐文章于 2024-01-31 00:15:32 发布

阅读量1.4k

点赞数 1

分类专栏： H5 文章标签： html5

原文链接：https://www.jianshu.com/p/2dae6248315f

版权

H5 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

【序】今天想为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添加到项目中

b. 点击右上角

c. 添加到项目
进入到自己的项目
a. 打开自己收藏的项目

b. 生成js导入链接

好的，现在就得到了该项目中所有收藏的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进行引用，多么奇妙的技巧

作者：陌客百里
链接：https://www.jianshu.com/p/2dae6248315f
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

liu__software

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
iconfont使用icon svg文件svg-symbol引用方法

【序】今天想为vue封装一个可以通过name就生成一个icon的组件，平时我们都是通过class来添加一个字体icon，但是看到ant-design-vue 中是使用的svg-icon的，并且配合阿里的iconfont库，使用起来非常方便，令我心动，让我们一起研究一下这个组件是怎么做到的。问题一【疑惑】：为什么要使用svg的图片格式？【解答】：常用的两种icon的用法优缺点对比：font-class兼容性良好，支持ie8+，及所有现代浏览器。相比于unicode语意明确，书写更直观。
复制链接

扫一扫