소개

React에서 Font Awesome을 scss로 사용하려고합니다.
능숙하지 않고 조사하고 있으면, 굉장히 간편한 방법에 도착했으므로,
지금 경감이 있을 것 같습니다만, 공유합니다.

Font Awesome?

어쨌든 웹 페이지에서,
아이콘 폰트를 사용할 수 있게 되는 CSS 프레임워크입니다.
예를 들어 SNS 아이콘을 이미지로 준비하지 않아도 사용할 수 있으므로,
쉽고 가볍습니다.
무료와 유료가 있어 유료라면 사용할 수 있는 아이콘의 수가 늘어납니다.

환경

windows10
Node.js v8.12
React.js v16.8.6

전제

이번 Font Awesome 자체의 사용법은 기재하지 않습니다

이 방법은 Font Awesome 버전 4입니다

버전 5 이상을 사용하려면 공식에서 DL하여 설치합니다

react 전용 npm 패키지도 있지만 이번에는 접하지 않습니다 (별로 잠그고 싶지 않기 때문에)

이번 npm은 3년 갱신되지 않은 것 같습니다. 거기 궁금하다

하지만 주간 60 만도 DL되어 있기 때문에 메이저 또한 인기 같습니다 (2019.6.7 현재)

Font Awesome 공식은 이쪽
기본 사용법은 이쪽
구체적인 사용법은 이쪽
npm은 이쪽
React 전용은 이쪽

준비

적절하게 React 프로젝트를 만듭니다.

$ create-react-app fontawesome-hello

※후술의 샘플은, 불필요한 코드를 지우고 있습니다만,
이것으로 만들어진 코드에 그대로 기술해도 사용할 수 있습니다.

설치

$ npm install --save font-awesome

코드 재작성

index.js

가장 TOP의 구성 요소입니다.
여기에 방금 설치한 CSS를 로드합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

// ★これを追加するだけ
import 'font-awesome/css/font-awesome.min.css'; 


ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

App.js

실제로 font Awesome을 이용하는 컴포넌트입니다.
공식 사용법대로 class로 설정하여 이용합니다.

import React, { Component } from 'react';

// 別にクラスでなくても良い
class App extends Component {
  constructor(props) {
    super(props);
  }

//★ <i className="fa fa-thumbs-up">でグッドアイコンが表示される

  render() {
    return (
      <div>
        hello font awesome<i className="fa fa-thumbs-up"></i>
      </div>
    );
  }

//アイコンだけだとなんとなく寂しかったので文字も出しているが、今回の話と関係ない

}

export default App;

실행 결과

가장 오른쪽에 좋은 아이콘이 나오네요.
성공입니다!

소감

과거에 여러가지 시험해 4고 8고고했지만,
1명령으로 준비해 버리는 것은 매우 편하네요.
이 느낌이라면 Angura나 Vue.js에서도 사용할 수 있을 것 같고,
node.js의 서버 사이드 렌더링에서도 좋을 것 같습니다!
(시험하지 않았지만)

참고

Get Sass and Font Awesome up and running on your Create React App in 5 minutes