MENU
WordPressの使い方/カスタマイズ/Tips/コラム的な事を徒然と。
WPtips-WordPressのカスタマイズTips集-
  • プライバシーポリシー
  • About
WPtips-WordPressのカスタマイズTips集-

Gutenbergでreact-fontawesomeを使う方法

2018 12/07
カスタマイズ
2018.12.05 2018.12.07
Gutenbergでreact-fontawesomeを使う方法

Gutenbergでブロックを作る時にfontawesomeを使う事があると思います。
調べてみると、Reactでfontawesomeを使う方法が載っていたので、折角なのでreact-fontawesomeを使ってみることにしました。

目次

react-fontawesomeを開発環境にインストールする

インストール方法はHow to Install and UseやGitHubのreact-fontawesomeーInstallationに記載されています。

詳細は上記リンク先を御覧ください。

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

フリーのSVGアイコンは他にも、brandsとregularがあるので、それを使いたい場合は下記もインストールする必要があります。

$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save @fortawesome/free-regular-svg-icons

react-fontawesomeを使うにあたって参考にしたサイトがfontawesomeの公式サイトです。

日本語ではreact-fontawesomeを使ってみるが詳しいと思います。

Gutenbergでreact-fontawesomeを使う場合

Gutenbergでreact-fontawesomeを使う場合
Gutenbergでブロックを作成する時は、恐らくブロックを作成するファイル(私の場合はblock.js)に記載することになると思います。

ファイル内の上位に下記を記述しています。

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStar,faStarHalfAlt,faStarAndCrescent,faStarOfLife } from '@fortawesome/free-solid-svg-icons'

必要なSVGのみ読み込む

react-fontawesomeの良いところは、必要なアイコンのみ使用するところです。

例えば、評価の星をfontawesomeで表示する場合は、node_modules/@fortawesome/free-solid-svg-iconsフォルダ内の中から使用したSVGが書かれたjsファイルのファイル名を【import{}】内に記述します。

faStarHalfAlt.jsだったら、faStarHalfAltの部分を記述します。
使用したいSVGをコンマ区切りで記述します。

import { faStar,faStarHalfAlt,faStarAndCrescent,faStarOfLife } from '@fortawesome/free-solid-svg-icons'

React内でfontawesomeを使用する方法

次に実際にReact内でfontawesomeを使用する方法ですが、下記のように変数に入れて使用しています。

const starfull = <FontAwesomeIcon icon="star" >;
const star0 = <FontAwesomeIcon icon={['far', 'star']} >;
const starhalf = <FontAwesomeIcon icon="star-half-alt" >;

ここで注意したいのが、記述方法です。

SVGが書かれているjsファイル名を開いて、例えばfaStarだった場合はfaStar.jsを開いて、prefixとiconNameの箇所に注目します。

var prefix = 'fas';
var iconName = 'star';
<FontAwesomeIcon icon="iconNameを記述する" >

上記のicon=””にfaStar.jsファイル内に書かれているiconNameを記述します。

使用したいSVGによってprefixが異なる

solidとbrandsとregularをインストールした場合、prefixの指定が必要になります。

prefixを記述しない場合は、デフォルトで【fas】となるようですが、使用したいSVGがregularやbrandsのフォルダに格納されている場合は、もう少し詳しく書かなければなりません。

下記のように【prefix】と【iconName】を書くことになります。

const starfull = <FontAwesomeIcon icon="{['fas', 'star']}" >;

例えば、星の枠だけのSVGを使いたい場合は、free-regular-svg-iconsフォルダ内のfaStar.jsになるので、faStar.jsのファイル内を【prefix】と【iconName】の部分を見ると、

var prefix = 'far';
var iconName = 'star';

とあります。
free-regular-svg-iconsフォルダ内のSVGを使う場合は、prefixの部分をfarと記述します。

const star0 = <FontAwesomeIcon icon={['far', 'star']} >;

free-solid-svg-icons内のSVGを使いたい場合は、【prefixがfas】
free-regular-svg-icons内のSVGを使いたい場合は、【prefixがfar】
free-brands-svg-icons内のSVGを使いたい場合は、【prefixがfab】

Gutenbergの関連記事

  • カテゴリーとタグのトップページをGutenbergで作り込む方法
  • GutenbergはClassic Editor(クラッシックエディター)を超えられるのか?
  • Gutenbergでブロックをブロックカテゴリーで管理する方法
  • Gutenbergでreact-fontawesomeを使う方法
  • Gutenberg の次期フェーズについて

