[ Font-awesome ] [ React ] [ TypeScript ] 폰트어썸 설치부터 적용까지

https://fontawesome.com/

Font Awesome

 

font-awesome의 아이콘을 사용해보도록 하자.

우선 프로젝트에 다운받아줘야한다.

 

필자는 아래 버젼을 이용하고 있으니 참고 해주길 바란다.

node: 16.1.0
npm: 7.11.2
typescript: 4.9.4

 

터미널에서 사용할 프로젝트로 이동한 후

FONTAWESOME_NPM_AUTH_TOKEN={ TOKEN } npm install --save @fortawesome/fontawesome-pro

를 입력해주도록 하자. { TOKEN }은 pro를 구매한 사용자들의 토큰을 입력하면 된다.

npm install --save @fortawesome/fontawesome-free

를 하면 될 것 같은데 정확하진 않으니 검색해보도록.

 

맨 아래에 fontawesome관련하여 install부분을 기입해놓겠다.

 

// style-solid
import { 
    faAddressCard as fasAddressCard
} from "@fortawesome/pro-solid-svg-icons";

// style-regular
import { 
    faAddressCard as farAddressCard
} from '@fortawesome/pro-regular-svg-icons'

// style-light
import { 
    faAddressCard as falAddressCard
} from '@fortawesome/pro-light-svg-icons'

// style-thin
import { 
    faAddressCard as fatAddressCard
} from '@fortawesome/pro-thin-svg-icons'

// style-duotone
import { 
    faAddressCard as fadAddressCard
} from '@fortawesome/pro-duotone-svg-icons'

// [[ ===================== fontawesome ===================== ]]
export {
    fasAddressCard,
    farAddressCard,
    falAddressCard,
    fatAddressCard,
    fadAddressCard
}

우선 font-awesome디렉토리를 만들고 icons.ts에 저렇게 작성했다.

주석으로 달았지만 같은 아이콘이지만 다른 style의 아이콘들이다.

 

이제 아이콘을 사용할 곳에서 icons.ts를 import하고 아래처럼 사용해주면 된다.

<FontAwesomeIcon icon={ addressCardIcon } size="lg" />

아주 잘 적용이 된당

 

font-awesome 사용하면서 받은 것들이다.

"@fortawesome/fontawesome-pro": "^6.4.2",
"@fortawesome/fontawesome-pro-solid": "*",
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/pro-duotone-svg-icons": "^6.4.2",
"@fortawesome/pro-light-svg-icons": "^6.4.2",
"@fortawesome/pro-regular-svg-icons": "^6.4.2",
"@fortawesome/pro-solid-svg-icons": "^6.4.2",
"@fortawesome/pro-thin-svg-icons": "^6.4.2",
"@fortawesome/react-fontawesome": "^0.2.0",