dimitrisraptis96 / react-eva-icons

⚛:heart: ReactJS component for open source Eva Icons library

⚛:heart: react-eva-icons

React.js components for the awesome open source Eva Icons library.

Demo

Visit here

 

Getting Started

Using npm

 npm install --save react-eva-icons

Or using yarn

 yarn add react-eva-icons

 

Usage

import Icon from 'react-eva-icons';

...

render (
  <Icon 
    name="activity"
    size="medium"     // small, medium, large, xlarge
    animation={{
      type: "pulse",  // zoom, pulse, shake, flip
      hover: true,
      infinite: false 
    }}
  />
);

 

Props

Option	Type	Values	Description
animation	object	See here	Icon animation
fill	string	e.g. '#fff'	Icon color
name	string	e.g. 'activity'	Define the name of the icon
size	string	small, medium, large, ``xlarge	Icon size

 

Known Issues

When using Gatsby and server-side rendering, you should dynamic import the library:

let Icon
if (typeof window !== "undefined") {
  import("react-eva-icons").then(module => Icon = module.default);
}

Issue and solution by @taniotanio7 here

 

License

MIT

 

_{^{Made with 🤘 by @d__raptis}}

react-eva-icons's Issues

removeChild error when trying to unmount Icon component

I get this error when trying to remove the Icon component from the DOM:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at removeChild (http://localhost:3000/static/js/1.chunk.js:87249:22)
...

I'm using the loading icon and want to show it only when I'm submitting a form.
I used it like this:

<Button
	className="medium w-100"
	type="submit"
	disabled={isSubmitting}
>
	{isSubmitting && (
	<Icon
		name="loader-outline"
		size="medium"
		animation={{ type: 'pulse', infinite: true, hover: false }}
	/>
	)}
	{!isSubmitting ? (signup ? 'Create Account' : 'Sign In') : ''}
</Button>

Unexpected token . when importing Icon

Whenever I `import Icon from 'react-eva-icons', I'm getting a

Unexpected token . in the console log.

at new Script at createScript at Object.runInThisContext at Module._compile at Object.Module._extensions..js at Module.load at tryModuleLoad at Function.Module._load at Module.require at require
I'm importing it in my https://github.com/electron-react-boilerplate/electron-react-boilerplate project.

Thanks.

Cannot create React Component

Right now when React Component is created as a wrapper for eva icon, it produces the following message: 'TypeError: Cannot read property 'toSvg' of undefined'.

Does anyone have idea why does this happen?

Icons break server-side rendering (window is not defined)

When using Gatsby along with react-eva-icons the server-side rendering is broken when using regular import:

import Icon from "react-eva-icons"

with error: " WebpackError: ReferenceError: window is not defined"

According to the error message the issue occurs in node_modules/eva-icons/eva.js:354:1
in the isOldIE function that is part of the eva-icon dependency. I've checked the source for eva-icons and didn't found any isOldIE function, so I assume that it is added by Webpack?

Anyway... I've fixed the issue with dynamic ES6 import:

let Icon
if (typeof window !== "undefined") {
  import("react-eva-icons").then(module => Icon = module.default);
}

I suppose it might be a good idea to add note about this in the Readme or perhaps find a better solution to this issue?

can not work with typescript

Seems impossible to change an icon color

After having rendered a first time an icon it seems impossible to change the color.

https://codesandbox.io/s/awesome-leftpad-7lkho