Documentation on SVG variant needs Vite integration #33

Activity

1. ratijas commented on Dec 11, 2025

   

   ratijas

   on Dec 11, 2025

   Last edited by ratijas

   Author

   More actions

   Actually there is already a PR which describes a workaround for vite-svg-loader: jpkleemans/vite-svg-loader#120 and I think it should be included here too.

   By default, SVGO does not preserve the viewBox attribute for optimization reasons. This can cause issues when you need to resize your SVG with CSS. You can pass options to svgLoader() to disable the removal of the viewBox attribute.

   import vue from '@vitejs/plugin-vue'
   import { defineConfig } from 'vite'
   import svgLoader from 'vite-svg-loader'
   
   // https://vite.dev/config/
   export default defineConfig({
     plugins: [
       vue(),
       svgLoader({
         svgoConfig: {
           multipass: true,
           plugins: [
             {
               name: "preset-default",
               params: {
                 overrides: {
                   // @see https://github.com/svg/svgo/issues/1128
                   removeViewBox: false,
                 },
               },
             },
           ],
         },
       }),
     ],
   })