이 기사를 쓴 경위

공식 사이트(영어) 을 보고 있을 때, 사용하고 싶은 아이콘명의 지정 방법에 당황했기 때문에, 이 기사에서는 아이콘명의 지정 방법에 좁혀 기재합니다.
이 기사에서는 Solid Style에 대해서만 설명합니다.

덧붙여 react-fontawesome의 임포트나 사용 방법에 대해서는 다른 일본어 사이트등에 상세히 기재되어 있으므로, 그쪽을 참고로 해 주세요.

사용하려는 아이콘 이름 확인

이 사이트 에서 사용할 아이콘을 찾아 클릭합니다.
아이콘의 왼쪽 상단에 크게 나열된 이름이 아이콘 이름입니다.

예

URL : htps : ///후타타우우소메. 코 m / 이콘 s / 치 CK - s 어라? sty ぇ = 소 d

사용할 아이콘 이름을 지정하는 방법

@fortawesome/free-solid-svg-icons에서 가져올 때

App.js

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'

//FontAwesomeのアイコン名が「check-square」、「coffee」のアイコンを読み込んでいる
library.add(faCheckSquare, faCoffee)  

※ 참조 URL: npm @fortawesome/react-fontawesome(영어)

위와 같이 @fortawesome/free-solid-svg-icons 에서 사용하고 싶은 아이콘명의 오브젝트를 취득할 때는, 사용하고 싶은 아이콘명을 캬멜 케이스에 재기입해, 선두에 fa 를 붙입니다.

<FontAwesomeIcon> 태그의 icon 속성 지정시

CoffeeMark.js

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const CoffeeMark = () => (
  <div>
    <FontAwesomeIcon icon="check-square" />
    Favorite beverage: <FontAwesomeIcon icon="coffee" />
  </div>
) 

※ 참조 URL: npm @fortawesome/react-fontawesome(영어)
<FontAwesomeIcon> 태그의 icon=""를 지정할 때는, 아이콘명을 그대로 지정합니다.

참조 URL

공식 사이트 | npm @fortawesome/react-fontawesome(영어)
공식 사이트 | 아이콘 예 check-square(영어)