UikitとFontAwesomeをNext.js(React.js)上で動くようにする #React

本手順は、Next.js上で、UikitとFontAwesomeを動くようにする手順です。

前提

ツール	バージョン	ツール	バージョン
React.js	16.13.1	Next.js	9.4.4
uikit	3.5.5	react-icons	3.10.1

背景

もともと以下のようなhtmlで、の中でcdnを使用してUikitとFontAwesomeを呼び出していた。
Next.js (React.js)に移行した途端に、uikitのアイコンとFontAwesomeのアイコンが読み込まれなかった。

  <!--UiKit-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.1/css/uikit.min.css" integrity="***" crossorigin="anonymous" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.1/js/uikit.min.js" integrity="***" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.1/js/uikit-icons.min.js" integrity="***" crossorigin="anonymous"></script>
  <!--FontAwesome-->
  <script src="https://kit.fontawesome.com/1d615c07d9.js" crossorigin="anonymous"></script>
...
<!--FontAwesome-->
<i class="fas fa-user-shield fa-5x"></i>
<!--UiKit-->
<span uk-icon="icon: users" class="uk-margin-small-right uk-icon"></span>

原因

1. Reactで読み込むための指定方法は下記のようになるらしい (参考)

× <span uk-icon="icon: users" class="uk-margin-small-right uk-icon"></span>
○ <span data-uk-icon="icon: users" class="uk-margin-small-right uk-icon"></span>

2. そもそも、レンダー時にUikit, FontAwesome共にうまく読み込めていなかった。。
=> そもそもCDNを使うべきかは未検討だったため、いったんローカルでインストールする方法を模索。
=> npm install を使って必要なものをインストールする方針に変更

解決

uk-***のところをdata-uk-***に変更
UiKitの必要なものをインストールし、コードを修正 => uikit

$ npm install uikit

import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
...
UIkit.use(Icons);

FontAwesomeの必要なものをインストールし、コードを修正 => react-icons

$ npm install react-icons

import { IconContext } from "react-icons";
import { FaUserShield , FaGlobe, FaUsers  } from 'react-icons/fa';
...
    render() {
        return (
            <IconContext.Provider value={{ style: { fontSize: '5em' } }}>
            <div>
                <FaUserShield />  
                <FaGlobe />
                <FaUsers />
            </div>
        );
    }
...