vite-solid-svg

A Vite plugin that transforms SVG files into SolidJS components using the DOMParser. Why this one? It's 3x faster than any SVGO powered plugin. Check the React version for more info.

Features

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

Installation

npm install -D vite-solid-svg

pnpm add -D vite-solid-svg

yarn add -D vite-solid-svg

deno add npm:vite-solid-svg

bun install vite-solid-svg

Usage

Configuration

// vite.config.ts
import { defineConfig } from 'vite'
import solidSVG from 'vite-solid-svg'

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

Options

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

interface VitePluginSolidSvgOptions {
  // 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;
• include: filter option to include one or more RegExp for file IDs; the default value is ["**/*.svg?solid"];
• 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-solid-svg" />

In Your Code

import Icon from './icon.svg?solid'

const app = () => {
  return <div>
    <Icon
      class='my-icon'
      width={24} height={24}
      style={{ fill: "currentColor" }}
    />
  </div>
}

Notes:

• All properties present in the markup of your SVG files will be used as default values;
• The viewBox and xmlns properties are somewhat required in order for the SVG to be rendered properly;
• The plugin will also resolve SVG files from the /public folder or any valid viteConfig.publicDir option.

Acknowledgments

• vite-plugin-svgr - For inspiration on the plugin architecture.
• vite-react-svg - For a React version.

License

vite-solid-svg is released under MIT License.