akveo/react-native-eva-icons

⭐Eva Icons for React Native

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
# Using Yarn?
# yarn add 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} fill='green' />
);

You can also use a direct imports.

import GithubIcon from 'react-native-eva-icons/icons/Github';

export const GithubIcon = () => (
  <GithubIcon width={48} height={48} fill='green' />
);

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='green' />
);

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(null);

  const onIconPress = () => {
    iconRef.current?.startAnimation();
  };

  return (
    <TouchableWithoutFeedback onPress={onIconPress}>
      <Icon ref={iconRef} animation='pulse' name='activity' fill='green' />
    </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 😼

react-native-eva-icons's Issues

Playground: create playground app

How to optimize?

💬 Question

Do you have any information for make react-native-eva-icons is optimized use for bundler like webpack or facebook/metro ?

React Native Eva Icons Version

• Version: 1.3.0

Example Bundle of react-native-icon

The real fact, I'm just use 1 Icon from react-native-icons. After finished bundling, the output bundle of my project it's lot an unused.

File size

💬 Question

Looking at my bundle size on web a large part of it is eva icons.

Another large part of it is @ui-kitten/components, specifically ui (and of course mapping).

I was wondering if there's something that can be done to reduce this. I only use 4 icons in total, so it seems a bit much to have all of it in the bundle.

React Native Eva Icons Version

"@ui-kitten/components": "^5.0.0",
"@ui-kitten/eva-icons": "^5.0.0",
"@eva-design/eva": "^2.0.0",

Docs: add DEV_DOCS

Add a developer guide which should explain npm scripts usage etc

Web Support ?

Hi, I have tried to use UI kitten on RNW / Next JS. and an error occurs while integrate with Eva Icons

ReferenceError: Cannot access 'React' before initialization
./node_modules/react-native-eva-icons/icons/Github.js
/_next/development/server/static/development/pages/index.js:18566:13
__webpack_require__
./webpack/bootstrap:21
  18 | // Execute the module function
  19 | var threw = true;
  20 | try {
> 21 | 	modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
     | ^  22 | 	threw = false;
  23 | } finally {
  24 | 	if(threw) delete installedModules[moduleId];
View compiled
module.exports../node_modules/react-native-eva-icons/icons/index.js.exports.findIconByName
./lib/icons/index.ts:693
  690 |     return require('./PersonOutline').default;
  691 | case 'person-remove':
  692 |     return require('./PersonRemove').default;
> 693 | case 'person-remove-outline':
      | ^  694 |     return require('./PersonRemoveOutline').default;
  695 | case 'phone':
  696 |     return require('./Phone').default;

Docs: integrate changelog generation

https://github.com/conventional-changelog/conventional-changelog

icon not showing on android

🐛 Bug Report

icon didn't showing anything on android

Expected behavior

showing the icon properly

React Native Eva Icons Version

"react-native-eva-icons": "^1.3.1",

Environment information

  System:
    OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i3-10100F CPU @ 3.60GHz
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.17.0/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7486908
  npmPackages:
    react: 17.0.1 => 17.0.1 
    react-native: 0.64.2 => 0.64.2

Can't find variable: Icon

🐛 Bug Report

[Unhandled promise rejection: ReferenceError: Can't find variable: Icon]
at node_modules/react-native-eva-icons/icons/VolumeMuteOutline.js:13:46 in exports._default
at [native code]:null in performSyncWorkOnRoot
at [native code]:null in dispatchAction
at App.js:50:19 in firebase.auth.onAuthStateChanged$argument_0
at node_modules/@firebase/auth/dist/auth.esm.js:372:584 in En
at [native code]:null in flushedQueue
at [native code]:null in callFunctionReturnFlushedQueue

Docs: expand README

App Crash on wrong name strings

🐛 Bug Report

App crash if the name string isnt found in the eva icon library.

To Reproduce

Steps to reproduce the behavior:
Adding a wrong string for the icon name.

Expected behavior

Instead of throwing a violation there should be a testing mechanism which prevents of throwing a violation and return null instead of the icon with a wrong name string to prevent app crashes.

Link to runnable example or repository (highly encouraged)

React Native Eva Icons Version

newest

Environment information

IOS 13.3 / 13.4
Android 8/9

[email protected] but i use [email protected]

💬 Question

Could not resolve dependency:
npm ERR! peer react@"16.5.0" from [email protected]

React Native Eva Icons Version

Animation

How can I use Animation (data-eva-animation='zoom') with React Native?

Outline icons ?

I can't set my icon to outline version.

To make this I had to set so many params:

<Icon name="home" stroke={tintColor} strokeWidth={1} fillOpacity={0} width={24} height={24} />

And this does not render the outline real version, of course.

Isn't there a parameter that configures me the type of icon?
Some param like outline={true}

I may be doing it the wrong way.

Support Flip in Y animation

🚀 Feature Proposal

This would add to the consistency with the original package.
https://akveo.github.io/eva-icons/#/?searchKey=activity&type=outline

Unable to resolve module `react-native-svg` from `node_modules\react-native-eva-icons\icons\Activity.js`: react-native-svg could not be found within the project

🐛 Bug Report

I'm trying to use react-native-eva-icons but this error pops up making the app crash

error: Error: Unable to resolve module `react-native-svg` from `node_modules\react-native-eva-icons\icons\Activity.js`: react-native-svg could not be found within the project.

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules: rm -rf node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
    at ModuleResolver.resolveDependency (D:\olive\Documents\Developer\phone\MPF-front-native\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:186:15)
    at ResolutionRequest.resolveDependency (D:\olive\Documents\Developer\phone\MPF-front-native\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (D:\olive\Documents\Developer\phone\MPF-front-native\node_modules\metro\src\node-haste\DependencyGraph.js:287:16)
    at Object.resolve (D:\olive\Documents\Developer\phone\MPF-front-native\node_modules\metro\src\lib\transformHelpers.js:267:42)
    at D:\olive\Documents\Developer\phone\MPF-front-native\node_modules\metro\src\DeltaBundler\traverseDependencies.js:434:31
    at Array.map (<anonymous>)
    at resolveDependencies (D:\olive\Documents\Developer\phone\MPF-front-native\node_modules\metro\src\DeltaBundler\traverseDependencies.js:431:18)
    at D:\olive\Documents\Developer\phone\MPF-front-native\node_modules\metro\src\DeltaBundler\traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (D:\olive\Documents\Developer\phone\MPF-front-native\node_modules\metro\src\DeltaBundler\traverseDependencies.js:87:24)

To Reproduce

install react-native-eva-icons yarn add react-native-eva-icons
import Icon from react-native-eva-icons import { Icon } from 'react-native-eva-icons'
add icon component <Icon name="map-outline" width={24}/>

Expected behavior

I expect the eva map-outline icon to be displayed

React Native Eva Icons Version

^1.3.1

Environment information

  System:
    OS: Windows 10 10.0.18363
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
  Binaries:
    Node: 14.5.0 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.5 - D:\Program Files\nodejs\npm.CMD
  SDKs:
    Android SDK:
      API Levels: 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.1
      System Images: android-29 | Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google APIs 
Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom     
  npmPackages:
    react: 16.13.1 => 16.13.1
    react-native: 0.63.0 => 0.63.0

Does this support animation?

How can i add custom svgs to your lib?

💬 Question

Hey there, i really love your icons and i started using them. But i need some more icons for my own purpose. Is there an easy way to do that? Like saving some svgs somewhere and implement them with a line of code?

React Native Eva Icons Version

newest..