Tools and bundler plugins for loading SVG images via use[href], for use in components.
npm install @svg-use/webpack@svg-use/webpackA webpack loader, for using SVG images via use[href] references. A thin
wrapper around @svg-use/core.
First, install the plugin, and the default React wrapper:
``shell`
pnpm add --save-dev @svg-use/webpack
pnpm add @svg-use/react
In your webpack config file (typically webpack.config.js):
`tsarrow.svg?svgUse
{
module: {
rules: [
{
// Match assets such as , making them compatible withsvg > use[href]
// . Emit a transformed SVG asset, and return a JSicon.svg?svgUse&noTheme
// module with all the relevant information.
test: /\.svg$/i,
resourceQuery: /svgUse/i,
oneOf: [
{
// Assets without a theme, such as country flags. Referenced as
// `
//
// Note: Instead of this rule, you could decide to load these SVGs
// as 'asset/resource', in order to use their URL string in img[src]
test: /\.svg$/i,
resourceQuery: /noTheme/i,
type: 'javascript/auto',
use: [
{
loader: '@svg-use/webpack',
options: {
getThemeSubstitutions: null, // no theme for these ones
// Customise to your heart's content
svgAssetFilename: 'svgAssets/[name]-[contenthash].[ext]',
},
},
],
},
{
type: 'javascript/auto',
use: [
{
loader: '@svg-use/webpack',
options: {
// Customise to your heart's content
svgAssetFilename: 'svgAssets/[name]-[contenthash].[ext]',
},
},
],
},
],
},
];
}
}
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 includesrc/client.d.ts
this in , or any other applicable place.
`ts`
///
#### Overriding default types
If you wish to override the default types, add a separate .d.ts file with yourclient.d.ts
types. Then, reference that file in , 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:
`ts`
declare module '*.svg' {
export const Component: ReturnType<
typeof import('./path/to/my/factory').myFactoryName
>;
}
In client.d.ts:
`ts`
///
///
`tsx
import { Component as Arrow } from './arrow.svg?svgUse';
import { Component as ArrowNoTheme } from './arrow.svg?svgUse&noTheme';
const MyComponent = () => (
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:`tsx
import { url, id } from './arrow.svg?svgUse';
import { createThemedExternalSvg } from '@svg-use/react';export const Arrow = createThemedExternalSvg({ url, id });
`Worked example
Consult examples/webpack-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
$3
>
optional svgAssetFilename: stringDefault:
[name]-[contenthash].[ext]The output filename for the transformed SVG asset. Often useful if you are
placing your assets under a specific path, for example to facilitate caching.
Uses the same syntax/replacements as
webpack's native
assetModuleFilename.$3
>
optional getSvgIdAttribute:
> (info: {filename?: string; existingId?: string;}) => string;Specifies an id for the referenced