You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

react-native-svg-icon

Package Overview
Dependencies
0
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-svg-icon

A simple, but flexible SVG icon component for React Native


Version published
Maintainers
1
Created

Readme

Source

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)

Keywords

FAQs

Package last updated on 22 Mar 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc