前言
之前一直用 image 的方式使用 svg，后来，改把 svg 上传到阿里巴巴的 iconfont-阿里巴巴矢量图标库 使用。
前段时间，iconfont 出问题了，不支持上传 svg，也不支持生成 cdn 了，只能下载到本地使用。
后来，尝试使用了一下本地使用的方式，还是太麻烦，最主要，已经没法上传自己的 svg 了，还不利于团队协作，太不友好了。
于是研究了一下，才发现，原来早就有更好的实现方式了，可以完全不依赖 iconfont 生成的资源来运作。
阅读文档
说实话，有些细节，如果不是自己慢慢摸索，很难在一开始就发现。
其实解决问题的方案，老早就跃然纸上，只是之前已经错过了很多次了。
使用一项新技术、新框架的时候，我想，很多人都没有耐心从头到尾，详细的看一遍官方文档。
我稍微总结了一下，原因大概有几点：
- 官方文档写得太晦涩难懂了，术语用的太专业，看起来太过于无聊，浪费时间
- 没有中文文档，对于英语阅读能力不好的童鞋，看起来太吃力
- 基础不行，看起来太过吃力，即使耐心的看完，也是云里雾里，完全不能理解
- 不知道合适的应用场景，看了也不清楚该怎么用，前面看后面就忘记了，不如当作工具书来用
- 官方文档写的太差，不值得一看，不如直接阅读源码
我想，笔者总结的这几点，大部分人在某些情况下，应该都能对号入座。
不看官方文档，也不能说一定不好，但是，相信我，大部分官方文档看了总比不看要好。
试想想，还能有谁比技术、框架的作者更了解产品本身呢？
The devil is in the details
按照个人的经验来说，也许很多困扰你已久的问题，可能就藏在官方文档的某个不起眼的角落里面，等待着你去发掘呢。
历程
我一直认为，写技术文章，如果只专注于写技术本身，其实并没有多大的参考价值。那就如同一本流水账一样，和藏在官方文档的某个角落里，和藏在叫教科书的某个章节里没啥区别。
如果是那样，与其叫文章，倒不如叫摘抄。
比如在我决定花时间去研究下，如何替换 iconfont 之后，我就在找有什么合适的技术方案。
首先第一步，肯定是罗列一些不能直击核心本质的关键字，在搜索引擎检索一番。
依照以往的经验来看，这多半是找不到合适的答案的。在没有理解透彻问题的本质之前，很难一下子就抓住关键要素。
后来我一想，之前用上 iconfont 也是因为，在 antd 里的文档看到使用推荐，那有没有别的方式呢？
别说，还真有。
图标 Icon - Ant Design
从文档中可以看出，有一个 svgr 插件，是支持以 react component 的方式，引入 svg 图片的。
打开官网的开始使用页面： Getting started - SVGR
可以看到，有在 webpack 里使用的教程。
又是对着文档一番折腾，最后发现，仍旧是使用失败。
当然这里有一个前提是，我的项目之前是直接使用 create-react-app 创建的，你如果直接用 webpack 从零开始配置的项目，按照教程里用肯定是没问题的。
用过 create-react-app 的童鞋应该知道，官方提供的脚手架非常的好用，但是其内部的 webpack 相关配置隐藏的太好了，不方便更改。
为了项目的简介性，我不想将所有的配置 eject 出来，因为这个过程是不可逆的。
还好有个比较好的修改方案，就是使用 GitHub - gsoft-inc/craco: Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app 插件。
照着 svgr 官方文档的配置方式，再结合 craco 的修改默认 webpack 配置的方案，成功加载了插件，但是仍旧无法使用。
正所谓，“山重水复疑无路，柳暗花明又一村”。
正在我一筹莫展，苦恼不已的时候，却在 create-react-app 的官方文档有了新的发现：Adding Images, Fonts, and Files | Create React App
在 [email protected] 和 [email protected] 版本开始，直接就支持以 ReactComponent 的方式导入 SVG 了。
看到这里，真是一口老血要气的喷出来了。
真可谓是，“众里寻他千百度，蓦然回首，那人却在灯火阑珊处”。
赶紧一顿还原操作，配合着 antd 的 Icon 组件，顺利的用上了 ReactComponent 形式的 SVG 了。
从此再也不用受制于 iconfont 了。
不过需要注意的是，如果你的 svg 里设置了颜色属性，如下面所示的话，那么最好给它删除掉以后再用，否则 svg 里图元的样式不能自动继承父元素的样式，处理起来较为麻烦。
总结
说来惭愧，如果不是因为 iconfont 出了这岔子问题，笔者也不会有兴趣研究这个问题，那么也就不会发现，原来在 react 中用 svg 还有这么舒服的使用方式。
通过研究这个问题，至少是给我自己敲响了一些警钟。有时候，发现问题，官网文档、官方论坛往往能帮助你解决大部分问题，耐心的研究过后，如果还是不能解决，在寻求别的方案，才是上策。