複数の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ではなくテキストとして読み込まれます。

私はこれを達成するための私の試みで、次のローダー使用しています：他のローダーを使用しても大丈夫でしょう

• https://github.com/webpack-contrib/svg-inline-loader
• https://github.com/jhamlet/svg-react-loader

Answer 1

を？ svgo-loaderとsvg-inline-loaderを組み合わせて、svgoが提供するすべてのオプションを使用できます。

ので、ちょうどnpm i -D svgo-loader

を行うと、これにあなたのWebPACKのコンフィグを変更する場合：

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