Component import doesn't preserve `viewBox` attribute

[ExistentialAlex]

I have found through the use of this that using a component import doesn't preserve the viewBox attribute defined on the SVG.

The output in the DOM ends up being correct and has my custom classes on top, but the viewBox is not there.

I can set the viewBox attribute manually in the same way as the class attribute but it would be better to preserve the attribute instead as it would provide more flexibility with the components.

[blesstosam]

i found when viewBox width & height is same as width & height attribute , it will disppear! like below:

<svg viewBox="0 0 32 32" width="32" height="32">

[Pryscy]

I have the same problem, viewbox attribute disappears after the import.

[leoolivier]

This problem comes from the default configuration of svgo, which vite-svg-loader depends on. You can pass options to svgLoader() to disable the viewBox attribute removal.

export default defineConfig({
  plugins: [
    vue(),
    svgLoader({
      svgoConfig: {
        multipass: true,
        plugins: [
          {
            name: 'preset-default',
            params: {
              overrides: {
                // viewBox is required to resize SVGs with CSS.
                // @see https://github.com/svg/svgo/issues/1128
                removeViewBox: false,
              },
            },
          },
        ],
      },
    }),
  ],
});

svgo issues #1128

[ExistentialAlex]

Amazing! Thank you so much. I should have looked at the config first. 😄