ReactプロジェクトでFont Awesomeを使用する

ReactプロジェクトでFontAwesomeを使用する方法

react-icons

パッケージは複数ありますが、個人的には以下のパッケージをおすすめしたいです
React icons

$ npm install react-icons --save
import React, { Component } from "react";
import { FaLinkedin } from 'react-icons/fa';
import { FaFacebook } from 'react-icons/fa';
import { FaGithub } from 'react-icons/fa';

class Test extends Component {
    render() {
        return (
                <ul id="sns">
                    <li><FaFacebook size={24} /></li>
                    <li><FaGithub size={24} /></li>
                    <li><FaLinkedin size={24} /></li>
                </ul>
        );
    }
}

react-fontawesome

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/react-fontawesome
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStroopwafel } from '@fortawesome/free-solid-svg-icons'

library.add(faStroopwafel)

こちらはスペルミスに注意してくださいfortawesomeになっています

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

export const Food = () => (
  <div>
    Favorite Food: <FontAwesomeIcon icon='stroopwafel' />
  </div>
)

関連記事