iconfont的三种使用方式详解

2023-09-09 10:20:05 53

在我们项目中经常要使用到iconfont，在此我们使用阿里巴巴矢量库提供的icon图标，此图标库足够为我们提供大量的图标，我们首先需要的事在阿里巴巴矢量图标库新建一个自己的账号，并且新建一个项目，这个项目包含了你所有要用到的图标。我们需要选中需要的图标放到自己的项目中，并下载下来放到自己项目下的iconfont文件夹之下。（需要更新图标时，下载包也需要重新下载更新）

方式一：使用symbol方式（本质是用svg标签构成的）

第一步：为了代码更好的复用，我们封装一个svg-icon组件，代码如下：




.svg-icon{
width:1em;
height:1em;
vertical-align:-0.15em;
fill:currentColor;
overflow:hidden;
}

第二步：在main.js中引入

import'@/assets/icons/iconfont.js'//symbol方式的相关文件
import'@/assets/icons/iconfont.css'//Unicode和fontclass方式的样式包
importSvgIconfrom'@/components/SvgIcon'//使用icon组件
Vue.component('svg-icon',SvgIcon)//引入全局组件，也可以在局部引入

第三步：使用

在自己需要用到的组件中：

另外两种使用方式是使用unicode和fontclass方式，如上面的代码所示引入与使用

然后我们谈谈这三种方式的优缺点吧

unicode：

优点：

兼容性最好，支持ie6+
支持按字体的方式去动态调整图标大小，颜色等等

缺点：

不支持多色图标
在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对文字的渲染不同，其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响，而且这种影响调整起来较为困难
不直观，看unicode码很难分辨什么图标

fontclass：

兼容性良好，支持ie8+
相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。

symbol：

支持多色图标了，不再受单色限制。
支持像字体那样通过font-size,color来调整样式。
支持ie9+
可利用CSS实现动画。
减少HTTP请求。
矢量，缩放不失真
可以很精细的控制SVG图标的每一部分

综上所述的一些特点，个人比较推荐使用symbol或者fontclass的方式

总结

以上所述是小编给大家介绍的iconfont的三种使用方式，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

iconfont的三种使用方式详解

热门推荐

随机推荐