一个小工具，让uni-app也能使用iconfont多色图标

开始

对于一个前端攻城狮，没有UI，单独去做一个项目并且保证页面的美观是非常令人头疼的，有时候光是想页面的设计和寻找设计资源比自己写代码的时间还长，而且还难找。

影响页面的美观因素有很多，我想一套美观优雅的字体图标是非常提升页面的逼格的。

而且字体图标使用非常方便，不需要像图片那样，把图片放到项目，然后引用路径。对于学习前端的人单独去做项目真的很适合，而且图标库拥有海量的图标，总能找到自己想要的，设计成本很低，相比于瞎找网络上的图片，还带水印，还难找真的太省事了。真就是一个设计库。

简单的说一下iconfont阿里巴巴矢量图标库。iconfont是功能很强大且图标内容很丰富的矢量图标库，主要还是国内的，访问快，中文支持友好，有庞大的用户群体。

不同于其他的图标库，iconfont不仅仅支持传统的单色图标，还有多色图标，并且多色图标已经到达了一个数量级，选择非常的多，美观且优雅。可以看一下单色图标和多色图标的对比。

iconfont有三种引用方式unicode、font-class、symbol使用图标，多色图标对应的就是symbol引用，可以看一下官方对此的描述：

详细的可以看一下官方的教程使用帮助

但是我们会发现，官方只是说了一下web端的使用，并没有说小程序怎么使用多色图标，难道小程序就不能使用多色图标了吗？其实是可以的，接下了我会详细说说如何在uni-app使用iconfont多色图标。

我们要把原始iconfont多色图标变成uni-app可使用的图标要可以分为以下步骤：

如何创建一个项目，把图标加进项目就不多说了。我们把下载的图标解压出来，然后进入字体文件目录。

这是很关键的一步，这个工具可以把我们下载多色图标转化成uni-app可使用的图标库，建议全局安装这个包。

npm install -g iconfont-tools

安装好这个包后，我们在下载的字体文件目录打开cmd，然后执行这个命令，很重要的一步，不要搞错了文件夹目录。

然后会出现几个提示，自己可以根据需要去更改，我们这里直接一路回车，选择默认就好。

然后，我们就转化好了，可以去看一下生成定的iconfont-weapp目录。

在uni-app使用这些多色图标，只需要用到iconfont-weapp-icon.css这个文件，然后我们把这个文件放到到uni-app项目中去。

然后在App.vue中引入这个文件：

然后我们就可以在项目中使用它了，使用是添加类名，一个是通用类名t-icon，还有一个是单个图标专属类名，使用方法跟font-class差不多。

多色图标是彩色的，这难道不比单色图标有逼格。

我们看看iconfont-weapp-icon.css都有些什么

我们可以通过更改通用类名去更改图标的默认样式。然后，我们怎么根据需要单独更改某一个图标呢？

我们可以在使用的地方给类名添加样式从而去覆盖默认样式，并且不同于单色图标，多色图标更改大小是通过width和height更改的，因为图标是正方形，我们也要保证width和height相同。

最后，再放放我收藏的iconfont多色图标库吧：

感谢读完本篇文章，希望对你能有所帮助，如有问题欢迎各位在评论区指正。

创作不易，希望点个赞支持一下❤️❤️。