SVG引入指南

本文是我自己在引入SVG中踩过各种坑后写的一篇总结，如果有人遇到了相同的坑在网上寻求帮助看到了这篇文章的话希望能帮到你们。

1、添加SVG文件

这一步总结来说就是有手就行，将所有SVG文件都放在一个文件夹下，我个人喜欢将SVG放在下面的目录下：

[图片上传失败...(image-c4b8c-1647445610610)]

文件的名字很重要之后会用到，不要使用中文，名字起的尽量一看到就知道它是干嘛的。

2、下载依赖

我使用的是svg-sprite-loader,它可以将svg放到symbol中，再使用 use 来选择想要的icon。

下面是svg-sprite-loader的GitHub主页

https://github.com/JetBrains/svg-sprite-loadergithub.com/JetBrains/svg-sprite-loader

安装指令：

npm install svg-sprite-loader -D
yarn add --dev svg-sprite-loader

改变icon的颜色

有些svg文件里面自带 fill（控制icon颜色的属性），也就是它本身就带有颜色，有些不带fill属性。我们为了能够自己控制它的颜色，我使用到了svgo-loader。svgo-loader的options中有很多属性，我们为了删除icon自带颜色以自己控制使用的是removeAttrs。

svgo-loader的GitHub地址:

https://github.com/stefanprobst/svgo-loadergithub.com/stefanprobst/svgo-loader

安装指令:

npm install svgo-loader -D
yarn add --dev svgo-loader

3、webpack配置

这一步可以算是比较麻烦的一步,如果自己一个人搞,又不会配置webpack可能要浪费好多时间。

第一步：导出webpack配置文件，平时为了不让你乱改webpack配置，webpack配置文件是不可见的，我们需要使用：

yarn eject

指令导出webpack文件。

在使用 yarn eject之前要确保所有文件都已经提交到git仓库：

git init
git add .
git commit -m "commit update"

第二步：找到添加svg-sprite-loader和svgo-loader配置的地方

在使用yarn eject指令后我们的项目中会多出一个config目录，我们在config目录中找到webpack.config.js的文件，如下图所示

image

然后我们在该文件的第300行到第400行左右的地方找到module.rules.oneOf

image

在oneOf数组中加入如下的代码：

           {
              test: /\.svg$/,
              use: [
                { loader: 'svg-sprite-loader', options: {} },
                { loader: 'svgo-loader',
                  options: {
                    plugins: [
                      {removeAttrs: {attrs: 'fill'}}
                    ]
                  }
                }
              ]
            }

图示：

image

配置完webpack后记得重启项目。

4、封装icon组件

配置完webpack后我们已经可以使用svg文件了，但是我们每次使用时都要写如下代码，显得非常繁琐，于是我们考虑封装一个icon组件。

<svg>
    <use xlinkHref="#name"/>}
</svg>

封装过程就不写了，本文只写如何引入svg,大致思路就是让外部传一个name，根据传过来的name来确定是哪个组件。

5、引入样式

在全局样式文件中引入全局的icon样式:

.icon {
  css
}

然后在每个页面中可以写局部的样式。改变icon的颜色使用：

fill: color

6、引入SVG文件

如果一个一个引入svg文件，太过麻烦，代码冗余。所以要想办法一次引入所有svg文件，我找到的方法是用下面这段代码引入：

let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
try {importAll(require.context('icons', true, /\.svg$/));} catch (error) {console.log(error);}

要点：

1. __WebpackModuleApi.RequireContext 可能会报错，要装一个@types/webpack-env
2. require.context()中的'icon'换成svg所在的路径。

安装指令：

npm install @types/webpack-env -D
yarn add --dev @types/webpack-env