Snappy icons is a collection of more than 350 open source icons designed on a 24x24 grid.
The icons are designed as svgs and this package converts them to be compatible with react-native-svg
package.
- Make sure you have
react-native-svg
installed:
yarn add react-native-svg
or
npm i react-native-svg
- Add this package:
yarn add react-native-snappy
or
npm i react-native-snappy
The list of all the icons is available on the official website snappyicons.com.
Icon names are formated in kebab case. E.g. to use chevron-right
icon use:
import Snappy from 'react-native-snappy';
const App = () => {
return <Snappy name='chevron-right' />;
};
Icons can be further configured with inline props:
<Snappy name='chevron-right' strokeWidth={1} size={40} color='#FF6666' />
Prop | Description | Default |
---|---|---|
size |
Rectangular size of the icon. | 24 |
color |
The stroke prop refers to the color outline the icon. | "#000" |
strokeWidth |
The strokeWidth prop specifies the width of the outline on the icon. | 2 |