๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป Dev/Front-End

๋ฆฌ์•กํŠธ ์•„์ด์ฝ˜ : React Icons

yesolz 2023. 12. 21. 14:04
728x90

ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ์„ ํ•  ๋•Œ ์•„์ด์ฝ˜์€ ํ•„์ˆ˜ ์š”์†Œ๋‹ค.

์ฒ˜์Œ html css๋ฅผ ๋ฐฐ์› ์„ ๋•Œ font awesome ์„ ์‚ฌ์šฉํ•ด์„œ, ๊ณ„์† ์—ฌ๊ธฐ์„œ ์•„์ด์ฝ˜์„ ์ฐพ์•˜์—ˆ๋Š”๋ฐ

์œ ๋ฃŒ๋„ ๋งŽ๊ณ  ํ•œ์ •์ ์ด๋ผ ์•„์‰ฌ์›€์ด ์žˆ์—ˆ๋‹ค.

 

์•ž์œผ๋กœ๋Š” ๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ ์•„์ด์ฝ˜์€ React Icons์—์„œ ์ฐพ๋„๋ก ํ•˜์ž!

๋‹ค์–‘ํ•œ Font Awesome, Ant Design, Bootstrap, Material Design ๋“ฑ

๋ฆฌ์•กํŠธ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์œ ์šฉํ•œ ์•„์ด์ฝ˜๋“ค์„ ๋ชจ๋‘ ์ฐพ์„ ์ˆ˜ ์žˆ๋‹ค.

React icons ์›นํŽ˜์ด์ง€

 

 

๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ฐ„๋‹จํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

yarn add react-icons
# or
npm install react-icons --save

 

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      Lets go for a <FaBeer />?
    </h3>
  );
}

 

 

๋” ๋งŽ์€ ์ •๋ณด๋Š” ์•„๋ž˜ ๋งํฌ !

https://github.com/react-icons/react-icons

 

GitHub - react-icons/react-icons: svg react icons of popular icon packs

svg react icons of popular icon packs. Contribute to react-icons/react-icons development by creating an account on GitHub.

github.com

https://react-icons.github.io/react-icons/

 

React Icons

 

react-icons.github.io

 

728x90