概要

Font Awesomeを利用してアイコンの表示を行った。
適用するプロパティに少し癖があったのでメモ。

この時点のソース

Font Awesomeの確認

今回はハートを使いたかったのでそちらを確認する。確認すべきはスタイルとunicode。

Font Awesome Heart Solid

同じunicodef004でも、solidとregularで見え方が違う。以下はRegular

ソース

CDNから読み込み

まずはFont Awesomeを使えるようにCDNから読み込む設定を追加

pages/trpg-manual/index.tsx

const Home: NextPage = () => {
  return (
    <div className="container">
      <Head>
        <title>僕の私のTRPG説明書</title>
+        <link
+          rel="stylesheet"
+          href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"
+          integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V"
+          crossOrigin="anonymous"
+        />
      </Head>

Konvaで利用

konvaのText要素に指定する。再利用可能な形にするためオブジェクトにしている。

Font Family 設定

components/organisms/trpg-manual/ImageArea.tsx

  const family = {
    gothic:
      '"Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif',
    serif:
      '"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif',
+    fontawesome: '"Font Awesome 5 Free", "Font Awesome 5 Brands"',
  }

Font Weight設定

components/organisms/trpg-manual/ImageArea.tsx

  const faWeight = { solid: '900', regular: '400', brands: '400', light: '300' }

unicode設定

\u + unicodeの形で指定する

components/organisms/trpg-manual/ImageArea.tsx

  const faUnicode = { heart: '\uf004', check: '\uf00c' }

Text要素で利用

FontWeihtはfontStyleというプロパティに設定するので注意。

components/organisms/trpg-manual/ImageArea.tsx

import { Stage, Layer, Rect, Text, Ellipse } from 'react-konva'

// 省略

        <Text
          x={x}
          y={y}
          width={inputWidth}
          align="left"
          text={faUnicode.heart}
          fill={sheet.heartColor}
          fontFamily={family.fontawesome}
+          fontStyle={faWeight.solid}
          fontSize={60}
        />

参考

Font Awesome の使い方（ver5.9以降）
Konva
Font Awesome Heart Regular
Font Awesome Heart Solid