Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
@jablonski/react-iconly
Advanced tools
Readme
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.
🌐 Website
yarn add react-iconly
or
npm i react-iconly
import React from 'react'
import { Home } from 'react-iconly'
const App = () => {
return <Home />
}
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
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
You can also use Iconly component and then set then icon name you prefer:
import React from 'react'
import { Iconly } from 'react-iconly'
const App = () => {
return (
<Iconly name='Search' set='bulk' primaryColor='blueviolet' size='xlarge' />
)
}
export default App
Icons can be configured with inline props:
<Home
set='curved'
primaryColor='blueviolet'
secondaryColor='blue'
stroke='bold'
size='xlarge'
/>
You can also include the whole icon pack:
import React from 'react'
import * as IconlyPack from 'react-iconly'
const App = () => {
return (
<IconlyPack.Home
set='bulk'
primaryColor='blueviolet'
secondaryColor='blue'
stroke='bold'
size='xlarge'
/>
)
}
export default App
Custom style example
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
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 |
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. |
Contributions are always welcome!
See CONTRIBUTING.md
for ways to get started.
Please adhere to this project's CODE_OF_CONDUCT
.
MIT © jrgarciadev
FAQs
React component for Iconly icons
We found that @jablonski/react-iconly demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).