【Vue】 element ui 引入第三方图标

一·背景

最近一个项目用到 vue 和 element ui开发前端。感觉<img>方式引入png图标比较鸡肋，所以决定把图标整合到element ui。截止目前为止国内外网络上的相关教程我搜索到没超过5篇，而且都不详细，即使全部阅读后总结也不能正常引入第三方图标，所以决定写一篇引入引入第三方图标的教程。

二·

1·基于阿里巴巴矢量图标库的一篇教程，地址;http://www.iconfont.cn/

2·进入网站登录账户后，新建一个项目



在该网站选择一些自己要用到的图标如上图点击购物车按钮添加到购物车。

3·把购物车添加的图标添加至自己新建的项目如下图



4·然后在下图，图标管理，我的项目里找到你项目所添加的图标。



5·除了从该网站选择你要用到的图标外还可以点击上图右上角处自己上传svg格式图标到阿里矢量库。（ 官方推荐 使用 adobe illustrator  设计图标并提供了ai模板）

6·点击更多操作对该项目进行一些设置如下图：



输入图标前缀为了不和element ui 的图标冲突 所以在 原有的el-icon后面加上自己的项目名称。然后设置 font family 点击保存

7·点击下载到本地 会下载一个download.zip 解压后 打开文件夹大致如下图：



其中有一些demo 和 样例 不用导入项目，但是为了给其他人一个提示也最好直接把所有文件拷贝到自己的vue项目中的：

src/assets 下 新建一个 icon文件夹。效果如图



然后打开iconfont.css

添加 代码

[class^="el-icon-ump"], [class*=" el-icon-ump"] {
font-family:"fontFamily" !important;
/* 以下内容参照第三方图标库本身的规则 */
font-size: 18px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

其中2个class 处 和 font-family 的设置是来自在 阿里矢量库项目设置的参数 请填写一致（注意：第二个class处前面有个空格）

修改完该文件 效果如下图：



8·然后在项目中要使用图标的页面 引入上面修改的css。

9·在项目中使用图标有两种方式 如 我的图标全称为el-icon-ump-addition

1）icon属性

<el-button size="small" icon="ump-addition" @click="handleAdd" style="padding:6px 4px;width: 90px">
新增群组
</el-button>

2）class属性

<el-button size="small" class="el-icon-ump-addition" @click="handleAdd" style="padding:6px 4px;width: 90px">
新增群组
</el-button>

10·完结