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.

Features

* 🚀 Fast transformation using DOMParser
* 🎯 TypeScript support
* 🔧 Configurable transformation options
* 🔥 Hot Module Replacement (HMR) support
* ⚡ Vitest powered tests

Installation

``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
`




Usage

$3

`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.

Acknowledgments

* vanjs-converter - For the first prototype version of the plugin;
* vite-plugin-svgr - For inspiration on the plugin architecture;
* vite-solid-svg - For the SolidJS version and types for this version;
* vite-react-svg - For the React version.

License

vite-vanjs-svg is released under MIT License.