npmpackage.info

Gathering detailed insights and metrics for react-native-svg-icon

Other packages similar to react-native-svg-icon

lucide-react-native

0.525.0

A Lucide icon library package for React Native applications.

react-icomoon

2.6.1

It makes it very simple to use SVG icons in your React and React-Native projects.

iconoir-react-native

7.11.0

React Native library for Iconoir, the biggest open source icon library with tons of free icons.

healthicons-react-native

3.5.0

React Native icon library for the Health Icons set

Gathering detailed insights and metrics for react-native-svg-icon

react-native-svg-icon - 0.10.0 | npmpackage.info

react-native-svg-icon

A simple, but flexible SVG icon component for React Native

0.10.0

179

MIT

JavaScript

1.9

Installations

npm install react-native-svg-icon

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

15.3.0

NPM Version

7.0.14 Pull Requests

Open

7

Total

15

Closed

5

Merged

3

Issues

Open

1

Total

15

Closed

14

Releases

v0.10.0

Updated on Mar 22, 2021

v0.9.0

Updated on Oct 25, 2020

View All 2 releases

Languages

JavaScript

JavaScript (100%)

Developer

stowball

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

179 Stars

46 Commits

11 Forks

3 Watchers

10 Branches

3 Contributors

Updated on Mar 13, 2025

Maintainers

View All 3 Contributors

Package Meta Information

Latest Version

0.10.0

Package Id

react-native-svg-icon@0.10.0

Size

4.85 kB

NPM Version

7.0.14

Node Version

15.3.0

Published on

Mar 22, 2021

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

prop-types react-native react-native-svg

Dev Dependencies

babel-cli babel-core babel-preset-es2015 babel-preset-react npm-watch prop-types react react-native react-native-svg

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

1import React from 'react';
2import { G, Path } from 'react-native-svg';
3
4// Each nameValuePair can be:
5// * Name: <Svg />; or
6// * Name: { svg: <Svg />, viewBox: '0 0 50 50' }
7
8export default {
9    SortArrows: <G><Path d="M0 45h90L45 0 0 45z"/><Path d="M0 55h90l-45 45L0 55z"/></G>,
10    Tick: {
11        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"/>,
12        viewBox: '0 0 50 50',
13    },
14}

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.

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

1import React from 'react';
2import SvgIcon from 'react-native-svg-icon';
3import svgs from './assets/svgs';
4
5const Icon = (props) => <SvgIcon {...props} svgs={svgs} />;
6
7export default Icon;

Usage

Use your <Icon /> in your views.

1import Icon from './components/Icon';
2
3// Inside some view component
4render() {
5    return (
6        <Fragment>
7          <Icon name="SortArrows" height="20" width="20" />
8          <Icon name="Tick" fill="#0f0" viewBox="0 0 200 200" />
9          <Icon name="Star" fill="transparent" stroke="#fff" strokeWidth="5" />
10        </Fragment>
11    );
12}

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

1{
2    fill: '#000',
3    fillRule: 'evenodd',
4    height: '44',
5    width: '44',
6    viewBox: '0 0 100 100',
7}

These can be overridden in your <Icon />'s defaultProps or an a per instance basis.

Types

1{
2    defaultViewBox: string,
3    fill: string.isRequired,
4    fillRule: string,
5    height: oneOfType([number, string]).isRequired,
6    name: string.isRequired,
7    stroke: string,
8    strokeWidth: oneOfType([number, string]),
9    style: oneOfType([array, object]),
10    svgs: object.isRequired,
11    width: oneOfType([number, string]).isRequired,
12    viewBox: string,
13}

The specificity order for viewBox is:

<Icon viewBox />
{ Name: { viewBox: '' } }
Icon.defaultProps.defaultViewBox
SvgIcon.defaultProps.viewBox

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

46 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-c2jc-4fpr-4vhg
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-mph8-6787-r8hw
Warn: Project is vulnerable to: GHSA-7mhc-prgv-r3q4
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-px4h-xg32-q955
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877
Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
Warn: Project is vulnerable to: GHSA-7f53-fmmv-mfjv
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-gff7-g5r8-mg8m
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
Warn: Project is vulnerable to: GHSA-crh6-fp67-6883

Score

1.9

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More