React SVG Icons
Use SVG icons as react components.
Usage
var Icon = require('react-svg-icons');
<Icon name='icon-name'
width='256'
height='256'
color='#4cd695'/>
Configration
You need to configure an asset directory from which all SVG icons will be read. These will be inlined when you browserify your bundle. In your package.json add:
"react-svg-icons": {
"assetPath": "path/to/dir/containing/svgs"
}
Options
name
Specifies which icon to use. Icon names are file paths relative to your assetPath, minus the .svg extension. If you have directory like:
my-icon.svg
nested/some other icon.svg
Your icons will be available under these names:
name="my-icon"
name="nested/some other icon"
width and height
Sets the width and height. By default the aspect ration will be preserved. You can use preserveAspectRatio
to override this behavior.
These properties have no effect when there is no viewBox set on the SVG element.
viewBox
Usually you don't have to set this property, unless the original SVG doesn't define a viewBox. In that case width and height won't work. You will have to set a viewBox like "0 0 originalWidth originalHeight"
preserveAspectRatio
Set this property to "none"
if you want to squash the icon. You can set it to any other valid SVG attribute. Default is "xMidYMid meet"
.
color
Overrides fill and stroke styles with the provided color unless it is set to none
in the original SVG. If you need a more fine grained control, you can pass a function for this property, which returns a color:
function chooseColor(type, original) {
var colorString = '#000';
// type is 'fill' or 'stroke'
if (type === 'fill') {
...
}
// the original color in the svg
if (original === '#fff') {
...
}
return colorString;
}
<Icon name='icon-name' color={chooseColor} />
other options
Of course you can pass any other standard property, such as style
and event handlers.