Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–223 runs
build_error
glibcnode 18–223 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
vanSVG
✓ import vanSVG from 'vite-vanjs-svg'
✗ const vanSVG = require('vite-vanjs-svg')
ESM only; also works with default import for Vite config.
VitePluginVanSvgOptions
✓ import type { VitePluginVanSvgOptions } from 'vite-vanjs-svg'
✗ import { VitePluginVanSvgOptions } from 'vite-vanjs-svg'
Only exported as type; import with 'type' modifier to avoid runtime issues.
Icon default import
✓ import Icon from './icon.svg?van'
✗ import { Icon } from './icon.svg?van'
SVG with query ?van is imported as default export; named import will fail.
Configure the Vite plugin, add TypeScript declarations, and use an imported SVG as a VanJS component.
// vite.config.ts
import { defineConfig } from 'vite';
import vanSVG from 'vite-vanjs-svg';
export default defineConfig({
plugins: [
vanSVG({
// Optional: include: ['**/*.svg?van'],
// exclude: undefined,
// esbuildOptions: {},
// oxcOptions: {},
}),
],
});
// src/vite-env.d.ts
/// <reference types="vite/client" />
/// <reference types="vite-vanjs-svg" />
// App.tsx (example with VanJS)
import van from 'vanjs-core';
import Icon from './icon.svg?van';
const { div } = van.tags;
const App = () => {
return div(
Icon({
width: 24,
height: 24,
class: 'my-icon',
style: 'fill: currentColor'
})
);
};
document.body.appendChild(App());
Errors
Common errors & fixes
Cannot find module 'vite-vanjs-svg' or its corresponding type declarations.
Missing TypeScript type reference or package not installed as devDependency.
fixRun npm install -D vite-vanjs-svg and add /// <reference types="vite-vanjs-svg" /> to your vite-env.d.ts.
Uncaught (in promise) TypeError: van is not a function
Attempting to use SVG component outside of VanJS context or missing VanJS import.
fixEnsure vanjs-core or vanjs-ui is imported and van.tags is available.
[plugin:vite-vanjs-svg] The 'style' attribute only supports string value.
Passing an object (e.g., style={{ fill: 'red' }}) instead of a string.
fixChange style to a string like 'fill: red'.
Failed to load url ./icon.svg?van (doesn't exist)
SVG file path is incorrect or missing the ?van query.
fixVerify the SVG path and ensure the import ends with ?van.
Audit
Dependencies
No dependency data recorded yet.