今売れているプログラミングの本

  • 1位Python 1年生 体験してわかる...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
  • 2位Python2年生 データ分析のし...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
  • 3位Python2年生 スクレイピング...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
  • 4位スッキリわかるJava入門(実...
    中山清喬 インプレスBKSCPN_【bookーfestivalーthr】 スッキリ ワカル ジャバ ニュウモン ナカヤマ,キヨ...
  • 5位現場で使える!pandasデータ...
    機械学習エンジニア&データサイエンティスト必携! 初学者でもpandasによる前処理手法がわかる 【本書...

今売れているデザイン本

  • 1位1冊ですべて身につくHTML & C...
    Mana SBクリエイティブイッサツデスベテミニツクエイチティーエムエルアンドシーエスエストウェブデザイ...
  • 2位沈黙のWebライティング ーWeb...
    ※本書は固定レイアウト型の電子版です 【SEOのためのライティング教本の決定版! 「成果が上がる」文章...
  • 3位UIデザインの教科書[新版] ...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
  • 4位大人女子デザイン 女性の心を...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
  • 5位Adobe XDではじめるWebデザイ...
    【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライト...
カスタマイズ
Gutenberg
  • Gutenbergでブロックをブロックカテゴリーで管理する方法 Gutenbergでブロックをブロックカテゴリーで管理する方法
  • GutenbergはClassic Editor(クラッシックエディター)を超えられるのか?

この記事を書いた人

奏音桃のアバター 奏音桃

WordPress1X歴のテーマ開発者がWordPressの有料テーマを購入したのがキッカケで、WordPressのカスタマイズTipsを纏めています。

関連記事

  • Gutenbergでブロックカテゴリーを作成する方法
    Gutenbergでブロックをブロックカテゴリーで管理する方法
    2018.12.04
  • WordPressで回遊率を高めるタグ関連記事を出力するカスタマイズ
    WordPressで回遊率を高めるタグ関連記事を出力するカスタマイズ
    2018.08.13
  • WordPressのテーマやプラグイン移行時に、メタディスクリプションを一括移行する方法
    WordPressのテーマやプラグイン移行時に、メタディスクリプションを一括移行する方法
    2019.04.26
  • dockerでGutenbergのブロック開発の環境を整える
    dockerでGutenbergのブロック開発の環境を整える
    2018.12.08
  • post_thumbnail_htmlフックを使って、画像周りを一括管理する方法
    post_thumbnail_htmlフックを使って、画像周りを一括管理する方法
    2019.04.23

コメント

コメントを残す コメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

  1. ホーム
  2. カスタマイズ
  3. Gutenbergでreact-fontawesomeを使う方法
人気記事
  • Gutenbergでreact-fontawesomeを使う方法
    WordPressのテーマやプラグイン移行時に、メタディスクリプションを一括移行する方法
    2019/04/26
    カスタマイズ
  • Gutenbergでreact-fontawesomeを使う方法
    Gutenbergでreact-fontawesomeを使う方法
    2018/12/05
    カスタマイズ
  • Gutenbergでreact-fontawesomeを使う方法
    WordPressで回遊率を高めるタグ関連記事を出力するカスタマイズ
    2018/08/13
    カスタマイズ
  • Gutenbergでreact-fontawesomeを使う方法
    post_thumbnail_htmlフックを使って、画像周りを一括管理する方法
    2019/04/23
    カスタマイズ
  • Gutenbergでreact-fontawesomeを使う方法
    dockerでGutenbergのブロック開発の環境を整える
    2018/12/08
    カスタマイズ
New Entry
  • WordPressの有料テーマ【JIN】から【SWELL】に移行した理由
    WordPressの有料テーマ【JIN】から【SWELL】に移行した理由
    2020.06.17
    コラム
  • カテゴリーとタグのトップページをGutenbergで作り込む方法
    カテゴリーとタグのトップページをGutenbergで作り込む方法
    2020.06.16
    【SWELLテーマ】カスタマイズ
  • WordPressのテーマやプラグイン移行時に、メタディスクリプションを一括移行する方法
    WordPressのテーマやプラグイン移行時に、メタディスクリプションを一括移行する方法
    2019.04.26
    カスタマイズ
  • WordPressのテーマ【JIN】に画像読み込み遅延echo.jsを導入する
    WordPressのテーマ【JIN】に画像読み込み遅延echo.jsを導入する
    2019.04.24
    【JINテーマ】カスタマイズ
  • post_thumbnail_htmlフックを使って、画像周りを一括管理する方法
    post_thumbnail_htmlフックを使って、画像周りを一括管理する方法
    2019.04.23
    カスタマイズ
Category
  • 【JINテーマ】カスタマイズ(5)
  • 【SWELLテーマ】カスタマイズ(1)
  • カスタマイズ(6)
  • コラム(7)
Page
  • About
  • プライバシーポリシー
Archive

© 2020 WPtips.

目次
閉じる