手把手教你在vue项目中使用iconfont的Symbol

symbol

• 支持多色图标了，不再受单色限制。
• 支持像字体那样通过font-size,color来调整样式。
• 支持 ie9+
• 可利用CSS实现动画。
• 减少HTTP请求。
• 矢量，缩放不失真
• 可以很精细的控制SVG图标的每一部分

symbol是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。具体相关的可以参考这篇文章：手摸手，带你优雅的使用 icon

话不多说，下面说一下具体使用的方法

1.首先你需要在iconfont里面注册一个账号，如图，里面有很多icon可以使用

2.选择你需要的的图标，添加到你的项目当中去，没有项目的话，可以自己创建一个新的项目。例如:

3.你可以使用上线的给你的地址

或者下载在本地使用，本人推荐下载到本地使用，这样子的话，就算不联网图标也不会消失。点击下载到本地，里面的文件夹有很多文件，你只需要的就是iconfont.js这个文件。

4.在你vue项目public中创建static文件，并且把刚刚下载的iconfont.js这个文件放到里面去，然后再index.html中引入

<script src="./static/iconfont.js"