An open API service indexing awesome lists of open source software.

https://github.com/jrgarciadev/react-iconly

🌈 React component for Iconly icons
https://github.com/jrgarciadev/react-iconly

iconly icons react react-components react-icon-kit react-icons svg-icons

Last synced: 7 months ago
JSON representation

🌈 React component for Iconly icons

Awesome Lists containing this project

README

          

# 🌈 React Iconly Icons

[![NPM](https://img.shields.io/npm/v/react-iconly.svg)](https://www.npmjs.com/package/react-iconly)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
[![npm downloads](https://img.shields.io/npm/dm/react-iconly.svg?style=flat-round)](https://www.npmjs.com/package/react-iconly)

> React component for Iconly icons

**react-iconly** is a collection of simply beautiful open source icons for React.js. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.

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

🌐 [Website](https://react-iconly.jrgarciadev.com/)

### Sets

- Bold
- Bulk
- Light Border
- Broken
- Two Tone
- Curved (New)

### Installation

yarn add react-iconly

or

npm i react-iconly

### Usage

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

const App = () => {
return
}

export default App
```

You can also wrap your app inside a `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 (




)
}

export default App
```

You can also use Iconly component and then set then icon name you prefer:

```jsx
import React from 'react'
import { Iconly } from 'react-iconly'

const App = () => {
return (

)
}

export default App
```

Icons can be configured with inline props:

```jsx

```

You can also include the whole icon pack:

```jsx
import React from 'react'
import * as IconlyPack from 'react-iconly'

const App = () => {
return (

)
}

export default App
```

Custom style example

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

const App = () => {
return (

)
}

export default App
```

## Props

| Prop | Type | Default | Note |
| ---------------- | -------------------------------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `label` | `string` | | String to use as the aria-label for the icon. Use an empty string when you already have readable text around the icon,like text inside a button. |
| `filled` | `boolean` | `false` | Set de icons sets to 'bold'. |
| `primaryColor` | `string` | `currentColor` | Primary colour for icons. |
| `secondaryColor` | `string` | `currentColor` | Secondary colour for **two-tone** and **bulk** icons set. |
| `size` | `number` | `small` `medium` `large` `xlarge` | `medium` | Control the size of the icon, you can set a custom **number** size |
| `set` | `light` `bold` `two-tone` `bulk` `broken` `curved` | `light` | Iconly set option. |
| `stroke` | `light` `regular` `bold` | `regular` | Sets the line stroke for **light** and **two-tone** icons set. |
| `style` | `object` | | Custom styles property. |

---

## Contributing

Contributions are always welcome!

See `CONTRIBUTING.md` for ways to get started.

Please adhere to this project's `CODE_OF_CONDUCT`.

## License

MIT © [jrgarciadev](https://github.com/jrgarciadev)