论在做项目之前把需要的iconfont图标提前一次性准备好的必要性

我在做项目的时候恰巧又碰到了需要再加一个字体图标的情况，其实简单的方法有很多种，不一定是要像我之前的博文一样单独下载到本地又改这文件那文件的，其实直接复制svg代码，然后粘贴到项目中需要该字体图标的地方也可以实现再添加一个彩色iconfont字体图标。

在项目中粘贴代码如下，看粉色框框的地方，这个代码量真的很多。首先是过多过长的代码量影响阅读，排版不美观。其次是如果需要添加很多彩色图标，过多的代码量会影响浏览器渲染页面性能。

刚开始开始会觉得不就是再多几个dom节点而已，应该对性能的影响不大吧。但是既然是引入的彩色字体图标，那么肯定会在项目中有经常修改图标宽高大小的操作。首先页面中元素的大小发生了改变很容易引起重排和重绘，直接在iconfont图标元素上修改宽高，浏览器渲染页面的时候就得重新计算dom元素的属性，重新构造渲染dom树，这样就会影响到浏览器性能。

所以我就想难道没有别的方法可以像之前引入彩色iconfont那样直接使用吗？于是我就有了个大胆的想法，新添加的图标我偏偏要用彩色字体图标的引用方法

<svg class="icon-font">
	<use xlink:href="#icon-Lv41"></use>
</svg>

首先，彩色iconfont图标的颜色显示少不了main.js中引入的iconfont.css和iconfont.js这两个文件

//使用彩色iconfont，这个引入方法成功
import './assets/iconfont/iconfont.css'
import './assets/iconfont/iconfont.js'

打开项目中的iconfont.css和iconfont.js文件

观察iconfont.css文件发现除了前面的样式是统一的，其他图标的样式都很一致，粉框代表图标名称，黄框代表图标的代码

于是我在iconfont官网项目图标下找到了

我也要在iconfont.css中引入如下代码

观察iconfont.js文件，每个iconfont图标数据都是写在一对symbol标签中，id对应图标名称，每个图标有自己的viewBox

于是，我也按照对应的格式在iconfont.js文件中引入新添加图标的数据

结果是新添加的iconfont彩色图标也在浏览器中渲染出来了