React Icons React에서 아이콘을 사용하는 가장 쉬운 방법

Today we'll be discussing the easiest way to use SVG icons in react. We'll be using an npm package that will enable us to use icons from some of the most well-known icon libraries out there.

Open the terminal in the root of the project and use this command:
npm install react-icons

This will download our package and give us full accessibility to it.

Now open the boilerplate in your code editor.

React Icons give you the option to choose icons from all of the following icon libraries:

React Icons handles that by allowing you to import an IconContext component that allows you to do a lot of cool things to your icon. We'll be using it to add some style to ours.

Add this import after our first one:

import {IconContext} from "react-icons"

Now wrap our icon in the IconContext component like so:

const Bare = () => {
  return (
   <IconContext.Provider>
    <div>
      <FaTwitter />
    </div>
   </IconContext.Provider>
  )
}

Now all we need to do is add a value prop to our IconContext component, pass it an object. Inside of that object add a key called style, assign it the value of an object and start styling.

Example:

const Bare = () => {
  return (
   <IconContext.Provider value={{ style: {fontSize: '30px', color: "rgb(0, 123, 255)"}}}>
       <div>
         <FaTwitter />
       </div>
    </IconContext.Provider>
  )
}

If you head back to your browser you should now see this:

That is all for this tutorial. If you've enjoyed it please take a moment to leave a like, to help the next dev. Thank you.