Vite plugin to transform SVGs into VanJS components
npm install vite-vanjs-svg






A Vite plugin that transforms SVG files into VanJS components using the DOMParser. One of the fastest UI frameworks deserves the fastest plugin, check out the React version to learn why is so fast.
``bash`
npm install -D vite-vanjs-svg
`bash`
pnpm add -D vite-vanjs-svg
`bash`
yarn add -D vite-vanjs-svg
`bash`
deno add npm:vite-vanjs-svg
`bash`
bun add vite-vanjs-svg
ts
// vite.config.ts
import { defineConfig } from 'vite'
import vanSVG from 'vite-vanjs-svg'export default defineConfig({
plugins: [
// other plugins
vanSVG({
// optional
})
]
})
`$3
While the default options work just fine, for your convenience the plugin allows you to set them all:`ts
interface VitePluginVanSvgOptions {
// esbuild transform options
esbuildOptions?: EsbuildTransformOPtions;
// filter options
include?: string | RegExp | (string | RegExp)[]
exclude?: string | RegExp | (string | RegExp)[]
}
`*
esbuildOptions: EsbuildTransformOptions esbuild will make sure the plugin will work seamless within the Vite ecosystem and provides some additional options;
// filter options
include: filter option to include one or more RegExp for file IDs; the default value is ["/.svg?van"];
* exclude: filter option to exclude one or more RegExp for file IDs.Note - If you modify or add more include filters and you're using Typescript, you should also define new global modules.
$3
To add typescript support, edit your src/vite-env.d.ts (or any global types you have set in your app) as follows:`ts
///
///
`
$3
`ts
import Icon from './icon.svg?van'const app = () => {
return div(
Icon({
width: 24,
height: 24,
class: 'my-icon',
style: 'fill: currentColor'
})
)
}
`
Notes:
* All properties present in the markup of your SVG files will be used as default values;
* The style attribute only supports string value;
* The plugin will also resolve SVG files from the /public folder or any valid viteConfig.publicDir` option.