{"id":12383,"library":"vite-svg-loader","title":"Vite SVG Loader","description":"Vite SVG Loader is a Vite plugin designed to seamlessly load SVG files as Vue 3 components within a Vite project. It automatically optimizes SVGs using SVGO, which can be configured or entirely disabled on a per-file or global basis. The package is currently stable at version 5.1.1 and receives active maintenance, including compatibility updates for new Vite and Vue versions, as well as security patches for its dependencies. Its release cadence is moderate, with several updates per year, indicating ongoing development. Key differentiators include its flexible import options, allowing SVGs to be loaded as Vue components (default), raw strings (`?raw`), or URL data (`?url`), and the ability to skip SVGO for specific files (`?skipsvgo`). This provides developers with granular control over how SVG assets are handled in their Vue applications.","status":"active","version":"5.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/jpkleemans/vite-svg-loader","tags":["javascript","vite-plugin","vite","vue","svg","typescript"],"install":[{"cmd":"npm install vite-svg-loader","lang":"bash","label":"npm"},{"cmd":"yarn add vite-svg-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-svg-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for loading SVGs as Vue components.","package":"vue","optional":false}],"imports":[{"note":"The package primarily uses ESM for its main export since v5, favoring 'import' statements. While v5.1.0 reverted some internal ESM changes for compatibility, external plugin usage should still prefer ESM imports.","wrong":"const svgLoader = require('vite-svg-loader')","symbol":"svgLoader","correct":"import svgLoader from 'vite-svg-loader'"},{"note":"By default, importing an SVG file will treat it as a default export, representing a Vue component. Do not use named imports.","wrong":"import { MyIcon } from './assets/my-icon.svg'","symbol":"MyIcon","correct":"import MyIcon from './assets/my-icon.svg'"},{"note":"Use the '?url' suffix to explicitly import the SVG as a data URI or public URL, bypassing the component conversion process.","wrong":"import iconUrl from './assets/my-icon.svg'","symbol":"iconUrl","correct":"import iconUrl from './assets/my-icon.svg?url'"},{"note":"The '?raw' suffix imports the SVG file content as a plain string. It is a default export, not a named one.","wrong":"import { SvgRawString } from './assets/my-icon.svg?raw'","symbol":"SvgRawString","correct":"import SvgRawString from './assets/my-icon.svg?raw'"},{"note":"For TypeScript projects, add this line to your `vite-env.d.ts` file (or `tsconfig.json` `types` array) to ensure correct type inference for SVG imports.","wrong":null,"symbol":"Type Reference","correct":"/// <reference types=\"vite-svg-loader\" />"}],"quickstart":{"code":"import { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport svgLoader from 'vite-svg-loader';\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    svgLoader({\n      svgoConfig: { // Example: customize SVGO options\n        multipass: true,\n        plugins: ['preset-default', { name: 'removeViewBox', active: false }]\n      },\n      defaultImport: 'component' // Default, but explicitly set for clarity\n    })\n  ]\n});\n\n// src/App.vue\n// <template>\n//   <h1>My App</h1>\n//   <MyLogo aria-label=\"Company Logo\" />\n//   <img :src=\"imageUrl\" alt=\"SVG as Image\" />\n// </template>\n\n// <script setup>\n// import MyLogo from './assets/logo.svg'; // Imported as Vue component\n// import imageUrl from './assets/background.svg?url'; // Imported as URL\n// </script>","lang":"typescript","description":"Demonstrates how to configure `vite-svg-loader` in `vite.config.ts`, including SVGO customization, and how to import SVGs as both Vue components and URLs in a Vue SFC."},"warnings":[{"fix":"Upgrade `vite-svg-loader` to version 5.0.0 or later: `npm install vite-svg-loader@latest` or `yarn add vite-svg-loader@latest`.","message":"Version 5.0.0 introduced breaking changes for compatibility with Vite v5. Users upgrading their Vite projects should ensure they also upgrade `vite-svg-loader` to v5.0.0 or higher.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Review your `svgoConfig` options against SVGO v3 documentation if you encounter unexpected SVG output or build errors after upgrading to `vite-svg-loader@4.0.0`.","message":"Version 4.0.0 upgraded the underlying SVGO library to SVGO v3. This change might introduce new optimization behaviors or require adjustments to existing `svgoConfig` options.","severity":"breaking","affected_versions":">=4.0.0 <5.0.0"},{"fix":"Ensure you are using `vite-svg-loader` version 5.1.0 or newer to avoid potential CommonJS compatibility issues related to package type changes. Prefer ESM `import` statements.","message":"Version 5.0.1 changed the package type to 'module', which could have caused issues for CommonJS environments. While version 5.1.0 reverted some internal ESM import changes to improve compatibility, users on 5.0.1 might have encountered CJS import errors.","severity":"breaking","affected_versions":"5.0.1"},{"fix":"Immediately upgrade `vite-svg-loader` to version 5.1.1 or higher to patch the high-severity vulnerability: `npm update vite-svg-loader` or `yarn upgrade vite-svg-loader`.","message":"A high-severity vulnerability (GHSA-xpqw-6gx7-v673 / CVE-2026-29074) in the `svgo` dependency was fixed in version 5.1.1. This vulnerability could potentially affect the security of your build process if unpatched.","severity":"breaking","affected_versions":"<5.1.1"},{"fix":"Add `/// <reference types=\"vite-svg-loader\" />` to your `vite-env.d.ts` file or other global declaration file.","message":"TypeScript users must include a type reference for SVG imports to be correctly recognized by the TypeScript compiler. Without it, you may get 'Cannot find module' errors for SVG files.","severity":"gotcha","affected_versions":">=3.5.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add `/// <reference types=\"vite-svg-loader\" />` to your `vite-env.d.ts` file.","cause":"The TypeScript compiler does not recognize `.svg` files as modules that can be imported, usually due to a missing type declaration for `vite-svg-loader`.","error":"Cannot find module './my-icon.svg' or its corresponding type declarations."},{"fix":"Run `npm install --save-dev vite-svg-loader` (or `yarn add -D vite-svg-loader`) and ensure `svgLoader()` is included in `plugins: []` in your `vite.config.js/ts`.","cause":"The plugin is not installed or not correctly added to the `plugins` array in `vite.config.js/ts`.","error":"Error: [vite] The plugin 'vite-svg-loader' was not found. Have you installed it?"},{"fix":"Review your `svgoConfig` in `vite.config.js/ts` and ensure it adheres to the SVGO v3 configuration format. You can also temporarily set `svgo: false` to isolate if the problem is with SVGO configuration.","cause":"An issue occurred during SVGO processing, potentially due to invalid `svgoConfig` options, especially after upgrading to SVGO v3 in `vite-svg-loader` v4.0.0.","error":"[plugin:vite-svg-loader] [SVGO] Error: Error: No config file found in..."}],"ecosystem":"npm"}