# Beautiful and pixel perfect React Icon Library

**React Iconly** - Based on  [Iconly](https://ui8.net/piqodesign/products/iconly-essential-icons)  v2 icons

One of the phases in which we invest more time when we are developing or designing a web or mobile application is in choosing the **icon pack** that best suits the brand and what we want to convey, even creating our own **set** of icons if none of them fits or we want it to be unique and identify your brand.

 [Iconly](https://ui8.net/piqodesign/products/iconly-essential-icons?spm=a2c6h.14275010.0.0.541d5debaFCnO5)  is one of the options that is being used by designers and developers today, so I decided to create a library for React / Next.js / Gatsby that facilitates its use and that also allows us to customize any icon according to our needs.

On the [Website](https://react-iconly.jrgarciadev.com), you can find all the icons sorted by sets
 

Integrating into your project is quite simple just by following these steps:

### Installation
```
yarn add react-iconly 
``` 
or

```
npm install react-iconly
``` 

### Usage
```jsx
import React from 'react';
import { Home } from 'react-iconly';

const App = () => {
  return <Home />
};

export default App;
```

You can also wrap your app inside an `IconlyProvider` component, this will make all the icons that are within the context use the Provider properties

If you set specific props for each Icon the Provider properties will be overwritten

```jsx
import React from 'react';
import { IconlyProvider, Home, Notification } from 'react-iconly';

const App = () => {
  return (
    <IconlyProvider set="bulk" primaryColor="blueviolet" secondaryColor="blue" stroke="bold" size="xlarge">
      <Home />
      <Notification primaryColor="yellow" />
    </IconlyProvider>
  )
};

export default App;
```

Icons can be configured with inline props:
```jsx
<Home set="two-tone" primaryColor="blueviolet" secondaryColor="blue" stroke="bold" size="xlarge"/>
```
You can also include the whole icon pack:

```jsx
import React from 'react';
import * as Iconly from 'react-iconly';

const App = () => {
  return <Iconly.Home set="bulk" primaryColor="blueviolet" secondaryColor="blue" stroke="bold" size="xlarge"/>
};

export default App;
```

Custom style example

```jsx
import React from 'react';
import { Send } from 'react-iconly';

const App = () => {
  return <Send style={{ transform: 'rotate(45deg)' }} primaryColor="red" stroke="bold" size="xlarge"/>
};

export default App;

```

For more instructions visit:

[Github repository](https://github.com/jrgarciadev/react-iconly) 

Thanks for reading!