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

202206232322400.png

从文档中可以看出,有一个 svgr 插件,是支持以 react component 的方式,引入 svg 图片的。

打开官网的开始使用页面: Getting started - SVGR

20220624144353.png

可以看到,有在 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

20220624150203.png

[email protected][email protected] 版本开始,直接就支持以 ReactComponent 的方式导入 SVG 了。

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

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

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

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

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

20220624151235.png

总结

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

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

你可能感兴趣的:(react 中更好的 svg 使用方式)