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

原创 2017年10月19日 16:57:06

一·背景

最近一个项目用到 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·完结



版权声明:本文为博主原创文章,未经博主允许不得转载。

Vue中使用ElementUI使用第三方图标库iconfont

1.在http://www.iconfont.cn/阿里巴巴图标库添加图标到自己项目中,然后点击更多项目中的编辑项目 2.修改前缀为el-icon-xxx,xxx自定义然后,将项目下载自本地 ...
  • qq_15646957
  • qq_15646957
  • 2017年09月07日 21:35
  • 8919

ElementUI使用第三方图标库Iconfont

1、http://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.2  进入阿里巴巴图标库 2、将所需图标加入购物...
  • sou_vyp
  • sou_vyp
  • 2017年10月10日 09:20
  • 2898

elementui2.0图标错乱的问题

element-ui升级到2.0之后,发现我的代码中图标是乱的,比如 刷新 出来的效果却不是刷新图标。具体原因没有深入排查,只是找到了解决方法,在webpack打包时,用url-loader替换f...
  • wsxwang
  • wsxwang
  • 2017年11月02日 11:34
  • 348

【工作日志】elementUI学习-Layout布局

Layout布局1.创建布局通过Col组件的:span属性调整Layout布局,分为24栏。el-row> 2.分栏间隔通过Row组件的:gutter属性来调整布局之间的宽度。 ...
  • FelixJiaWork
  • FelixJiaWork
  • 2017年03月13日 16:24
  • 12063

vue 学习第二节

整体页面框架搭建因为本人前端基础差,特别是css方面所以一般我都是用静态的方式先弄一个架子出来在一步一步替换死的变成活的先看看静态的页面接下来死的先把这个界面迁移到vue项目中 写一个顶部导航组件 写...
  • oopsangle
  • oopsangle
  • 2017年01月28日 18:49
  • 1542

vue.js导入css库(elementUi)的方法

1.安装以下模块,让webpack可以解析css文件cnpm install style-loader --save-dev cnpm install css-loader --save-dev cn...
  • xiejunna
  • xiejunna
  • 2017年01月22日 17:03
  • 9450

使用elementui表格,项目感悟

一、使用表格第一步 import ElementUI from 'element-ui' Vue.use(ElementUI) 二、完成第一步,接下来直接引用组件标签了     ...
  • qq_24122593
  • qq_24122593
  • 2016年12月29日 18:08
  • 23187

vuejs-折腾系列(一)vue-fontawesome使用

折腾前言目前工作主要使用 vue.js 框架进行开发,自己又对 vue 不是那么了解,还是半桶的状态,所以得加紧步伐赶紧熟悉起来,这两天在使用脚手架 vue-cli 创建项目玩耍中,又一直对font-...
  • gccll
  • gccll
  • 2017年05月18日 10:03
  • 10645

如何快速的写出一个Vue的icon组件?

伴随着Vue的诞生,它似乎就被人寄予厚望,不仅仅是因为其轻量级的MVVM设计方式,而且其实现了组件化开发模式,所以越来越多的人会拿Vue和AngularJS、React Native做比较。具体关于它...
  • enterlind
  • enterlind
  • 2017年03月08日 13:57
  • 3504

vue+ElementUI实现订单页动态添加产品效果

使用vue2.0(ElementUI基于vue2.0)+ElementUI*(饿了么出品*)实现的在订单页面动态添加产品的效果,并自动计算总价。代码直接保存即可查看效果。...
  • henu2009220176
  • henu2009220176
  • 2016年11月29日 17:26
  • 15101
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【Vue】 element ui 引入第三方图标
举报原因:
原因补充:

(最多只允许输入30个字)