react 中更好的 svg 使用方式
前言
之前一直用 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
在 react-scripts@2.0.0 和 react@16.3.0 版本开始，直接就支持以 ReactComponent 的方式导入 SVG 了。
看到这里，真是一口老血要气的喷出来了。
真可谓是，“众里寻他千百度，蓦然回首，那人却在灯火阑珊处”。
赶紧一顿还原操作，配合着 antd 的 Icon 组件，顺利的用上了 ReactComponent 形式的 SVG 了。
从此再也不用受制于 iconfont 了。
不过需要注意的是，如果你的 svg 里设置了颜色属性，如下面所示的话，那么最好给它删除掉以后再用，否则 svg 里图元的样式不能自动继承父元素的样式，处理起来较为麻烦。
总结
说来惭愧，如果不是因为 iconfont 出了这岔子问题，笔者也不会有兴趣研究这个问题，那么也就不会发现，原来在 react 中用 svg 还有这么舒服的使用方式。
通过研究这个问题，至少是给我自己敲响了一些警钟。有时候，发现问题，官网文档、官方论坛往往能帮助你解决大部分问题，耐心的研究过后，如果还是不能解决，在寻求别的方案，才是上策。
react 中更好的 svg 使用方式相关推荐
- React中组件通信的几种方式
首次发表在个人博客 需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1. 父组件向子组件通信 React数据流动是单向的,父组件向子组件 ...
- VueJS 中更好的组件组合方式
原文地址:https://itnext.io/better-composition-in-vue-fd35b9fe9c79 原文作者:????Francesco Vitullo 译文出自:????掘金 ...
- React基础-React中发送Ajax请求以及Mock数据
前言 在 React 中, render 函数返回的结果,取决于组件的 props 和 state 我们都知道 UI 页面上的数据不是写死的,往往是从后端的数据接口中拿到的 然后将真实的数据填充到页面 ...
- React学习(九)-React中发送Ajax请求以及Mock数据
虽互不曾谋面,但希望能和你成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 撰文 | 川川 VX-ID:suibichuanji 点 ...
- [react] 在React中如何引入图片？哪种方式更好？
[react] 在React中如何引入图片?哪种方式更好? 第一种导入: import Img from "./images/1.png" 第二种直接获取图片: <img s ...
- php arcode svg,在react中使用svg的各种方法总结（附代码）
这篇文章给大家介绍的内容是关于在react中使用svg的各种方法总结(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 优势 SVG可被非常多的工具读取和修改(比如vscode ...
- 在react中使用svg的各种骚姿势
开头先抛个可供参考的项目ts-react-webpack4, 或脚手架steamer-react-ts 优势 SVG可被非常多的工具读取和修改(比如vscode) 不失真, 放大缩小图像都很清晰 SV ...
- react前端显示图片_在 React 中使用 SVG 图标组件
SVG 很酷,它们能放大放小. 那么 SVG 的优点是什么? SVG 或可缩放矢量图形是基于 XML 的格式图像格式,可以在保持图像质量的同时缩放到任何大小.因此,当你需要根据需要调整大小的图像时,S ...
- React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...
最新文章
- Flex学习笔记2010-08-16
- 浅入深出Vue：文章编辑
- MVC学习之简单的CRUD
- 003thinkphp 数据库查询及表关联
- 畅通工程（最小生成树模板）
- 计算机为什么要区别C盘，D盘，E盘等？
- 蓝桥杯 BASIC-20 基础练习 数的读法 问题
- 简单树匹配算法STM-实践篇
- ORACLE常用数值函数、转换函数、字符串函数【转】
- nyoj-----284坦克大战（带权值的图搜索）
- Mac 安装和配置 Maven
- mysql 多表查询 like_MYSQL多表联合查询的问题
- BZOJ3332:旧试题
- 新浪微博登陆页面html代码,新浪微博登陆页面 找到我的位置，选择编辑；
- Mybatis 特殊符号(大于，小于，不等于)及常用函数总结
- 基于NABCD评论作品，及改进建议
- js递归返回想要的值
- Centos 7--pdf2htmlEX安装和配置
- 《Python语言程序设计基础》嵩天著-第6章程序部分练习题答案
- 计算机专业英语 unit 5 fundamentals,计算机专业英语Unit 5