バージョン

"svgtofont": "4.1.1"

https://github.com/jaywcjlove/svgtofont

やりたいこと

自分が開発しているプロジェクトでは、モノレポの構成でアプリが開発されています。現状は React のコンポーネントとして svg 画像を表示していたんですが、それをフォントとして表示したい。具体的にどのようにするかというと、Google の Material Icons のように

<span class='material-symbols-outlined'>home</span>

こうすると、家のアイコンが表示されるように。

そしてこれをアプリとは別のパッケージに分割して、新たに svg 画像からフォントファイルを出力するパッケージを作成し、それをアプリをのパッケージの方から使用するようにします。

今回はアプリパッケージからフォントを使用する部分の説明は省きます。svg 画像からフォントファイルを出力する部分を解説します。

やり方

package.json の作成

{
  "name": "@package/custom-icons",
  "version": "1.0.0",
  "scripts": {
    "build": "svgtofont --sources ./svg --output ./dist",
  },
  "devDependencies": {
    "svgtofont": "^4.1.1"
  }
}

入力ファイルの作成

今回は./svgディレクトリを入力、./distディレクトリを出力とします。要するに、./svgディレクトリ配下に置かれた svg ファイルが、フォントファイルとして./distディレクトリ配下に生成されます。

フォントにしたい svg 画像ファイルを./svgディレクトリ配下に置きましょう。

これでやりたいことのほとんどが完成です。

設定ファイルの作成

もう少しカスタマイズしてみます。

https://github.com/jaywcjlove/svgtofont

リポジトリを見ながら設定ファイルを作成

{
  "fontName": "my-custom-icons",
  "css": false,
  "outSVGReact": false,
  "useNameAsUnicode": true,
  "className": "my-custom-icons"
}

fontName

この値を設定することで、出力されるフォントファイルの名前がmy-custom-icons.woff2みたいになります。

css, outSVGReact

デフォルトでは、フォントの確認プレビュー用の css ファイルも出力されます。それは必要ないのでfalseを設定しておきました。同じく react コンポーネントも必要ないです。

useNameAsUnicode

この値を true にすることで、Google の Maerial Icons のように

<span class='my-custom-icons'>svg画像のファイル名</span>

フォントを使うことができます。

className

<span class='my-custom-icons'>svg画像のファイル名</span>

ここで指定するクラスの名前も設定しておきましょう。

以上で全ての設定が完了です。

やってみる

パッケージ配下で

npm run build

./dist ディレクトリ配下にフォントファイルが出力されたら

備考

今回はwoff2ファイルのみが必要だったんですが、svgtofontの仕様上woffファイルやttfファイルも出力されてしまうようです。まぁ別にええけど。

最後に

リポジトリの README の英語読むのって結構集中力必要よね

では

Bye