Phoenix (関数型プログラミング言語 Elixir で書かれた Web 開発フレームワーク) で heroicons を使ってみます。
Phoenix
LiveView で有名な Web 開発フレームワークです。
執筆時点での Phoenix のバージョンは 1.7.9 です。
heroicons（公式）
Tailwind CSS の製作者たちによって作られた SVG アイコン。
公式の使用方法
公式の使用方法として README に三つ挙げられています。
- 必要な SVG アイコンのソースコードを heroicons.com からコピーし、インラインSVGとして利用
- React ライブラリを通じて利用
- Vue ライブラリを通じて利用
以上の通り、公式のドキュメントによると、React も Vue も使わない人はアイコンのソースコードを直接コピーして使ってくださいとのことです。
では、Phoenixアプリではどうしたら良いのでしょうか。まずは Elixir パッケージを探してみます。
heroicons 関連の Elixir パッケージ
Hex で検索すると複数見つかりますが、執筆時点でダウンロード数が最も多いのは heroicons_elixir パッケージでした。
ですので、それらパッケージのうちのどれかを利用することができそうです。
一切自分でコンポーネントを書きたくない方は Phoenix UI に任せるという手もあります。
Phoenix 1.7.x で heroicons がどう使われているか
heroicons は Phoenix のバージョン 1.7.0 から導入されたようですが、パッチバージョンが上がるにつれて仕様が随分変わりました。
もしお使いの Phoenix のバージョンが古い場合は最新版への差分を確認すると何か手掛かりが得られるかもしれません。
1.7.0
この時点では、heroicons_elixir が依存パッケージとして mix.exs に追加されています。
heroicons が Heroicons モジュールの関数コンポーネントして利用できるようになっています。
<Heroicons.x_mark solid class="h-5 w-5 stroke-current" />
1.7.1
このバージョンから heroicons_elixir パッケージが取り除かれ、代わりに heroicons のアイコンのソースコードがプロジェクトの中に含まれるようになりました。この時点でのアイコンの置き場所は、priv/hero_icons でした。
併せてコンポーネントの実装が代わり、.icon (PiyoPiyoWeb.CoreComponents.icon) 関数コンポーネントになりました。
<.icon name="hero-x-mark-solid" class="w-5 h-5" />
1.7.2
アイコンの置き場所は、priv/hero_icons から assets/vendor/heroicons に変更になりました。
1.7.3 以降
その後は大きな変更はないようです。
Phoenix で heroicons を更新する方法
heroicons は第三者パッケージでありいつどのような変更が起きるか分かりません。
万一、将来アイコンを更新する必要がある場合に備え、Phoenix チームが親切にもスクリプトを用意してくれています。
export HERO_VSN="2.0.16" ; \
curl -L "https://github.com/tailwindlabs/heroicons/archive/refs/tags/v${HERO_VSN}.tar.gz" | \
tar -xvz --strip-components=1 heroicons-${HERO_VSN}/optimized
Elixir Forum での議論
Phoenix 1.7.1 で heroicons_elixir パッケージが取り除かれた際には、賛否両論がありました。
José Valim さん (Elixir 言語作者) の見解Í
意訳します。(小生の思い込みが含まれている可能性もありますので予めご了承ください)
- シンプルイズベスト
- 非公式の heroicons パッケージを作ってメンテナンスするに値するメリットはあるのか
- 以前他のフレームワークでWEB開発していた時にアイコンの管理で痛い目にあった
さいごに
heroicons を Phoenix アプリで利用するにあたって色んな選択肢があることがわかりました。
Phoenix チームがフレームワークにアイコンを含めてくれているので、特にこだわりがなければそれを使うのが一番楽そうです。
