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
- Host: GitHub
- URL: https://github.com/jrgarciadev/react-iconly
- Owner: jrgarciadev
- License: mit
- Archived: true
- Created: 2020-11-16T21:01:39.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-04-12T00:38:14.000Z (over 2 years ago)
- Last Synced: 2025-03-21T20:05:29.122Z (7 months ago)
- Topics: iconly, icons, react, react-components, react-icon-kit, react-icons, svg-icons
- Language: JavaScript
- Homepage: https://react-iconly.jrgarciadev.com/
- Size: 2.06 MB
- Stars: 221
- Watchers: 3
- Forks: 45
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.MD
Awesome Lists containing this project
README
# 🌈 React Iconly Icons
[](https://www.npmjs.com/package/react-iconly)
[](https://standardjs.com)
[](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)