Non Productive Monday

    react-native-svg-icon

    0.10.0 • Public • Published

    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)

    Install

    npm i react-native-svg-icon

    Homepage

    mattstow.com

    DownloadsWeekly Downloads

    3,006

    Version

    0.10.0

    License

    MIT

    Unpacked Size

    14.7 kB

    Total Files

    11

    Last publish

    Collaborators

    • stowball