@fluentui/react-icons-svg-sprite-subsetting-webpack-plugin
v0.0.1
Published
Webpack plugin to subset or merge SVG sprite assets used by @fluentui/react-icons svg-sprite APIs.
Maintainers
chrisdholt
miroslavstastny
levithomason
uifabricteam
uifrnbot
layershifter
justslone
microsoft1es
sopranopillowKeywords
Readme
@fluentui/react-icons-svg-sprite-subsetting-webpack-plugin
⚠️ 0.x — this package is in early development and follows zero-based major semver. Breaking changes may occur in minor releases until 1.0.
Webpack plugin that optimizes the @fluentui/react-icons/svg-sprite/* entrypoints.
It supports two modes:
atomic(default): subsets each emitted sprite asset (atoms/svg-sprite/*.svg) to only the<symbol>IDs that are actually used.merged: emits a single merged sprite asset containing only the used<symbol>IDs, and rewrites internal sprite imports so all icons reference the merged file.
Install
npm i -D @fluentui/react-icons-svg-sprite-subsetting-webpack-pluginUsage
const {
default: FluentUIReactIconsSvgSpriteSubsettingPlugin,
} = require('@fluentui/react-icons-svg-sprite-subsetting-webpack-plugin');
module.exports = {
// ...
plugins: [
new FluentUIReactIconsSvgSpriteSubsettingPlugin({
mode: 'atomic', // or 'merged'
generateSpritesManifest: false,
injectSpritesInTemplates: false,
// mergedSpriteFilename: 'fluentui-react-icons.[contenthash].svg'
}),
],
};Options
You can pass a hash of configuration options to the plugin. Allowed values are as follows:
| Name | Type | Default | Description |
| :----------------------------- | :--------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| mode | {'atomic'\|'merged'} | 'atomic' | 'atomic' subsets each emitted sprite asset (atoms/svg-sprite/*.svg) to only used symbols. 'merged' emits a single merged sprite and rewrites sprite imports to it. |
| mergedSpriteFilename | {String} | undefined | The filename for the merged sprite asset. Only valid when mode is 'merged'. Supports [fullhash] and [contenthash] placeholders. |
| forceEnableUsedExports | {Boolean} | true | If true, automatically enables optimization.usedExports when it is not already set in your webpack config. |
| generateSpritesManifest | {Boolean} | false | If true, emits a sprites-manifest.json file containing entrypoint-level sprite usage information. |
| injectSpritesInTemplates | {Boolean\|Object} | false | Controls HTML injection of sprites via html-webpack-plugin. false disables injection. true is shorthand for { mode: 'inline' }. { mode: 'inline' } injects a merged inline <svg> at the start of <body>. { mode: 'reference' } injects <link rel="preload"> tags for used sprite assets. |
Notes
- For best results, run Webpack in production mode (or enable
optimization.usedExports) so the plugin can detect which icon exports are used. injectSpritesInTemplatesrequireshtml-webpack-pluginto be installed and configured in your Webpack build.
Contributing
For an in-depth look at the plugin's internal architecture, hook lifecycle, used-exports analysis, and runtime modules, see SPEC.md.