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

npm install -D vite-vanjs-svg

pnpm add -D vite-vanjs-svg

yarn add -D vite-vanjs-svg

deno add npm:vite-vanjs-svg

bun install vite-vanjs-svg

Usage

Configuration

// vite.config.ts
import { defineConfig } from 'vite'
import vanSVG from 'vite-vanjs-svg'

export default defineConfig({
  plugins: [
    // other plugins
    vanSVG({
        // optional
    })
  ]
})

Options

While the default options work just fine, for your convenience the plugin allows you to set them all:

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.

Typescript

To add typescript support, edit your src/vite-env.d.ts (or any global types you have set in your app) as follows:

/// <reference types="vite/client" />
/// <reference types="vite-vanjs-svg" />

In Your Code

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.