使用uview框架的icon组件之扩展自定义图标库

uView已经有很多图标，但也没办法满足我们所有的需求。此时，我们就需要自己扩展图标库。

选择以及下载图标

1、首先可以选择自己喜欢的图标库，这里以阿里图标库为例。

2、接着选择自己的想要的图标并且加入购物车。
3、然后打开购物车把图标添加到项目中。
4、点击更多操作，选择编辑项目。
5、然后按照图片相应的填写好，点击保存。
6、点击下载至本地。
7、然后把下载好的压缩包解压，复制相应的iconfont.css

项目配置以及使用

1、把上面复制好的iconfont.css文件复制到项目的static文件夹下面,然后打开iconfont.css，如下图：
2、然后按照上图删除一些，正确的如下图：
3、在项目根目录的"App.vue"中，引入上述的"iconfont.css"，注意自己存放的路径，且通过"@import"引入的外部样式，为了兼容性建议使用相对路径， 且引入的样式，需要写在style标签有效内容中的最前面，如下：

/* App.vue */
<style>
/* 此处为style标签内容的最前面 */
@import "./static/iconfont.css";
</style>

4、使用图标方法：

<u-icon name="backspace" custom-prefix="custom-icon" size="30" color="#888888"></u-icon>

从上可以看出，相比uView内置的图标使用，多了一句固定的custom-prefix=“custom-icon”，其余使用方法完全相同 。
ps：backspace是名字，可以自定义，在iconfont.css中。