脚本宝典收集整理的这篇文章主要介绍了vue引入阿里图标库(iconfont)单色和彩色图标,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
使用组件库时,图标往往不能满足需求,所以我们常常需要用到第三方图标库。阿里图标库是我们的常客。有两种形式,一是单色,二是彩色的。
3、在main.js导入iconfont.css文件
import './font/iconfont/iconfont.css'
4、在代码中使用class="iconfont icon-XXX"就可以使用图标了
这是直接引用,而像Element-UI则是将其与自己的图标进行了融合。
Element-UI引入第三方图标库:
打开iconfont.css文件,将以下代码加进去:
[class^="el-icon-my"],
[class*=" el-icon-my"]/*这里有空格*/*
{
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
4、写入图标代码
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-lianxi"></use>
</svg>
注意: 在这里要用#加class名
5、写入svg图标通用样式
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
补充:aria-hidden 的意思
图标的可访问性
现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容(尤其是当图标纯粹作为装饰用途时),我们为这些图标设置了 aria-hidden="true" 属性。
感谢大神的分享:
https://www.cnblogs.com/golov...
https://www.jianshu.com/p/59d...
以上是脚本宝典为你收集整理的vue引入阿里图标库(iconfont)单色和彩色图标全部内容,希望文章能够帮你解决vue引入阿里图标库(iconfont)单色和彩色图标所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。