Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stowball/react-native-svg-icon
A simple, but flexible SVG icon component for React Native
https://github.com/stowball/react-native-svg-icon
react react-native svg svg-icons
Last synced: 6 days ago
JSON representation
A simple, but flexible SVG icon component for React Native
- Host: GitHub
- URL: https://github.com/stowball/react-native-svg-icon
- Owner: stowball
- License: mit
- Created: 2016-10-29T10:42:52.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T01:58:56.000Z (almost 2 years ago)
- Last Synced: 2024-10-26T19:53:19.961Z (18 days ago)
- Topics: react, react-native, svg, svg-icons
- Language: JavaScript
- Homepage: https://medium.com/@stowball/creating-an-svg-icon-system-in-react-native-fa0964ea5fe4
- Size: 1.79 MB
- Stars: 177
- Watchers: 4
- Forks: 11
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-svg-icon
A simple, but flexible SVG icon component for React Native. [Read the introductory blog post](https://medium.com/@stowball/creating-an-svg-icon-system-in-react-native-fa0964ea5fe4).
[](https://badge.fury.io/js/react-native-svg-icon)
[](https://travis-ci.org/stowball/react-native-svg-icon)
## Installation
1. Ensure sure you've installed [`react-native-svg`](https://github.com/react-native-community/react-native-svg)
2. `npm i react-native-svg-icon --save`
### NOTICE
* 0.8.0 - only supports [react-native-svg](https://github.com/react-native-community/react-native-svg) >= 5.3.0
* 0.7.0 - only supports [react-native-svg](https://github.com/react-native-community/react-native-svg) >= 5.3.0
* 0.6.0 - only supports [react-native-svg](https://github.com/react-native-community/react-native-svg) 4.5.0
* 0.5.0 - only supports [react-native-svg](https://github.com/react-native-community/react-native-svg) 4.4.x
## Setup
1. Create an object of your SVG icons
```js
import React from 'react';
import { G, Path } from 'react-native-svg';
// Each nameValuePair can be:
// * Name: ; or
// * Name: { svg: , viewBox: '0 0 50 50' }
export default {
SortArrows: ,
Tick: {
svg: ,
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. `` becomes `` and `stop-color` becomes `stopColor`.
2. Create an `` component as a bridge between react-native-svg-icon's `` which `import`s the above SVGs
```js
import React from 'react';
import SvgIcon from 'react-native-svg-icon';
import svgs from './assets/svgs';
const Icon = (props) => ;
export default Icon;
```
## Usage
Use your `` in your views.
```js
import Icon from './components/Icon';
// Inside some view component
render() {
return (
);
}
```
**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
```js
{
fill: '#000',
fillRule: 'evenodd',
height: '44',
width: '44',
viewBox: '0 0 100 100',
}
```
These can be overridden in your ``'s `defaultProps` or an a per instance basis.
#### Types
```js
{
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. ``
2. `{ Name: { viewBox: '' } }`
3. `Icon.defaultProps.defaultViewBox`
4. `SvgIcon.defaultProps.viewBox`
---
Copyright (c) 2018 [Matt Stow](http://mattstow.com)
Licensed under the MIT license *(see [LICENSE](https://github.com/stowball/react-native-svg-icon/blob/master/LICENSE) for details)*