Use SVG icons as react components.
var Icon = require('react-svg-icons');
<Icon name='icon-name'
width='256'
height='256'
color='#4cd695'/>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"
}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"
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.
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"
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".
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} />Of course you can pass any other standard property, such as style and event handlers.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent