vite-plugin-react-rich-svg weekly downloads statistics

Vite Plugin: React Rich SVG

Seamless SVG loader with versatile import options (see demo page)

Description

A vite plugin that handles SVG loading with zero-config effort.

It handles loading raw (html string), inline data uri (data:svg+xml,...) and SVGR Component (with easily usable SVGO options) imports easily!

This plugin is heavily inspired by vite-svg-loader, which is an SVG loading Vite plugin for Vue. It is one of my favourites. Thanks to everyone contributed to it! 💜

How to use?

1. Use your favorite package manager to install as dependency

2. Include it in your vite.config.ts

3. If you're using Typescript, you might want to include the typings under vite-env.d.ts:

4. Start importing your SVGs! Happy coding!

Plugin Configurations

include option

Acts as a whitelist predicate for the files you want to be processed.

exclude option

Acts as a blacklist predicate for the files you want to be ignored.

componentLoaderOptions option

• svgrConfig = Options used while running SVGR on the original svg code/asset (See SVGR Options) • oxcConfig = Options passed to Vite's Oxc transform when generating JavaScript from the SVGR output (See Vite's transformWithOxc API)

rawLoaderOptions option

• svgoEnabled = Enables SVGO optimizations • svgoConfig = Options used while running SVGO optimizations on the original SVG asset (See SVGO Options)

base64LoaderOptions option

• svgoEnabled = Enables SVGO optimizations • svgoConfig = Options used while running SVGO optimizations on the original SVG asset (See SVGO Options)

urlLoaderOptions option

• svgoEnabled = Enables SVGO optimizations • svgoConfig = Options used while running SVGO optimizations on the original SVG asset (See SVGO Options)

SVGO, Prettier & Other SVGR Plugins

SVGO and Prettier are supported out of the box. Just mark them in the svgrConfig and they'll start working.

You can also include your own SVGR plugins as you desire!

License

© 2024 Taha Anılcan Metinyurt (iGoodie)

For any part of this work for which the license is applicable, this work is licensed under the Attribution-ShareAlike 4.0 International license. (See LICENSE).

Description from the npm listing.