title: Loading SVGs with Webpack in react (@svgr/webpack)
body: <p><strong>Webpack config:</strong></p>
  <p>1-For <code>.svg</code> i use config:<code>{ test: /\.svg$/, use: ['@svgr/webpack'] }</code></p>
  <p>2-for <code>.scss</code> is use config:</p>
  <pre class="lang-js prettyprint-override"><code> {
                  test: /\.(sc|sa)ss$/,
                  exclude: /\.module\.(scss|sass)$/,
                  use: [{
                          loader: MiniCssExtractPlugin.loader,
                          options: {
                              hmr: isEnvDevelopment
                          }
                      },
                      {
                          loader: require.resolve('css-loader'),
                          options: {
                              modules: true,
                              localIdentName: '[name]__[local]--[hash:base64:5]',
                              importLoaders: 2
                          }
                      },
                      {
                          loader: require.resolve('postcss-loader'),
                          options: {
                              ident: 'postcss'
                          }
                      },
                      {
                          loader: require.resolve(&quot;sass-loader&quot;)
                      }
                  ]
              }
  </code></pre>
  <blockquote>
  <p>I used svgr in this way in my code:</p>
  </blockquote>
  <pre><code>import Ipad from '../../../assets/icons/music_ipod.svg'
  ...
  &lt;div&gt;messages
   &lt;Ipad /&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>Problem</strong></p>
  <p>the problem is when i start to the project i ran into below error:</p>
  <pre><code>\client\assets\icons\music_ipod.svg:1
  (function (exports, require, module, __filename, __dirname) { &lt;svg version=&quot;1.1&quot; id=&quot;Layer_1&quot; x=&quot;0px&quot; y=&quot;0px&quot;                                                              ^
  
  SyntaxError: Unexpected token &lt;
      at new Script (vm.js:79:7)    at createScript (vm.js:251:10)
      at Object.runInThisContext (vm.js:303:10)
      at Module._compile (internal/modules/cjs/loader.js:657:28)    at Module._extensions..js (internal/modules/cjs/loader.js:700:10)
      at Object.newLoader [as .js] (D:\WebSite_Learn\ReactJs\00--Studied--\Server Side Rendering with React and Redux\Project\MicroServices\Management\node_modules\pirates\lib\index.js:104:7)    at Module.load (internal/modules/cjs/loader.js:599:32)
  Side Rendering with React and Redux\Project\MicroServices\Management\client\components\layout\header/index.js:3:1)
      at Module._compile (internal/modules/cjs/loader.js:689:30)
      at Module._compile (D:\WebSite_Learn\ReactJs\00--Studied--\Server Side Rendering with React and Redux\Project\MicroServices\Management\node_moSide Rendering with React and Redux\dules\pirates\lib\index.js:99:24)                                        :3:1)
      at Module._extensions..js (internal/modules/cjs/loader.js:700:10)    
      at Object.newLoader [as .js] (D:\WebSite_Learn\ReactJs\00--Studied--\e Rendering with React and Redux\ProServer Side Rendering with React and Redux\Project\MicroServices\Management\node_modules\pirates\lib\index.js:104:7) 
  </code></pre>
  <p>i don't know  this problem occured to me.</p>