アイコンに関するライブラリ選定について

[kagomen]

アイコン類をどうするか？

現状、ABOUTセクションにてGitHubのロゴしか使用予定がないのですが、

• 今後メニューなどが増えたときに必要になるかも？
• ライブラリを使ってみたい！

といった理由で、ライブラリの導入を検討しています。

ライブラリたくさんありすぎて、何を選べばいいかわからない

Next.jsがサポートしてるライブラリは、next.config.jsで設定すると良い感じに最適化してくれるらしい。

参考: optimizePackageImports -Next.js

なのでNext.jsがサポートしてるライブラリから選ぼうかな、と。

関連するイシュー

#56

[kagomen]

optimizePackageImports -Next.js
上記のページで、アイコンに関するライブラリと思われるものを抜粋

• lucide
• heroicons
• mui
• tabler
• react-icons

ですかね

[kagomen]

• lucide

  • アイコンの数1447種類
  • デザインに癖あり
  • 

• heroicons

  • tailwindのクラス指定が使える！
    • Tailwindの開発者が開発したらしい
  • アイコンの数288種類しかない
  • 肝心のGitHubのアイコンがなかった！→却下

• Material UI

  • Googleのマテリアルデザインをベースに開発されたReact向けのライブラリ
    • ずっとGoogleが開発してるんだと思ってた！
  • アイコンの種類2100以上
  • デザインの安定感
  • 

• tabler

  • アイコンの数4564種類
  • デザインに癖あり（lucideと似てる、これが流行りなのか）
  • 

• react-icons

  • あらゆるアイコンがある
  • この中から選ぶのも大変……！

[kagomen]

気になった記事（時間あるときに読みたい）
こんにちはMUI！ 新しくなったMaterial UI v5 -Zenn
React向けUIコンポーネントライブラリ、Material UI(v4)の紹介 -Zenn

[kazzyfrog]

他に使うとしたら、
ダークモードの月と太陽とか、X（Twitter）のアイコンもあったので、Material Icon良さそうですね！