@svg-use/vite weekly downloads statistics

@svg-use/vite

A vite plugin, for using SVG images via use[href] references. A thin wrapper around @svg-use/rollup, augmented to work with Vite's dev server.

Quick start

First, install the plugin, and the default React wrapper:

Configure Vite

In your Vite config file (vite.config.js or equivalent):

Optional: Configure TypeScript

If you are using TypeScript, you can get types for the default config by adding the following in a .d.ts file in your project. For example, you can include this in src/client.d.ts, or any other applicable place.

Overriding default types

If you wish to override the default types, add a separate .d.ts file with your types. Then, reference that file in client.d.ts, prior to the built-in types

For example, suppose you have changed the signature of the factory function. Specify your own definitions, such as svg-use-overrides.d.ts:

In client.d.ts:

Use it in your components

You can also create your own SVG use[href] wrappers, using the other named exports. This is how the default Component factory works under the hood:

Worked example

Consult examples/vite-react for a worked example. You can use this as a playground for understanding the transformations, as well as the different moving parts, isolated from your own application's configuration.

Options

getSvgIdAttribute?

optional getSvgIdAttribute: (info: {filename?: string; existingId?: string;}) => string;

Specifies an id for the referenced , set as the id attribute on the root. An id is required in order for use[href] to work. A default is provided if this is not defined.

Options shared with @svg-use/core

• getThemeSubstitutions • componentFactory

Description from the npm listing.