Upgrade webpack config to use @svgr/webpack loader

[tk-o]

Is this a bug report?

No

This issue is about to update svgr to its latest version as it allows to pass custom settings to svgo dependency (via svgorc file).

Did you try recovering your dependencies?

N/A

Which terms did you search for in User Guide?

svg, svgr, svgo

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 9.5.0 - ~/.nvm/versions/node/v9.5.0/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 5.6.0 - ~/.nvm/versions/node/v9.5.0/bin/npm
  Browsers:
    Chrome: 67.0.3396.99
    Edge: Not Found
    Firefox: 60.0.2
    Internet Explorer: Not Found
    Safari: 11.1.2
  npmPackages:
    @types/react: ^16.4.6 => 16.4.6 
    @types/react-dom: ^16.0.6 => 16.0.6 
    react: 16.4.1 => 16.4.1 
    react-dom: 16.4.1 => 16.4.1 
    react-scripts: 2.0.0-next.3e165448 => 2.0.0-next.3e165448 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to Reproduce

The svgo lib works under the hood of svgr/webpack that CRA is using for svg files imports. If you'd like to use i.e. SVG sprite file you may face some issues with svgo configuration.

To demonstrate the issue, please to the following steps:

1. Go to https://svgr.now.sh/ (online tool to test svgr)
2. Try to transform the following SVG:

<svg width="0" height="0" style="position:absolute">
  <symbol viewBox="0 0 24 24" id="add" 
    xmlns="http://www.w3.org/2000/svg">
    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
    <path d="M0 0h24v24H0z" fill="none"/>
  </symbol>
  <symbol viewBox="0 0 24 24" id="alarm" 
    xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9a9 9 0 0 0 0-18zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>
  </symbol>
  <symbol viewBox="0 0 24 24" id="arrow-down" 
    xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0V0z" fill="none"/>
    <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/>
  </symbol>
</svg>

You should see the result is empty and doesn't contain the input symbols:

3. Insert custom config to SVGO Config field:

{ "plugins": [{ "cleanupIDs": false }, { "removeUselessDefs": false }] }

You should see the result now contains all input symbols:

Expected Behavior

I'd like to be able to set the custom config that svgo would use to transform the SVG file.

Actual Behavior

I'm not able to set the custom config that svgo would use to transform the SVG file.

Reproducible Demo

Please go to Steps to Reproduce section.

Related

• Named asset import for SVG files #3907
• Override SVGO config using .svgrrc file gregberge/svgr#143

[kopax]

Hi, any update on this? I am experiencing an issue with the old version of @svgr/webpack