使用多个 Webpack 加载器将 SVG 转换为 React 组件

Question

我正在尝试将多个 Webpack 加载器组合在一起以加载我的 SVG 资产，将它们转换为内联使用，最后将结果转换为可在应用程序中使用的实际 React 组件。

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: path.resolve(__dirname, 'src'),
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['env', {
                browsers: supportedBrowsers,
                modules: false
              }]
            ]
          }
        }
      },
      {
        test: /\.svg$/,
        include: path.resolve(__dirname, 'src'),
        use: [
          {
            loader: 'svg-inline-loader',
            options: {
              removeTags: true
            }
          },
          {
            loader: 'svg-react-loader'
          }
        ]
      }
    ]
  }
}

如果 svg-react-loader 单独使用，加载器会按预期工作，但是很多 SVG 资产都有不需要的元素和属性，我想使用 svg-inline-loader.

当配置如上使用时，结果将作为文本而不是可执行文件加载 JavaScript。

我正在使用以下加载程序来尝试完成此操作：

Answer 1

用其他loader可以吗？您可以组合 svgo-loader with svg-inline-loader and use all the possible options provided by svgo.

如果是这样就做 npm i -D svgo-loader

并将您的 webpack 配置更改为：

{
  test: /\.svg$/,
  use: [
    'svg-react-loader',
    {
      loader: 'svgo-loader',
      options: {
        plugins: [
          {cleanupAttrs: true}
        ]
      }
    }
  ],
  exclude: /node_modules/
}

使用多个 Webpack 加载器将 SVG 转换为 React 组件

Using multiple Webpack loaders to transform SVGs into React components

svg

reactjs

webpack

webpack-2