FontAwesomeをreactで使うためにreact-fontawesomeを入れる(トグル≒DOMの書き換えが起こる要素にiconを入れる時のメモ)

これについて

表題の通り。雑で申し訳ない。

FontAwesome公式の手順でjsをバンドルするやり方でFontAwesomeを入れたら、DOM書き換え時に対応しなくなったので、react-fontawesomeを使ったときの手順メモです。

前提・準備

導入

パッケージマネージャがnpmの場合

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

パッケージマネージャがyarnの場合

$ yarn add @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons

実装

fontawesome準備編

一番親のjs/jsxファイルに(例:app.js, index.jsx　等)の先頭に追記

import ReactDOM from 'react-dom';
import { library } from '@fortawesome/fontawesome-svg-core'; //fontawesomeのコアファイル
import { fab } from '@fortawesome/free-brands-svg-icons'; //fontawesomeのbrandアイコンのインポート
import { fas } from '@fortawesome/free-solid-svg-icons'; //fontawesomeのsolidアイコンのインポート
import { far } from '@fortawesome/free-regular-svg-icons'; //fontawesomeのregularアイコンのインポート

library.add(fab, fas, far); //他のコンポーネントから簡単に呼び出せるようにするための登録処理？

アイコンを表示したいコンポーネントのjs/jsxファイル先頭に追記

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

トグル&fontawesome表示編

表示

表示はfontawesome公式のclass名をarrayでFontAwesomeIconコンポーネントにiconのpropに渡す

htmlコードの欄に<i class="fas minus-circle"></i>と書いてたら

<FontAwesomeIcon icon={['fas', 'minus-circle']} />

というallayをiconにpropを渡すよう書くと表示。

Githubのアイコンなら、<i class="fab fa-github"></i>なので、

<FontAwesomeIcon icon={['fab', 'github']} />

となる。

トグル

今回はcomponent.jsxというjsxファイル内のコンポーネントにある、DemandFormとSwitchButtonという関数でコンポーネントを書き換える(もちろんこれは後でさっきの親のjsかjsxファイルにimportしてるようなファイルね)。クラスにFormEnableというトグルのboolを管理するstateを宣言しておいて、buttonのonclickでsetStateをstateの中身に合わせてトグルする。各書き換え予定の要素、DemandFormとSwitchButtonにはthis.state.FormEnableの値をpropで送る。

以上実装して、最終的にはこうなった。

component.jsx

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

export default class Input extends React.Component{
    constructor(props){
        super(props);
        this.state = {FormEnable:false};
    }

    render(){
        return(
            <div>
                <div>
                    <button onClick={() => this.setState(this.state.FormEnable?{FormEnable:false}:{FormEnable:true})}>
                        {SwitchButton(this.state.FormEnable)}
                    </button>
                </div>
                {DemandForm(this.state.FormEnable)}
            </div>
        )
    }
}

function SwitchButton(form_enable){
    var text = "";
    var icon = [];
    if(form_enable){
        text = "閉じる";
        icon = ['fas', 'minus-circle'];
    }else{
        text = "追加";
        icon = ['fas', 'plus-circle']
    }
    return (
        <div>
            <FontAwesomeIcon icon={icon} />{text}
        </div>
    )
}

function DemandForm (form_enable) {
    if(form_enable){
        return (
            <div className="column is-full">
                <div>Form enabled</div>
                <input class="input" type="text" placeholder="0" />
            </div>
        )
    }else{
        return (
            <div className="column is-full">
                Form disabled
            </div>
        )
    }
}

使用例

P.S.

雑すぎるし、僕もフロント技術は初心者なのに、フロント系の雑な記事によくブチ切れておきながらこんな記事を上げてしまって申し訳ないので、ここがわからないという初心者の方いたらコメントください。そこの部分加筆します。