react 中更好的 svg 使用方式

前言

之前一直用 image 的方式使用 svg，后来，改把 svg 上传到阿里巴巴的 iconfont-阿里巴巴矢量图标库 使用。

前段时间，iconfont 出问题了，不支持上传 svg，也不支持生成 cdn 了，只能下载到本地使用。

后来，尝试使用了一下本地使用的方式，还是太麻烦，最主要，已经没法上传自己的 svg 了，还不利于团队协作，太不友好了。

于是研究了一下，才发现，原来早就有更好的实现方式了，可以完全不依赖 iconfont 生成的资源来运作。

阅读文档

说实话，有些细节，如果不是自己慢慢摸索，很难在一开始就发现。

其实解决问题的方案，老早就跃然纸上，只是之前已经错过了很多次了。

使用一项新技术、新框架的时候，我想，很多人都没有耐心从头到尾，详细的看一遍官方文档。

我稍微总结了一下，原因大概有几点：

1. 官方文档写得太晦涩难懂了，术语用的太专业，看起来太过于无聊，浪费时间
2. 没有中文文档，对于英语阅读能力不好的童鞋，看起来太吃力
3. 基础不行，看起来太过吃力，即使耐心的看完，也是云里雾里，完全不能理解
4. 不知道合适的应用场景，看了也不清楚该怎么用，前面看后面就忘记了，不如当作工具书来用
5. 官方文档写的太差，不值得一看，不如直接阅读源码

我想，笔者总结的这几点，大部分人在某些情况下，应该都能对号入座。

不看官方文档，也不能说一定不好，但是，相信我，大部分官方文档看了总比不看要好。

试想想，还能有谁比技术、框架的作者更了解产品本身呢？

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

在 react-scripts@2.0.0 和 react@16.3.0 版本开始，直接就支持以 ReactComponent 的方式导入 SVG 了。

看到这里，真是一口老血要气的喷出来了。

真可谓是，“众里寻他千百度，蓦然回首，那人却在灯火阑珊处”。

赶紧一顿还原操作，配合着 antd 的 Icon 组件，顺利的用上了 ReactComponent 形式的 SVG 了。

从此再也不用受制于 iconfont 了。

不过需要注意的是，如果你的 svg 里设置了颜色属性，如下面所示的话，那么最好给它删除掉以后再用，否则 svg 里图元的样式不能自动继承父元素的样式，处理起来较为麻烦。

总结

说来惭愧，如果不是因为 iconfont 出了这岔子问题，笔者也不会有兴趣研究这个问题，那么也就不会发现，原来在 react 中用 svg 还有这么舒服的使用方式。

通过研究这个问题，至少是给我自己敲响了一些警钟。有时候，发现问题，官网文档、官方论坛往往能帮助你解决大部分问题，耐心的研究过后，如果还是不能解决，在寻求别的方案，才是上策。