自制svg的icon怎么在项目中使用

现在要做个项目，里面有很多的小图标，都是公司设计同事自己设计的，然后怎么把这些小图标运行到项目里，为此我研究了iconfont的前世今生，在此记录下。
首先，拿到svg文件的时候我有以下几个疑问：
1、可以使用的svg文件有哪些要求吗
2、svg文件怎么就可以用font-size，color这些css属性来控制
3、设计给的svg文件，怎么拿来在代码里用？
带着这些问题，首先我研究了张鑫旭大神的未来必热：SVG Sprites技术介绍，得出了一下结论
针对第一个问题，设计给的svg图有两种情况，一是每个icon的svg文件，二是集在一起的svg图片，不巧，设计同事导出的svg雪碧图文件是这个样子

image.png

我尝试了单独引入某个svg的path却屡屡失败，失败情况如下，要么是需要的那个icon小到看不见，要么icon就不在可见区域内，为此我研究了svg的viewBox属性，这个属性是用来控制svg画板的尺寸大小，可以说是加上这个尺寸就可以对svg图片进行相应的放大缩小（具体可见 博客SVG之ViewBox），所以就暴露了一个问题，设计导出的是多个path或者g集合共用一个svg，所以也共用了一个viewBox, 我们引入相应的path的时候，改变的是整个svg的大小，所以里面相应的icon都会进行缩放，又因为一般的icon尺寸都是非常小，从而导致里面的icon小到不可见或者不在可见位置

image.png

由此可见，这种格式的svg雪碧图文件是不可用的。经过再深入研究svg，发现原来svg还有个symbol元素, 这个元素简直太完美了，symbol元素用来对元素进行分组；它不会被直接显示，大概相当于定义一个模板，并且可以设置单独的viewBox，然后使用元素引用并进行渲染。所以一个合理的svg雪碧图应该是这个样子

image.png

于是乎，得出了第一个问题的答案，可以前端用来使用的svg文件要么是每个icon单独svg文件，要么是一个含有元素symbol的多个symbol的集合的svg的雪碧图（可参考未来必热：SVG Sprites技术介绍里面对svg雪碧图的两种处理）
第一个问题解决后，不知道有没有人好奇过第二个问题，比如你直接在svg文件里定义font-size和color是不生效的，这是为什么呢？我本来以为是js或者svg的fill和尺寸从而配置font-size和color？后来才知道自己想多了，font-size是因为在调用svg的父级设置宽高的时候使用em单位（1em 等于当前的字体尺寸）,从而解释了font-size为什么可以控制svg的宽高，color控制svg颜色是因为css3里有个关键字currentColor（具体意思就是使用该关键字的元素的（或其最近父元素）color属性的颜色值），在调用svg文件里设置fill: currentColor，于是svg就乖乖跟着父级的color改变而改变了，从而解释了第二个问题。
最后，合适的svg文件做好了，也懂得了为什么可以控制svg的大小和颜色，就剩下如何在代码中使用了，具体可以参考vue-element-admin里面对icon的封装，博客可见手摸手，带你优雅的使用 icon（这块后续添加到项目中我会具体再介绍）