免费icon素材图标推荐阿里云icon图标 _云

Element UI 是目前流行的一款前端UI工具。它能配合Vue这个流行的前端框架。安装使用也简单：npm i element-ui -S即可。不过美中不足的是自带的图标集合不够用，图标太少了。今天刚好碰到这个问题，现在来分享一下如何在Vue Element中使用阿里云矢量图标库。

文章插图
element 自带图标库
一，注册阿里云图标库Iconfont ，过程自行百度。
二，创建项目

文章插图
三，添加图标到项目：首先在首页搜索需要的图标，然后添加到购物车，接着添加到指定的项目

文章插图

文章插图
四，下载图标文件

文章插图
五，将文件解压，复制到Vue项目：我是在Vue项目的src-assets下创建了icon文件夹，将所有的文件复制了过来

文章插图
六，修改其中的iconfont.css文件：这里以引用icon-shouye图标为例

文章插图
七，复制阿里云图标库中的所选图标的代码

文章插图
八，重新编译Vue项目：npm run dev
【免费icon素材图标推荐阿里云icon图标】九，引用图标：这里以我的el-button为例：
<el-button icon=”icon-shouye” size=”small” circle style=”background:#abd3ff”></el-button></div>