jpkleemans/vite-svg-loader

Component import doesn't preserve `viewBox` attribute

ExistentialAlex opened this issue · 4 comments

ExistentialAlex commented

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 commented

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 commented

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

leoolivier commented

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

  • 👍8
  • 🎉1
  • ❤️2
ExistentialAlex commented

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

  • 😄1