react-native-svg-icon
A simple, but flexible SVG icon component for React Native. Read the introductory blog post.
Installation
- Ensure sure you've installed
react-native-svg
npm i react-native-svg-icon --save
NOTICE
- 0.8.0 - only supports react-native-svg >= 5.3.0
- 0.7.0 - only supports react-native-svg >= 5.3.0
- 0.6.0 - only supports react-native-svg 4.5.0
- 0.5.0 - only supports react-native-svg 4.4.x
Setup
-
Create an object of your SVG icons
import React from 'react'; import { G, Path } from 'react-native-svg'; // Each nameValuePair can be: // * Name: <Svg />; or // * Name: { svg: <Svg />, viewBox: '0 0 50 50' } export default { SortArrows: <G><Path d="M0 45h90L45 0 0 45z"/><Path d="M0 55h90l-45 45L0 55z"/></G>, Tick: { svg: <Path d="M38.729 75.688a4.48 4.48 0 0 1-3.21-1.356L16.558 55.004c-1.774-1.807-1.774-4.736-.001-6.543a4.48 4.48 0 0 1 6.42 0l15.753 16.056 37.749-38.474a4.478 4.478 0 0 1 6.419 0c1.773 1.806 1.773 4.736 0 6.543L41.939 74.332a4.48 4.48 0 0 1-3.21 1.356z"/>, viewBox: '0 0 50 50', }, }
To conform to React/JSX standards, we need to convert SVG elements to begin with a capital letter, and convert hyphenated attributes to camelCase. For example.
<path>
becomes<Path>
andstop-color
becomesstopColor
. -
Create an
<Icon />
component as a bridge between react-native-svg-icon's<SvgIcon />
whichimport
s the above SVGsimport React from 'react'; import SvgIcon from 'react-native-svg-icon'; import svgs from './assets/svgs'; const Icon = (props) => <SvgIcon {...props} svgs={svgs} />; export default Icon;
Usage
Use your <Icon />
in your views.
import Icon from './components/Icon';
// Inside some view component
render() {
return (
<Fragment>
<Icon name="SortArrows" height="20" width="20" />
<Icon name="Tick" fill="#0f0" viewBox="0 0 200 200" />
<Icon name="Star" fill="transparent" stroke="#fff" strokeWidth="5" />
</Fragment>
);
}
Pro Tip: An SVG name suffixed with '.ios'
or '.android'
will automatically be rendered on the appropriate platform when passing the base name as the name
prop.
Props
Default
{
fill: '#000',
fillRule: 'evenodd',
height: '44',
width: '44',
viewBox: '0 0 100 100',
}
These can be overridden in your <Icon />
's defaultProps
or an a per instance basis.
Types
{
defaultViewBox: string,
fill: string.isRequired,
fillRule: string,
height: oneOfType([number, string]).isRequired,
name: string.isRequired,
stroke: string,
strokeWidth: oneOfType([number, string]),
style: oneOfType([array, object]),
svgs: object.isRequired,
width: oneOfType([number, string]).isRequired,
viewBox: string,
}
The specificity order for viewBox
is:
<Icon viewBox />
{ Name: { viewBox: '' } }
Icon.defaultProps.defaultViewBox
SvgIcon.defaultProps.viewBox
Copyright (c) 2018 Matt Stow
Licensed under the MIT license (see LICENSE for details)