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

本手順は、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 を使って必要なものをインストールする方針に変更

解決

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

import UIkit from 'uikit';  
import Icons from 'uikit/dist/js/uikit-icons';  
...  
UIkit.use(Icons);  
  1. 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>  
        );  
    }  
...  

参考