{"id":22955,"library":"vite-vanjs-svg","title":"vite-vanjs-svg","description":"A Vite plugin that transforms SVG files into VanJS components using DOMParser. Version 0.0.14 is the latest stable release with active development. It supports TypeScript, HMR, configurable include/exclude filters, and uses oxc/esbuild for transformation. Compared to alternatives, it is specifically designed for VanJS, providing fast transformation and type safety without runtime overhead.","status":"active","version":"0.0.14","language":"javascript","source_language":"en","source_url":"https://github.com/thednp/vite-vanjs-svg","tags":["javascript","vite","plugin","svg","vanjs","typescript"],"install":[{"cmd":"npm install vite-vanjs-svg","lang":"bash","label":"npm"},{"cmd":"yarn add vite-vanjs-svg","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-vanjs-svg","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM only; also works with default import for Vite config.","wrong":"const vanSVG = require('vite-vanjs-svg')","symbol":"vanSVG","correct":"import vanSVG from 'vite-vanjs-svg'"},{"note":"Only exported as type; import with 'type' modifier to avoid runtime issues.","wrong":"import { VitePluginVanSvgOptions } from 'vite-vanjs-svg'","symbol":"VitePluginVanSvgOptions","correct":"import type { VitePluginVanSvgOptions } from 'vite-vanjs-svg'"},{"note":"SVG with query ?van is imported as default export; named import will fail.","wrong":"import { Icon } from './icon.svg?van'","symbol":"Icon default import","correct":"import Icon from './icon.svg?van'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport vanSVG from 'vite-vanjs-svg';\n\nexport default defineConfig({\n  plugins: [\n    vanSVG({\n      // Optional: include: ['**/*.svg?van'],\n      // exclude: undefined,\n      // esbuildOptions: {},\n      // oxcOptions: {},\n    }),\n  ],\n});\n\n// src/vite-env.d.ts\n/// <reference types=\"vite/client\" />\n/// <reference types=\"vite-vanjs-svg\" />\n\n// App.tsx (example with VanJS)\nimport van from 'vanjs-core';\nimport Icon from './icon.svg?van';\n\nconst { div } = van.tags;\n\nconst App = () => {\n  return div(\n    Icon({\n      width: 24,\n      height: 24,\n      class: 'my-icon',\n      style: 'fill: currentColor'\n    })\n  );\n};\n\ndocument.body.appendChild(App());","lang":"typescript","description":"Configure the Vite plugin, add TypeScript declarations, and use an imported SVG as a VanJS component."},"warnings":[{"fix":"Replace esbuildOptions with oxcOptions in plugin configuration.","message":"esbuildOptions is deprecated since version 0.0.14; use oxcOptions instead.","severity":"deprecated","affected_versions":">=0.0.14"},{"fix":"Ensure your project uses ESM-compatible bundler settings.","message":"Components are now ES modules with sourcemaps; if you rely on UMD or CommonJS output, this may break imports.","severity":"breaking","affected_versions":">=0.0.11"},{"fix":"Pass style as a string (e.g., 'fill: red').","message":"The style attribute only supports string values; object or array style values will not work.","severity":"gotcha","affected_versions":">=0.0.8"},{"fix":"Append ?van to SVG import paths or customize include option.","message":"Include filter defaults to ['**/*.svg?van']; if you omit ?van query, SVGs won't be transformed.","severity":"gotcha","affected_versions":">=0.0.8"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run npm install -D vite-vanjs-svg and add /// <reference types=\"vite-vanjs-svg\" /> to your vite-env.d.ts.","cause":"Missing TypeScript type reference or package not installed as devDependency.","error":"Cannot find module 'vite-vanjs-svg' or its corresponding type declarations."},{"fix":"Ensure vanjs-core or vanjs-ui is imported and van.tags is available.","cause":"Attempting to use SVG component outside of VanJS context or missing VanJS import.","error":"Uncaught (in promise) TypeError: van is not a function"},{"fix":"Change style to a string like 'fill: red'.","cause":"Passing an object (e.g., style={{ fill: 'red' }}) instead of a string.","error":"[plugin:vite-vanjs-svg] The 'style' attribute only supports string value."},{"fix":"Verify the SVG path and ensure the import ends with ?van.","cause":"SVG file path is incorrect or missing the ?van query.","error":"Failed to load url ./icon.svg?van (doesn't exist)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}