Element-ui一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，在Vue中使用是很方便的。
关于引用icon（第三方），有一种不用下载项目到本地的方法，
前言
element自带的有icon，使用起来也很方便。但是美中不足的是，官方提供的图标库只是部分，在需要新的icon时，我就想到了引入第三方icon。对我来说，阿里的icon库就很方便，之前的项目也是用的这个库。
先是查看了Element官方文档，没发现有提示如何引用第三方icon，就尝试Google一下教程。这里看到了方丈先生的文章Vue Element使用icon图标(第三方)，按照他的方法试着操作了一遍，成功引用了。
但是我发现，每次新增或修改icon，我都要重新下载项目吗？
要怎么做，就可以只更新引用阿里icon的链接，在项目中像使用el-icon-iconName一样？
element使用icon的两种方式
思考过一番后，想到一个方法，既然下载到本地的也是去修改iconfont.css里面的内容，那我不就可以在index.html里面引用阿里的在线css链接，在App.vue里面，引入我要修改添加的样式。不就OK了吗？
想完就去尝试可能性。结果一如所想。下面是具体操作~
教程
关于在阿里icon上注册、登录、创建项目用来存放icon的具体流程，可以参考方丈先生的文章Vue Element使用icon图标(第三方)
1. 在阿里icon上创建一个给element扩展的项目
创建icon项目
按照上图中的步骤，创建一个element扩展icon项目，注意第4点
2. 添加icon到项目中
在图标库中找到你想要的icon后，加入购物车，然后点击右上角的购物车，把icon添加到你的element扩展项目里吧~
添加icon到项目中
3. 生成icon的在线css链接
生成在线css链接
4. 在Vue项目中，引用在线css链接和新建css样式文件 （重点）
4.1 在Vue项目中创建iconfont.css文件，当然名字自定义。
[class^="el-icon-ali"], [class*="el-icon-ali"]
{
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
这里的 el-icon-ali 是我自己起的icon前缀名。
4.2 引用阿里项目在线的css链接
我是在index.html里面引用的。放在前面
link引用
4.3 引用自己创建的css文件
在main.js中引入
根据你创建文件的路径来引用哦。
PS：emmmmm.....其实我的main.js引用会报错，还没处理。我是在App.vue文件里面引用css的。（尴尬又不失礼貌的微笑🙂
App.vue文件引用
4.4 可以在项目中使用你的icon啦~~~~
组件中的两种icon使用方式文章来源：https://www.toymoban.com/news/detail-460740.html
文章来源地址https://www.toymoban.com/news/detail-460740.html
到了这里，关于Vue Element-UI使用icon图标(第三方)--在线版的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
