Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

viewBox not rendered by default into SVG past v3.0.0

See original GitHub issue

Hi,

Not sure if this is an issue with this package, but recently upgraded from react-svg-loader@3.0.0 to react-svg-loader@3.0.3 and noticed that one of our SVGs now doesn’t get rendered properly in the page.

SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="31" height="56" viewBox="0 0 31 56">
    <path fill="#000" fill-rule="nonzero" d="M1.08 54.937a1.918 1.918 0 0 1 0-2.748l24.686-24.162L1.08 3.817a1.918 1.918 0 0 1 0-2.748 2.01 2.01 0 0 1 2.802 0L29.92 26.605c.387.38.58.853.58 1.374 0 .474-.193.995-.58 1.374L3.882 54.89a1.968 1.968 0 0 1-2.802.047z"/>
</svg>

Webpack config:

{
  test: /\.svg$/,
  use: [
    "babel-loader",
    {
      loader: "react-svg-loader",
      options: {
        jsx: true
      }
    }
  ]
}

Usage:

import Chevron from "./images/chevron-right.svg";

...

<Chevron
  ...
  className={"sort-container__option__chevron-right"}
/>

CSS:

.sort-container__option__chevron-right {
  stroke: grey;
  height: 20px;
  width: 20px;
}

Expected output (@3.0.0)

<svg xmlns="http://www.w3.org/2000/svg" width="31" height="56" viewBox="0 0 31 56" class="sort-container__option__chevron-right"><path d="M1.08 54.937a1.918 1.918 0 0 1 0-2.748l24.686-24.162L1.08 3.817a1.918 1.918 0 0 1 0-2.748 2.01 2.01 0 0 1 2.802 0L29.92 26.605c.387.38.58.853.58 1.374 0 .474-.193.995-.58 1.374L3.882 54.89a1.968 1.968 0 0 1-2.802.047z"></path></svg>

Actual output (@3.0.3)

<svg xmlns="http://www.w3.org/2000/svg" width="31" height="56" class="sort-container__option__chevron-right"><path d="M1.08 54.937a1.918 1.918 0 0 1 0-2.748l24.686-24.162L1.08 3.817a1.918 1.918 0 0 1 0-2.748 2.01 2.01 0 0 1 2.802 0L29.92 26.605c.387.38.58.853.58 1.374 0 .474-.193.995-.58 1.374L3.882 54.89a1.968 1.968 0 0 1-2.802.047z"></path></svg>

Notice viewBox="0 0 31 56" is missing from the output after 3.0.0

Visual differences (Top is with viewBox bottom is without):

Issue Analytics

State:
Created 4 years ago
Comments:7

Top GitHub Comments

13reactions

choffmeistercommented, Jul 5, 2019

@freshollie Seems to be a change in default options for SVGO, not a bug. Try this webpack configuration:

      {
        test: /\.svg$/,
        use: [
          { loader: 'babel-loader' },
          {
            loader: 'react-svg-loader',
            options: {
              jsx: true,
              svgo: {
                plugins: [
                  {
                    removeViewBox: false,
                  },
                ],
              }
            },
          },
        ],
      },

1reaction

aaronjensencommented, Nov 14, 2019

This bit me too, a changelog update would have been helpful.