{"id":22867,"library":"vite-plugin-svg-loader","title":"vite-plugin-svg-loader","description":"A Vite plugin for loading SVG files as objects or raw strings, enabling easy manipulation and embedding of SVGs in Vite-based projects. Current stable version is 1.0.0, released for Vite 2.x. It differs from alternatives like vite-svg-loader by providing query parameters (?row, ?url) for raw or URL import modes. The plugin exports SVG files as parsed JSON objects (tag, attrs, children) by default, which is useful for custom rendering. Requires Vite >2.0.0-0 as a peer dependency and ships TypeScript types.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/zch233/vite-plugin-svg-loader","tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-plugin-svg-loader","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-svg-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-svg-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: the plugin requires Vite >=2.0.0-0 to function as a Vite plugin.","package":"vite","optional":false}],"imports":[{"note":"ESM-only; CommonJS require will fail.","wrong":"const svgLoader = require('vite-plugin-svg-loader')","symbol":"default (svgLoader)","correct":"import svgLoader from 'vite-plugin-svg-loader'"},{"note":"Default import returns a parsed JSON object. The ! syntax is for webpack, not Vite.","wrong":"import svgData from 'vite-plugin-svg-loader!./icon.svg'","symbol":"SVG file (default import)","correct":"import svgData from './icon.svg'"},{"note":"The query parameter is ?raw (not ?row, despite README typo). From version 1.0.0, use ?raw.","wrong":"import rawSvg from './icon.svg?row'","symbol":"SVG file (?raw)","correct":"import rawSvg from './icon.svg?raw'"},{"note":"Returns the URL of the SVG file (default Vite asset behavior).","wrong":"import svgUrl from './icon.svg?file'","symbol":"SVG file (?url)","correct":"import svgUrl from './icon.svg?url'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport svgLoader from 'vite-plugin-svg-loader'\n\nexport default defineConfig({\n  plugins: [svgLoader()]\n})\n\n// component.ts\nimport icon from './icon.svg'\nconsole.log(icon)\n// { tag: 'svg', attrs: { viewBox: '...' }, children: [...] }\n\nimport raw from './icon.svg?raw'\nconsole.log(raw)\n// <svg ...>...</svg>\n\nimport url from './icon.svg?url'\nconsole.log(url)\n// /assets/icon.abc123.svg","lang":"typescript","description":"Shows basic setup in vite.config.ts and three import variants: default parsed object, raw string, and URL."},"warnings":[{"fix":"Use import rawSvg from './icon.svg?raw'","message":"The query parameter ?row from the README typo does not exist. Use ?raw instead.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"If using Vite 3+, consider vite-svg-loader or upgrade the plugin if a new version is released.","message":"Plugin is designed for Vite 2.x only. Using with Vite 3+ may cause undefined behavior.","severity":"breaking","affected_versions":"1.0.0"},{"fix":"Use the ?raw query to get the raw SVG string, or convert the object to string manually.","message":"Default import returns a parsed JSON object, not the SVG string. Developers expecting a string may get an object as a string representation [object Object].","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use import svgLoader from 'vite-plugin-svg-loader' (default import).","cause":"Using TypeScript with allowSyntheticDefaultImports: false or importing as { svgLoader }.","error":"Module '\"vite-plugin-svg-loader\"' has no exported member 'default'. Did you mean to use 'import svgLoader from \"vite-plugin-svg-loader\"' instead?"},{"fix":"Install the plugin: npm install --save-dev vite-plugin-svg-loader","cause":"Plugin not found because it's not installed or path is incorrect.","error":"Unknown plugin: 'vite-plugin-svg-loader'"},{"fix":"Change to ?raw.","cause":"Using the typo ?row from the README.","error":"Invalid query parameter '?row'. Only ?raw and ?url are supported."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}