VueElement-UI使⽤icon图标（第三⽅）--在线版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扩展的项⽬
css怎么创建
创建icon项⽬
按照上图中的步骤，创建⼀个element扩展icon项⽬，注意第4点
2. 添加icon到项⽬中
在图标库中到你想要的icon后，加⼊购物车，然后点击右上⾓的购物车，把icon添加到你的element扩展项⽬⾥吧~
添加icon到项⽬中
3. ⽣成icon的在线css链接
⽣成在线css链接
（重点）4. 在Vue项⽬中，引⽤在线css链接和新建css样式⽂件 （重点）4. 在Vue项⽬中，引⽤在线css链接和新建css样式⽂件
4.1 在Vue项⽬中创建iconf ont.cs s⽂件，当然名字⾃定义。
App.vue⽂件引⽤
组件中的两种icon使⽤⽅式
效果图
啦啦啦
5. 想更新icon项⽬？so easy
只需要⼀步
在阿⾥icon的项⽬⾥，拿到更新后的icon在线css链接，复制到index.html的link标签⾥，就⼤功告成啦~~
更新链接咯
替换旧的链接

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。