react-native-eva-icons

❤️ 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 :star:
• Submit new issues, open a pull requests :wrench:
• Follow me on Twitter :smirk_cat: