vite-plugin-solid-svg weekly downloads statistics

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:

4 or above

Install

Setup

typescript

vite adds its own definition for "*.svg" and defines them as string. As far as I know this cannot be overridden. So we have two options: put our types before those of vite, or use imports with querystring.

If you are using defaultAsComponent which is the default, you need to put our types definition before vite in the tsconfig.

if you change to defaultAsComponent=false, you should use a different type definition that only identifies an svg import as a solid component when it matches the querystring. And in this case, put it before "vite/client"

Options

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:

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

Why

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

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

Description from the npm listing.