250x250
Rainbow🌈Coder
My dev Note📒
Rainbow🌈Coder
전체 방문자
오늘
어제
  • 분류 전체보기 (411)
    • 공지사항 (0)
    • Debugger (10)
      • Visual Studio Debugger (1)
      • Chrome DevTools (3)
      • Visual Studio Code Debugger (4)
      • eclipse (1)
      • intelliJ (1)
    • OOP (2)
      • OOP (2)
    • TypeScript (54)
      • 타입스크립트 TypeScript (54)
    • Javascript (87)
      • Javascript (45)
      • Node.js (19)
      • React (5)
      • FE 개발환경설정 (3)
      • React와 Node 같이 때려잡기 (6)
      • next.js (2)
      • pixi.js (7)
    • 마크업 (23)
      • Html & Css (23)
    • C# (80)
      • C# (12)
      • 이것이 C#이다 (68)
    • C++ (30)
      • c++ (27)
      • win api (3)
    • Unity (18)
      • Unity(기초) (8)
      • Unity(C#중급) (5)
      • 유니티 포톤(네트워크) (4)
      • unity c# MyCode (1)
    • Java & Spring (29)
      • Java (11)
      • 스프링 (8)
      • Java Algorithm (9)
      • Javs Data Structures (1)
    • 자료구조와 알고리즘 (15)
      • 자료구조 (5)
      • 알고리즘 (10)
    • 형상관리 (15)
      • Git (11)
      • 소스트리 (3)
    • 그래픽스 (7)
      • WebGl (7)
    • AWS (3)
      • aws (3)
    • 리눅스 (5)
      • 리눅스 (5)
    • 책 리뷰 (13)
      • 클린코드(책리뷰) (3)
      • 유지보수가능한코딩의기술C#편(책리뷰) (1)
      • 리팩토링(자바스크립트판) (9)
    • Server (2)
      • 게임 서버(네트워크, 멀티쓰레드,OS) (2)
    • 설계, 아키텍쳐 (4)
    • 파이썬 (5)
    • 디자인패턴 (2)
    • mocha (2)
    • Jest (1)
    • Spine (1)
    • 인공지능 (1)
      • 혼자공부하는머신러닝+딥러닝 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • MySQL
  • ㅣㄷ
  • 위임
  • 컴포지션

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Rainbow🌈Coder

My dev Note📒

[React] fontawesome 리액트로 가져오기
Javascript/React

[React] fontawesome 리액트로 가져오기

2022. 12. 26. 14:02
728x90

https://fontawesome.com/v5/docs/web/use-with/react

 

React

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

위 세줄을 야무지게 다운받아 준다.

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

import React from 'react'
import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faUser } from '@fortawesome/free-solid-svg-icons'
export const Navbar = () => {
	return (
		<div>
			<div><FontAwesomeIcon icon={faUser} /></div>
			<div></div>
			<div></div>
		</div>
	)
}

export default Navbar;

 

여기서, 스타일을 바꿔주고 싶다면,

Font Awesome 아이콘 대한 패키지를 설치해야 합니다. Solid, Regular, Light, Brands 4개의 카테고리와 유/무료 여부에 따라 여러개의 패키지가 존재하는데요. 여기서는 무료로 제공되는 Solid, Regular Brands 3개의 카테고리에 대한 패키지만 설치

npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons

https://www.daleseo.com/react-font-awesome/

귀엽다!

 

728x90

'Javascript > React' 카테고리의 다른 글

[React] 리액트 라우터와 관련 Hooks 정리  (0) 2022.12.14
[리액트] 컴포넌트 단축키 깡패 rafce  (0) 2022.05.23
[리액트] 환경설정  (0) 2022.05.07
[React] index.html 에 리액트와 바벨 불러오기  (0) 2022.04.23
    'Javascript/React' 카테고리의 다른 글
    • [React] 리액트 라우터와 관련 Hooks 정리
    • [리액트] 컴포넌트 단축키 깡패 rafce
    • [리액트] 환경설정
    • [React] index.html 에 리액트와 바벨 불러오기
    Rainbow🌈Coder
    Rainbow🌈Coder
    몰라도 결국은 아는 개발자, 그런 사람이 되기 위한 매일의 한걸음

    티스토리툴바