React - Font-Awesome 사용하기

Awesome Font(React) 사용하기

1. 설치

$ npm i @fortawesome/fontawesome-svg-core
$ npm i @fortawesome/react-fontawesome

2. icons(light [유료], regular, solid [기본], brands(기업))선택 설치

$ npm i @fortawesome/free-solid-svg-icons
$ npm i @fortawesome/react-fontawesome
$ npm i @fortawesome/free-brands-svg-icons

---

• regular(far)
• solid(fas) -> default
• light(fal)

import React, { Fragment } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBell as farBell } from '@fortawesome/free-regular-svg-icons';
import { faBell, faCheckCircle, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { library } from "@fortawesome/fontawesome-svg-core";
export default function App() {
    library.add(farBell, faBell, fab);

    return (
        <Fragment>
            <h2> React Awesome Font Examples </h2>
            {/* solid */}
            <FontAwesomeIcon icon={faBell} style={{color: 'red'}}/>
            <FontAwesomeIcon icon={["fa", "bell"]} style={{color: 'red'}}/>

            {/*  Regular  */}
            <FontAwesomeIcon icon={farBell}/>
            <FontAwesomeIcon icon={["far", "bell"]}/>

            {/* brands */}
            <FontAwesomeIcon icon={["fab", "github"]} style={{color: 'deeppink'}}/>
            <FontAwesomeIcon icon={["fab", "apple"]} style={{color: 'deeppink'}}/>
            <FontAwesomeIcon icon={["fab", "google"]} style={{color: 'deeppink'}}/>
            <FontAwesomeIcon icon={["fab", "microsoft"]} style={{color: 'deeppink'}}/>
            <FontAwesomeIcon icon={["fab", "microphone"]} style={{color: 'deeppink'}}/>

            {/* etc */}
            <FontAwesomeIcon icon={faCheckCircle} style={{color: 'blue'}}/>
            <FontAwesomeIcon icon={faTimesCircle} style={{color: 'orange'}}/>

            {/* size */}
            <FontAwesomeIcon icon={faBell} size='xs'/>
            <FontAwesomeIcon icon={faBell} size='lg'/>
            <FontAwesomeIcon icon={faBell} size='2x'/>
            <FontAwesomeIcon icon={faBell} size='3x'/>

        </Fragment>
    );
};