乐趣区

vue引入阿里图标库(iconfont)单色和彩色图标

使用组件库时,图标往往不能满足需求,所以我们常常需要用到第三方图标库。阿里图标库是我们的常客。有两种形式,一是单色,二是彩色的。
单色图标的引用

1、在 iconfont 官网选图标,加入购物车,加入项目,下载到本地,解压
2、在项目 src 目录新建目录 font,用于存放刚才下载解压的代码

3、在 main.js 导入 iconfont.css 文件
import ‘./font/iconfont/iconfont.css’

4、在代码中使用 class=”iconfont icon-XXX” 就可以使用图标了
这是直接引用,而像 Element-UI 则是将其与自己的图标进行了融合。
Element-UI 引入第三方图标库:

在 iconfont 官网选图标,加入购物车,加入项目
编辑项目,修改 FontClass/Symbol 前缀为:el-icon-xx(xx 为自己定义的类名,注意不要与 Element 自身的图标类名重合)
将图标项目下载至本地,解压
在项目 src 目录新建目录 font,用于存放刚才下载解压的代码

打开 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;
}

在 main.js 导入 iconfont.css 文件 import ‘./font/iconfont/iconfont.css’
打开在阿里 icon 的项目,复制你想要的图标代码
使用方式与 Element-UI 自带的图标一样

彩色图标

1、在 iconfont 官网选图标,加入购物车,加入项目,注意选择 Symbol,再下载到本地
2、在项目 src 目录新建目录 font,用于存放刚才下载解压的代码,或者只拷贝其 iconfont.js 文件
3、在 main.js 导入 iconfont.js 文件

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…

退出移动版