使用 svg-sprite-loader、svgo-loader 优化 svg symbols

最近重新学习了一遍 React 基础，新起了个小 Demo 实践一下，项目中用到的静态资源也比较少，图标当时使用的是 svg symbols 的方式引入（字体图标三种格式区别），但是在开发的过程中遇到几个问题：

① 下载的 svg 可能有自带的 fill 属性，添加 color 样式不生效。
② 封装 Icon 组件时，每用到一个 svg 图标都需要引入一下，显得有点不太聪明。

为解决上述两个问题，上网找了一下解决方案，在这里总结一下，每天成长一点点。

1、svg 的基本使用

SVG ：可缩放矢量图形（Scalable Vector Graphics），使用 XML 格式定义图像。使用起来其实也没什么不一样的地方，可以直接将下载好的 svg 图片导入，然后像这样使用：

import apple from "../assets/icons/apple.svg"  // 得到一个计算之后的路径const Icon = (props) => {return (<img src={apple} />);
};export default Icon;

这样使用可能会导致上面所说的问题 ①，虽然可以手动把 svg 图片中的 fill 属性给删掉，但是如果 svg 很多的话手动处理起来就会很耗时，我们可以通过更聪明的办法：自定义 loader 来解决这个问题，如下。

2、svg-sprite-loader

svg-sprite-loader 的官方解释是：一个用于创建 svg 雪碧图的 Webpack 加载器。这个加载器现在已经被 JetBrains 公司收录和维护了。通俗的讲：svg-sprite-loader 会把你引入的 svg 塞到一个个 symbol 中，合成一个大的 svg，最后将这个大的 svg 放入 body 中。symbol 的 id 如果不特别指定，就是你的文件名。在页面上形成这样的元素：

<body><svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"style="position: absolute; width: 0; height: 0" aria-hidden="true" id="__SVG_SPRITE_NODE__"><symbol xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"class="icon" viewBox="0 0 1024 1024"id="label"><defs><style type="text/css"></style></defs><!-- path ... （path 中可能含有 fill 属性，也就是 svg 的自带颜色） --></symbol><!-- other symbols--></svg>
</body>

通常情况下，我们用脚手架初始化的项目是没有办法自定义 loader 的，那怎么办呢？我们就需要执行如下命令手动的项目的 webpack.config.js 文件搞出来（这个操作是不可逆的）。

npm run eject
// or
yarn eject

执行会出现提示：Are you sure you want to eject? This action is permanent.(y/N)。直接就可以了。配置完成之后我们需要对 svg loader 进行相关配置，在 webpack.config.js 的 module.rules 的 oneOf 中添加：

// 配置之前需要安装该 loader
// npm install --dev svg-sprite-loader
// yarn add --dev svg-sprite-loader{test: /\.svg$/,use: [{ loader: 'svg-sprite-loader', options: {} }]
}

完成上述配置之后，我们就可以通过指定 id 的方式使用 use 的方式使用 svg 了，如下：

// 下面这种方式有坑，最终会被 Tree Shaking
// import apple from "../assets/icons/apple.svg"  // 得到一个计算之后的路径
require('../assets/icons/apple.svg')const Icon = (props) => {return (<svg fill="red"><use xlink:href="#apple"/></svg>);
};export default Icon;

而且经过 svg-sprite-loader 加载之后，不仅可以通过指定 id 的方式引入 icon，而且相比图片引入的方式，最大的优点就在于可以通过给 svg 标签添加 fill 属性来调整 icon 的颜色。

除此之外，还可以通过给 svg 添加 class 来调整 icon 的样式，虽然说图片引入的方式也能做到，但是如果图片指定宽高与原图的宽高不成比例，就会导致图片的失真，而 svg 不会。即使随意调整 svg 的宽高样式，它也是按照原尺寸进行缩放，达到高保真的效果。