1、下载相关loader, 插件

yarn add svg-url-loader postcss-inline-svg --dev

2、开始配置

在根目录创建 postcss.config.js 文件，并写入

module.exports = {
  plugins: {
    'postcss-inline-svg': {removeFill: false},
  },
}

修改next.config.js配置

webpack(config) {
          config.module.rules.push({
            test: /\.svg/,
            use: [
              {
                loader: "svg-url-loader",
                options: {
                  // make all svg images to work in IE
                  iesafe: true,
                },
              },
            ],
          })
          return config;
        },

在对应位置添加 svg-url-loader配置

其他

svg-url-loader 是位置支持webpack打包时候可以引入svg文件
postcss-inline-svg 插件是让postcss支持在开发过程中修改svg的属性。 removeFill: false 意思是不删除原有的svg属性中的fill，如果添加了此配置，带有fill的svg将不能二次配置颜色。

官方文档：传送门