FontAwesome for React

폰트 어썸~! React 컴포넌트 활용

Font Awesomearrow-up-right은 공식적으로 React 애플리케이션에서 아이콘을 멋지게 활용 할 수 있는 컴포넌트를 제공합니다.

패키지 설치

React에서 FontAwesome 컴포넌트를 사용하기 위해 필요한 각 패키지를 설치합니다. (솔리드arrow-up-right 아이콘 설치)

그리고 필요한 경우 브랜드arrow-up-right, 레귤러arrow-up-right 아이콘 (무료) 아이콘을 추가 설치합니다.

circle-exclamation

Pro 아이콘

아이콘 사용 방법

프로젝트에 필요한 모든 패키지를 설치했으면 Font Awesome을 React와 함께 사용할 수 있는 2가지 방법이 있습니다.

타입

장점

단점

개별 사용

최종 번들 최적화 (사용한 아이콘만 번들)

사용할 때 마다 아이콘을 불러와야 함

글로벌 사용

init 모듈에서 아이콘을 한 번만 가져 옴

사용하지 않는 아이콘도 번들에 포함 됨

개별 사용

아이콘을 각 컴포넌트에서 불러와 사용합니다.

글로벌 사용

프로젝트에서 2개 이상의 컴포넌트에서 아이콘을 사용할 수 있습니다. 개별 사용 방법은 각 컴포넌트에서 아이콘을 가져와 사용해야 하므로 반복된 작업에 매우 지루할 수 있습니다. 이런 경우 한 번만 추가 등록해 반복된 작업 없이 사용하는 방법을 선택해 활용할 수 있습니다.

글로벌 라이브러리 등록 방법은 코어에서 library 모듈을 추출한 다음 아이콘을 등록(add) 합니다.

circle-info

fab는 모든 브랜드(예: apple, microsoft, google 등) 아이콘을 말하며, 모든 브랜드 아이콘을 라이브러리에 등록합니다. 반면 faCoffee, faCheckSquare는 개별 솔리드 아이콘을 지칭하며 선택적으로 등록합니다.

글로벌 등록 된 아이콘은 개별 사용 때처럼 별도 불러오기 없이 사용할 수 있습니다. FrontAwesomeIcon 컴포넌트를 불러와 icon 속성에 등록 된 아이콘 이름을 설정합니다.

Showcase 컴포넌트는 브랜드 아이콘과 체크 스퀘어 솔리드 아이콘을 사용합니다. 모든 브랜드 아이콘이 라이브러리에 등록되어 있으므로 별도 불러오기 없이 apple, microsoft, google 브랜드 아이콘을 바로 사용할 수 있습니다.

기본 값으로 추론되는 솔리드(fas) 타입과 달리, 브랜드(fab) 타입은 명시적이어야 합니다. 명시적으로 사용할 fab 타입을 설정하려면 icon 속성에 다음과 같이 배열을 사용해야 합니다. (예: ['fab', 'samsung'])

아이콘 구문

앞서 소개한 아이콘 컴포넌트 사용법은 HTML에서의 사용법과는 다릅니다.

커스텀 클래스 설정

className 속성을 사용해 스타일링을 목적으로 하는 커스텀 클래스 이름을 추가할 수 있습니다.

아이콘 검색

무료 아이콘arrow-up-right을 키워드로 검색해 찾을 수 있습니다.

아이콘 크기

아이콘 Sizearrow-up-right 설정 방법은 다음과 같습니다.

고정 너비 아이콘

아이콘 Fixed Widtharrow-up-right 설정 방법은 다음과 같습니다.

반전 아이콘

아이콘 Inverse 설정 방법은 다음과 같습니다.

리스트 아이콘

리스트 아이콘arrow-up-right을 설정하는 방법은 다음과 같습니다.

회전 아이콘

회전 아이콘arrow-up-right을 설정하는 방법은 다음과 같습니다.

플립 아이콘

아이콘을 수평(horizontal), 수직(vertical) 또는 양 방향(both)으로 설정하는 방법은 다음과 같습니다.

애니메이션 아이콘

애니메이션 아이콘arrow-up-right 설정 방법은 다음과 같습니다.

보더 아이콘

보더 아이콘arrow-up-right 설정 방법은 다음과 같습니다.

풀드 아이콘

풀드(pulled) 아이콘arrow-up-right 설정 방법은 다음과 같습니다.

트랜스폼 아이콘

트랜스폼 아이콘arrow-up-right 설정 방법은 다음과 같습니다.

마스킹 아이콘

마스킹 아이콘arrow-up-right 설정 방법은 다음과 같습니다.

레이어 아이콘

레이어 아이콘arrow-up-right 설정 방법은 다음과 같습니다.

SVG 스프라이트 아이콘

SVG 스프라이트 아이콘arrow-up-right 설정 방법은 다음과 같습니다.

참고

Last updated