boopathi/react-svg-loader

viewBox not rendered by default into SVG past v3.0.0

freshollie opened this issue · 7 comments

freshollie commented

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):
image

choffmeister commented

@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,
                  },
                ],
              }
            },
          },
        ],
      },
  • 👍10
  • 🎉4
freshollie commented

Cool, not a bug, but not documented in change logs. I wouldn't expect a patch release to require a config change. Thanks!

  • 👍1
stale commented

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

aaronjensen commented

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

  • 👍1
antitoxic commented

+1 this is not in the readme. I would not assume I need svgo-specific knowledge to use the loader.

ashconnell commented

Without the viewBox attribute you literally can't change the size of your icons (as documented in the readme) via width/height attributes.