❤️ Clean and powerful Eva Icons implementation for React Native based on react-native-svg elements. Demo
Installation
npm i react-native-eva-icons
This framework assumes you have already installed react-native-svg, but if not - you should install it too.
Usage
Icons can be used by it's name using only Icon
component.
import { Icon } from 'react-native-eva-icons';
export const GithubIcon = () => (
<Icon name='github' width={48} height={48}/>
);
You can also use a direct imports.
import GithubIcon from 'react-native-eva-icons/icons/Github';
export const GithubIcon = () => (
<GithubIcon width={48} height={48}/>
);
Customization
React Native Eva Icons are built with react-native-svg elements. All of the components can accept the same properties as SVG elements.
For example, you can change icon fill color with the following code
import { Icon } from 'react-native-eva-icons';
export const GithubIcon = () => (
<Icon name='github' fill='red'/>
);
Animations
Implements original Eva Icons animations. Try demo on Snack for review!
import React from 'react';
import { TouchableWithoutFeedback } from 'react-native';
import { Icon } from 'react-native-eva-icons';
export const GithubIcon = () => {
const iconRef = React.useRef();
const onIconPress = () => {
iconRef.current?.startAnimation();
};
return (
<TouchableWithoutFeedback onPress={onIconPress}>
<Icon ref={iconRef} animation='pulse' name='activity' />
</TouchableWithoutFeedback>
);
};
Demo
Try it on Snack!
Where is icons source code?
React Native Eva Icons sources are generated with ts-node scripts, so there is no need to track them in default branch of the repo. But if you don't trust CI and want to review generated sources, take a look at bundle branch.
How can I support this project?
Any way of supporting gives me a ton of motivation to create other beautiful Open Source things
- Star this repo ⭐
- Submit new issues, open a pull requests 🔧
- Follow me on Twitter 😼