vite-solid-svg

A Vite plugin that transforms SVG files into SolidJS components using the DOMParser. Why this one? Because it's the fastest.

Features

• 🚀 Fast transformation using DOMParser
• 🎯 TypeScript support
• 🔧 Configurable transformation options
• 💪 Full props support (className, style, events, etc.)
• 🔥 Hot Module Replacement (HMR) support
• ⚡ Vitest powered tests

Installation

1npm install -D vite-solid-svg

1pnpm add -D vite-solid-svg

1yarn add -D vite-solid-svg

1deno add npm:vite-solid-svg

1bun install vite-solid-svg

Usage

Configuration

1// vite.config.ts
2import { defineConfig } from 'vite'
3import solidSVG from 'vite-solid-svg'
4
5export default defineConfig({
6  plugins: [
7    // other plugins
8    solidSVG({
9        // optional
10    })
11  ]
12})

Options

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

1interface VitePluginSolidSvgOptions {
2  // esbuild transform options
3  esbuildOptions?: EsbuildTransformOPtions;
4  // filter options
5  include?: string | RegExp | (string | RegExp)[]
6  exclude?: string | RegExp | (string | RegExp)[]
7}

• 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:

1/// <reference types="vite/client" />
2/// <reference types="vite-solid-svg" />

In Your Code

1import Icon from './icon.svg?solid'
2
3const app = () => {
4  return <div>
5    <Icon
6      class='my-icon'
7      width={24} height={24}
8      style={{ fill: "currentColor" }}
9    />
10  </div>
11}

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.

Contributing

• Fork it!
• Create your feature branch: git checkout -b my-new-feature
• Commit your changes: git commit -am 'Add some feature'
• Push to the branch: git push origin 'my-new-feature'
• Submit a pull request

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.