Every Icon you need in reactJS project. ft. react-icons

Hello Developers ???

I just wanna share an awesome library(or whatever it is called) for Icons in ReactJS.

React-Icons

React-Icons enables you to use famous icon provider’s icons in React component format.

React Icons have Icons…


This content originally appeared on DEV Community and was authored by Mohammed Nadeem Shareef

Hello Developers ???

I just wanna share an awesome library(or whatever it is called) for Icons in ReactJS.

React-Icons

React-Icons enables you to use famous icon provider's icons in React component format.

React Icons have Icons from

  • Font Awesome
  • Heroicons
  • Typicons
  • VS Code Icons
  • css.gg
  • And a lot.

Show me the code ??? 

    npm install react-icons --save

    import { IconName } from 'react-icons/Icon-Provider';

For example

    import { HiAcademicCap } from "react-icons/hi";

And it will give you something like this

    <HiAcademicCap />

And Kabooom! You have your Icon.

Customizing Icons

We have few options to play around also

  • size
  • color
  • style
  • className
  • And some-others

let's see the code in action


    <HiAcademicCap
        color="blue"
        size="3rem"
        style={{
          color: "red"
        }}
        className="black-color"
    />
  • Here, first preferance will be given to style color (red)
  • Then to color property(blue), then to the color in our className (black)
  • To increse the side we have size

Thanks for reading.

EnjoyLearning.

Closing here ???

This is Shareef.
GitHub
My Portfolio
Twitter ShareefBhai99
Linkedin
React-Icons


This content originally appeared on DEV Community and was authored by Mohammed Nadeem Shareef


Print Share Comment Cite Upload Translate Updates
APA

Mohammed Nadeem Shareef | Sciencx (2021-06-01T15:44:40+00:00) Every Icon you need in reactJS project. ft. react-icons. Retrieved from https://www.scien.cx/2021/06/01/every-icon-you-need-in-reactjs-project-ft-react-icons/

MLA
" » Every Icon you need in reactJS project. ft. react-icons." Mohammed Nadeem Shareef | Sciencx - Tuesday June 1, 2021, https://www.scien.cx/2021/06/01/every-icon-you-need-in-reactjs-project-ft-react-icons/
HARVARD
Mohammed Nadeem Shareef | Sciencx Tuesday June 1, 2021 » Every Icon you need in reactJS project. ft. react-icons., viewed ,<https://www.scien.cx/2021/06/01/every-icon-you-need-in-reactjs-project-ft-react-icons/>
VANCOUVER
Mohammed Nadeem Shareef | Sciencx - » Every Icon you need in reactJS project. ft. react-icons. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/06/01/every-icon-you-need-in-reactjs-project-ft-react-icons/
CHICAGO
" » Every Icon you need in reactJS project. ft. react-icons." Mohammed Nadeem Shareef | Sciencx - Accessed . https://www.scien.cx/2021/06/01/every-icon-you-need-in-reactjs-project-ft-react-icons/
IEEE
" » Every Icon you need in reactJS project. ft. react-icons." Mohammed Nadeem Shareef | Sciencx [Online]. Available: https://www.scien.cx/2021/06/01/every-icon-you-need-in-reactjs-project-ft-react-icons/. [Accessed: ]
rf:citation
» Every Icon you need in reactJS project. ft. react-icons | Mohammed Nadeem Shareef | Sciencx | https://www.scien.cx/2021/06/01/every-icon-you-need-in-reactjs-project-ft-react-icons/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts