アイコン沼からの生還

はじめに：なぜこのパッケージを作ったのか

突然ですが、Composerパッケージを作りました。 xylph-official/xylph-icons といいます。 Laravel用のアイコンパッケージです。

「え、アイコンパッケージなんて山ほどあるじゃん」と思いましたよね。私もそう思います。 Font Awesome、Heroicons、Feather、Material Icons、Phosphor、Lucide、Tabler... 選択肢は無限にあります。なのに、なぜわざわざ新しいパッケージを？

答えは簡単です。「後から変えたくなる」からです。

アイコンを選ぶとき、「これだ！」と思って実装しますよね。 でも1週間後、「やっぱり線だけのアイコンにしたい」と思う。 1ヶ月後、「もっと太い方がいいかも」と思う。 リリース直前、デザイナーから「全体的にもう少し柔らかい印象に」と言われる。

そのたびに何が起きるか？ 全ファイルgrep、手動置換、動作確認、レビュー、デプロイ。 「home」を「home-outline」に変えるだけで、半日が溶ける。 これを何度か経験すると、人は悟ります。「アイコン選びは呪いだ」と。

このパッケージは、その呪いを解くために生まれました。 1,234種類のアイコン × 6種類のバリエーション = 7,404通りのSVGが、 たった1つの設定で切り替え可能。コード変更ゼロ。grep不要。

第1章：沼の入口

あなたは今、アプリを作っています。ナビゲーションに「ホーム」ボタンを置きたい。 簡単な話です。「home」アイコンを探すだけ。5分で終わる。そう思っていました。

Font Awesome を開きます。「home」で検索。あれ、10種類以上ある。 「home」「house」「house-chimney」「house-user」...どれだ？ とりあえず一番シンプルなやつを選びます。貼り付けます。 「...なんか違う」

Heroicons も見てみます。24x24と20x20がある。outline と solid がある。 どっちがいい？ solid は重すぎる気がする。でも outline は線が細すぎる気もする。 「...なんか違う」

Feather Icons、Material Icons、Phosphor Icons、Lucide、Tabler Icons... 気づいたら2時間が経過しています。ブラウザのタブは47個開いています。 目は乾き、肩は凝り、そして心には虚無が広がっています。

「home」というたった4文字のために、あなたの人生の2時間が消えました。
これが、アイコン沼です。

第2章：同じUIなのに、全然違う

同じナビゲーション、同じ配置。なのに、アイコンのスタイルひとつで「なんか違う」が生まれる。bold-duotone、linear、bold、broken——それぞれに正解があるはずなのに、どれを選んでも何かが足りない気がする。そんな経験、ありませんか？

「結局、どれが正解なんですか？」——もしそう思われたなら、大変恐縮ですが、その問い自体が罠なのです。正解は、アプリが育つ中で見えてくるもの。最初から決め打ちする必要はないのです。というより、決め打ちしてはいけないのです。

第3章：解放の瞬間

さて、ここからが本番です。下のボタンを押してみてください。

...押しましたか？ 全部のアイコンが、一瞬で変わりましたよね。 これ、コードの変更は0行です。CSSの変更も0行。 やったことは「variantを変える」という、たった1つの操作だけ。

従来のアイコン運用では、デザインを変えたくなったら全ファイルをgrepして、 一つ一つ手作業で置換して、抜け漏れがないか確認して、 テストして、レビューして、デプロイして...という地獄が待っていました。 その地獄から、あなたは今、解放されました。

導入方法（驚くほど簡単）

ここまで読んでいただいて、大変恐縮なのですが...導入は本当に簡単です。 あまりに簡単すぎて申し訳ない気持ちすらあります。

composer require xylph-official/xylph-icons

<!-- 基本形：typeでアイコン名を指定 -->
<x-i type="home" class="w-6 h-6" />

<!-- variantを個別に指定したい場合 -->
<x-i type="home" variant="linear" class="w-6 h-6" />

<!-- Tailwindのクラスで色やサイズを自由に -->
<x-i type="heart" class="w-8 h-8 text-red-500" />

# デフォルトは bold-duotone
# 以下のように変更すると、アプリ全体のアイコンが変わる
ICON_DEFAULT_STYLE=linear

// 6種類のvariantから選べます
$variants = [
    'bold-duotone',  // 2色使いでリッチな印象（デフォルト）
    'bold',          // 塗りつぶしで力強い印象
    'broken',        // 途切れ線で軽やかな印象
    'line-duotone',  // 線＋2色で繊細かつリッチ
    'linear',        // 線のみでミニマルな印象
    'outline',       // アウトラインで繊細な印象
];

補足：このデモのデフォルト設定について

このプロジェクトでは bold-duotone をデフォルトに設定しています。 なぜか？ 私が好きだからです。それ以上の理由はありません。

「いや、ちゃんとした理由があるんでしょ？」と思われるかもしれません。ありません。 強いて言えば、2色使いの立体感が好きなんです。でもそれって結局「好き」じゃないですか。 デザインシステムの選定理由として「好きだから」は弱い？ いいえ、最強です。 なぜなら、好きじゃないものを毎日見続けるのは拷問だからです。

xylph-icons には6種類のvariantがありますが、どれが「正解」かは存在しません。 あなたのプロジェクト、あなたの好み、あなたのユーザーに合わせて選んでください。 大丈夫、後から変えられます。それがこのパッケージの存在意義なので。

Xylph シリーズについて

Xylph（シルフ）は「変幻自在」をテーマにしたオープンソースの総合WEBフレームワークです。 xylph-icons はその第一弾。アイコンという小さな要素から、「後から変えられる」という設計思想を体現しています。

今後も、同じ思想に基づいたパッケージを順次公開予定です。 「一度決めたら変えられない」という呪縛から、開発者を解放するために。

続報を受け取る