Vue.js项目中使用iconfont冲突问题解决

在开发前端项目中，字体图标变得越来越常用。一方面因为它比图片使用起来方便，可以像字体一样修改大小和颜色；另一方面是因为它可以减少请求数量，优化前端性能。

iconfont的使用方法很简单，主要由三种引入方式：Unicode， Font Class，Symbol。不会的可以去官网看看：https://www.iconfont.cn/

 

但是在实际项目中，我们可能会遇到iconfont冲突的问题，简单来说就是某个项目存在多个iconfont资源目录，而且命名没有修改（默认名都是"iconfont"）。导致在页面加载时无法确定使用哪个资源目录下的图标，就会显示不出来。

举个我实际项目中的例子（由于浏览器的限制，我使用的是font class方法）：在开发项目A时，我在assets目录里，新建一个iconfont文件夹用来存储该项目中需要用到的iconfont资源；由于需求我需要开发一套通用UI组件，考虑到插件的独立性和移植性，我想把该组件与项目解耦，包括资源，方法等。于是我在components目录下新建一个目录componentA,里面由独立的assets,function目录。由于iconfont都是从官网直接下载，没有修改，导致这两个资源的命名都是"iconfont"，导致组件中iconfont始终都加载不出来。

原因：字体命名冲突，样式命名冲突，导致字体图标显示不出来。由于两个地方的iconfont.css文件中的字体命名都是"iconfont"，而且样式命名也是相同的，导致问题的出现。

解决办法：既然明确了问题的原因，只要修改其中一个文件的命名就好了，如下图。

修改好iconfont.css文件后，引用的地方也需要修改。如下图：

重新运行项目，组件中和项目中的iconfont都可以正常显示。