UikitとFontAwesomeをNext.js(React.js)上で動くようにする
7288 ワード
本手順は、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>
);
}
...
参考
Author And Source
この問題について(UikitとFontAwesomeをNext.js(React.js)上で動くようにする), 我々は、より多くの情報をここで見つけました https://qiita.com/MewW6m/items/d362a43e6de5643043ff著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .