react-creat-app脚手架使用svg，使用绝对路径
不用 npm run eject 命令释放脚手架配置项的情况下，如何使用svg图和绝对路径呢？
稍提一句，我个人非常喜欢react-creat-app脚手架的一点在于她的简洁。废话少说，直接开干！
一、脚手架中使用svg：
首先当然需要我们创建好svg文件，给个例子：
<svg t="1587025130444" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2115" width="200" height="200"><path d="M129.307 348.729l-53.662 82.848 99.451 61.857c0 0 66.156 33.941 34.733 97.375-29.822 60.178-174.474 191.803-174.474 191.803l129.817 80.938c89.543-194.575 83.882-168.57 106.487-238.569 23.117-71.425 28.014-125.873-11.169-165.162-50.56-50.736-56.031-55.392-131.182-111.091z" p-id="2116"></path><path d="M462.95 243.771c20.519-35.675 30.433-58.906 30.433-58.906l-119.742-33.587c0 0-48.294 157.554-134.423 231.062 0 0 83.302 48.066 82.34 46.667 23.98-23.868 45.315-48.143 64.080-71.73 19.033-8.321 37.519-16.182 55.481-23.509-22.085 39.87-57.949 99.588-93.734 137.247l50.442 44.123c0 0 34.348-32.978 71.922-72.851h42.837v73.484h-167.073v58.804h167.072v140.988c-2.103-0.103-4.215-0.103-6.286-0.23-18.463-0.94-47.178-4.019-58.383-21.65-13.679-21.58-3.676-61.245-2.98-85.47h-115.070l-4.251 2.112c0 0-42.022 189.054 121.867 184.829 153.457 4.147 241.418-42.673 283.607-75.139l16.788 62.569 94.659-39.26-63.932-156.921-76.945 23.921 14.43 53.788c-19.833 14.655-42.633 25.699-66.961 33.814v-123.353h162.926v-58.804h-162.927v-73.484h163.585v-58.829h-290.679c20.914-25.418 37.406-48.775 41.756-63.687l-50.546-13.714c217.207-77.759 338.308-64.4 337.151 63.051v336.099c0 0 13.006 115.568-119.358 107.147l-71.402-15.37-16.794 67.889c0 0 308.77 88.214 333.999-149.21 25.229-237.371-6.295-388.614-6.295-388.614s-27.899-219.102-507.594-83.278z" p-id="2117"></path><path d="M200.289 317.787c47.173 0 85.441-37.962 85.441-84.806 0-46.791-38.269-84.807-85.441-84.807-47.177 0-85.434 38.016-85.434 84.807 0 46.845 38.256 84.806 85.434 84.806z" p-id="2118"></path></svg>
这是我在阿里图标库复制的一个svg，在文件夹中新建文件，将其命名为'pay.svg'（前面叫啥不重要，拓展名是 .svg 就行），将上述代码复制到文件中，一个svg图标就创建好了 。
接下来我们在组件中使用创建好的静态svg文件：
import React from 'react'; import ReactDOM from 'react-dom'; import styles from './tg.module.scss'; import { ReactComponent as Pay } from 'static/svgs/pay.svg'; function TgSub() { return ( <div> <Pay className={styles.icon} /> </div> ) } ReactDOM.render(<TgSub />, document.getElementById('root'));
如上代码，我们一如平常地从路径中引入静态文件，将其作为一个组件渲染到页面上即可。同时该svg组件允许自定义class类（这里我用了模块化样式和css预处理语言scss，当然二者不在此篇讨论范围，有兴趣的同学可以自行搜索）用以定义样式，来看看我给她定义了什么样式：
.icon{ height: 1em; width: 1em; fill: red; }
宽和高都是一个父节点字体大小，填充颜色为红色。这里需要注意的一个点：如果你发现fill属性不生效，那么打开你的svg文件，全局搜索fill，然后把搜到的结果都给删除掉，保存。ok！
（补充一句：此功能适用于 react-scripts@2.0.0 及更高版本。）
二、脚手架中使用绝对路径：
（这个方法没查到支持版本，但尽量把你们的react-scripts版本提高吧，不然可能不支持）
细心的同学可以发现我在上面引入svg的时候，使用的绝对路径的，那么是怎么做到的呢？
给大家看一下没用绝对路径引入资源之前我的引入：
import stores from '../../../../redux';
天哪，我可太烦了，而且这么做还会给我们cv工程师的工作带来新的难题：当我们需要在别的文件中复制该引入时，需要小心翼翼的检查这个相对引入是否正确。
解决办法：在项目的根目录下创建jsconfig.json文件，并添加以下代码（注意json文件格式）：
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
然后我们就可以愉快的使用绝对路径了：
import stores from 'redux';
吼吼吼，就在我以为万事大吉的时候，报错来了：webpack并不认为我的redux是src下的redux文件夹的意思，而是node_modules中的redux依赖！所以自然是无法找到stores的，真是太糟了。那么如何避免这种问题呢？
首字母大写惯例
当 Components 和 Utils 使用首字母大写，便可以很简单的区分哪些引用是npm packages, 哪些是你自己的源码，你也绝对不会和npm package 发生冲突。
（部分引用：https://blog.csdn.net/weixin_33804990/article/details/91368501）
