#webpack-config-svg-icon

A config for Webpack for loading .svg icon files as React components.

Usage

Install:

yarn add webpack-config-svg-icon

Add to your webpack.config.babel.js:

import svgIcon from `webpack-config-svg-icon`;

svgIcon({/* options */})({
  /* existing webpack configuration */
})

Options

Name	Default	Description
iconPath	asset/icon	...
test	/\.icon\.svg$/	...
replaceColor	...	...
svgo	...	...

Features

SVGO

How to configure SVGO...

SVG -> React component

SVGs become React components...

Icon Context

How to dynamically add icons...

const context = require.context(process.env.ICON_PATH, false, /\.icon\.svg$/);

Replace fill and stroke with currentColor

...

svgIcon({replaceColor: /^#(000){1,2}$/})({
  /* existing webpack configuration */
})

Examples

React Icon component

Set up an icon component with display inline-block...

<Icon type='type'/>