Skip to content
master
Go to file
Code

Latest commit

Matt Stow
ab4b593

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

react-native-svg-icon

A simple, but flexible SVG icon component for React Native. Read the introductory blog post.

npm version Build Status

Installation

  1. Ensure sure you've installed react-native-svg
  2. npm i react-native-svg-icon --save

NOTICE

Setup

  1. 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> and stop-color becomes stopColor.

  2. Create an <Icon /> component as a bridge between react-native-svg-icon's <SvgIcon /> which imports the above SVGs

    import 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:

  1. <Icon viewBox />
  2. { Name: { viewBox: '' } }
  3. Icon.defaultProps.defaultViewBox
  4. SvgIcon.defaultProps.viewBox

Copyright (c) 2018 Matt Stow
Licensed under the MIT license (see LICENSE for details)

You can’t perform that action at this time.