@intouchg/webpack-svgr-plugin
v0.1.1
Published
Webpack plugin to run SVGR in directory watcher mode
Downloads
3
Readme
@intouchg/webpack-svgr-plugin
Webpack plugin to run SVGR for the Intouch Design System. Watches the directory for changes to rerun as necessary.
Getting Started
Initialize and pass the plugin to Webpack. The plugin will read the .idsconfig.json
file in the project root. The plugin will use the "icons" property filepath.
// webpack.config.js
const IntouchSVGRPlugin = require('@intouchg/webpack-svgr-plugin')
// ...
webpackPlugins.push(new IntouchSVGRPlugin())
// .idsconfig.json
{
"icons": "icons"
}
React Children
Generated React icon components will render the children
prop as the first child inside the component, without replacing the other child elements. This is useful for passing elements such as title
for accessibility:
<IntouchLogoIcon
role="img"
width="200px"
fill="#b2d236"
>
<title>
Intouch Logo Icon
</title>
</IntouchLogoIcon>
Disabling Dynamic Properties
- DISABLING: Turn off "dynamic property" replacement by adding a
// svgr-disable-dynamic-props
comment block to the source SVG file:
<!-- // svgr-disable-dynamic-props -->
Dynamic Properties
"Dynamic properties" are enabled by default. When enabled, the fill
and stroke
properties from the source SVG file are replaced by React component props as follows:
If the SVG file has exactly 1 unique value each for the
fill
andstroke
properties, those values will be replaced withinherit
in the generated component outputIf the SVG file has exactly 2 or 3 unique values each for the
fill
andstroke
properties, those values will be replaced withfill1 || 'inherit'
,fill2 || 'inherit'
, etc. andstroke1 || 'inherit'
etc.
Note: Uniqueness of fill
and stroke
values are considered separately - so dynamic props will still be generated if your fill
values are red, green, and blue while your stroke
values are orange, purple, and pink (6 unique values in total).
Advanced
The plugin constructor accepts a filepath to the .idsconfig.json
file, an options object that's specific to this module, and a merge function to update any SVGR option:
new IntouchSVGRPlugin(
'../path/to/idsconfig',
{ scss: true }, // module options
(defaultSvgrOptions) => {
console.log(defaultSvgrOptions)
const newSvgrOptions = defaultSvgrOptions
// do stuff to manipulate newSvgrOptions here...
return newSvgrOptions
}
)