vite-plugin-solid-svg

Extend Vite with ability to use SVG files as Solid.js components.

Features:

• SVGO optimization
• Hot Module Replacement support
• Support for ?component-solid query string
• SSR

Currently supported Vite version:

2.4.4 or above

Install

1yarn add --dev vite-plugin-solid-svg
2
3pnpm i -D vite-plugin-solid-svg

Setup

1// vite.config.js
2import solidPlugin from 'vite-plugin-solid'
3import solidSvg from 'vite-plugin-solid-svg'
4import { defineConfig } from 'vite'
5
6export default defineConfig({
7  plugins: [solidPlugin(), solidSvg()],
8})

1// tsconfig.json
2"compilerOptions": {
3  // ...
4  "types": ["vite/client", "vite-plugin-solid-svg/types"],
5},

Options

1SolidSvg({
2  /**
3   * If true, will export as JSX component if `as` isn't specified.
4   *
5   * Otherwise will export as url, or as JSX component if '?as=component'
6   */
7  defaultAsComponent: true,
8
9  svgo: {
10    enabled: true, // optional, by default is true
11    svgoConfig: <svgo config>  // optional, if defined, the file svgo.config.js is not loaded.
12  }
13})

If you need to configure svgo, you can also create a config file svgo.config.js in the project's root, following the instructions at svgo docs. The svgo.svgoConfig has precedence over the file.

Usage

Import as a Solid.js component:

1import MyIcon from './my-icon.svg?component-solid';
2// or './my-icon.svg' if `defaultAsComponent` is `false`
3import MyIcon from './my-icon.svg';
4
5const App = () => {
6  return (
7    <div>
8        <h1> Title </h1>
9        <MyIcon />
10    </div>
11  );
12};
13
14export default App;

To import all svg inside a folder, use import.meta.glob('@/svgs/*.svg', { as: 'component-solid' }). See Vite docs for more details.

1const icons = import.meta.glob('./*.svg', { as: 'component' })
2
3/*
4  icons = {
5    icon1: () => import("./icon1.svg"),
6    icon2: () => import("./icon2.svg")
7  }
8*/
9
10const App = () => {
11  const Icon1 = lazy(() => iconsDic.icon1())
12  return (
13    <div>
14        <p>hello</p><Icon1 />
15    </div>
16  );
17};
18
19export default App;

Typescript considerations

vite add its own definition for "*.svg" and it define them as string. So far as I know this can't be overrided. To propertly have type inference, you must use the imports with querystring.

1import MyIcon from './my-icon.svg';     // <-- this will match vite module definition, and therefore identified as string
2import MyIcon from './my-icon.svg?component-solid';     // <-- this will match the definition in this plugin, and therefore identified as Solid Component

Why

In a Solidjs + vite project, you can easily add an svg image using:

1import iconUrl from './icon.svg'
2
3const App = () => {
4  return (
5    <div>
6      <img href={iconUrl}>
7    </div>
8  )
9}
10

However the fill color of the image cannot be overriden. Importing the svg as a component solves this and allows css styles to cascade into the svg content. Furthermore there may be situations where you'll need to ensure the image has been fully loaded, for example, before starting an animation. This module gives you a component that you can control when it's loaded.

Credits

This plugin is based on the work from the following projects:

• https://github.com/visualfanatic/vite-svg
• https://github.com/cobbcheng/vite-plugin-svgstring