https://github.com/thednp/vite-solid-svg
A Vite plugin that transforms SVG files into SolidJS Components
https://github.com/thednp/vite-solid-svg
solid-js svg vite
Last synced: 8 days ago
JSON representation
A Vite plugin that transforms SVG files into SolidJS Components
- Host: GitHub
- URL: https://github.com/thednp/vite-solid-svg
- Owner: thednp
- License: mit
- Created: 2025-02-23T09:29:21.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2026-03-26T18:05:06.000Z (15 days ago)
- Last Synced: 2026-03-27T06:44:31.517Z (15 days ago)
- Topics: solid-js, svg, vite
- Language: JavaScript
- Homepage:
- Size: 116 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# vite-solid-svg
[](https://coveralls.io/github/thednp/vite-solid-svg)
[](https://github.com/thednp/vite-solid-svg/actions/workflows/ci.yml)
[](https://www.npmjs.com/package/vite-solid-svg)
A Vite plugin that transforms SVG files into SolidJS components using the [DOMParser](https://github.com/thednp/domparser).
Why this one? It's 3x faster than any SVGO powered plugin. Check the [React](https://github.com/thednp/vite-react-svg) version for more info.
## Features
* 🚀 Fast transformation using [DOMParser](https://github.com/thednp/domparser)
* 🎯 TypeScript support
* 🔧 Configurable transformation options
* 🔥 Hot Module Replacement (HMR) support
* âš¡ Vitest powered tests
## Installation
```bash
npm install -D vite-solid-svg
```
```bash
pnpm add -D vite-solid-svg
```
```bash
yarn add -D vite-solid-svg
```
```bash
deno add npm:vite-solid-svg
```
```bash
bun install vite-solid-svg
```
## Usage
### Configuration
```ts
// 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:
```ts
interface VitePluginSolidSvgOptions {
oxcOptions?: OxcOptions,
esbuildOptions?: EsbuildTransformOptions,
include?: string | RegExp | (string | RegExp)[]
exclude?: string | RegExp | (string | RegExp)[]
}
```
* `oxcOptions`: additional oxc transformation options for `rolldown`;
* `esbuildOptions`: **deprecated** [EsbuildTransformOptions](https://esbuild.github.io/api/#transform) 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:
```ts
///
///
```
### In Your Code
```ts
import Icon from './icon.svg?solid'
const app = () => {
return
}
```
**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](https://github.com/pd4d10/vite-plugin-svgr) - For inspiration on the plugin architecture.
* [vite-react-svg](https://github.com/thednp/vite-react-svg) - For a React version.
## License
**vite-solid-svg** is released under [MIT License](LICENSE).