Beautiful and pixel perfect React Icon Library

Felix Sanchez — Wed, 17 Aug 2022 04:08:00 +0000

React Iconly - Based on Iconly 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 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.

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

Installation

yarn add react-iconly

npm install react-iconly

Usage

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

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;

<Home set="two-tone" primaryColor="blueviolet" secondaryColor="blue" stroke="bold" size="xlarge"/>

You can also include the whole icon pack:

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

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;

Check the repo here

Thanks for reading

DEV Community: Felix Sanchez

Beautiful and pixel perfect React Icon Library