React + Lucideでいいかんじのアイコンを実装する！

実装例（センスなし）

私のセンスがなさすぎるのですが、それでもかなりキャッチーで良い感じのUIが実装できてますね！！

Lucideとは

Lucideはオープンソースのアイコンライブラリで、デジタルおよび非デジタルプロジェクトでアイコンやシンボルを表示するための1000以上のベクター(svg)ファイルを提供します。 このライブラリは、デザイナーや開発者がプロジェクトにアイコンを簡単に組み込めるようにすることを目的としており、プロジェクトでこれらのアイコンを簡単に使用できるように、いくつかの公式パッケージを提供しています。

OSSのアイコンライブラリです！有名なFont Awesomeと比較すると、

• OSSであること
• JSXで書けること
• ユニークなアイコンがある

などが嬉しいポイントです！！！

やってみた

やっていきます

Vite + Reactプロジェクトの用意

以前投稿した以下の記事の通り、環境を作成します。

pnpmでもnpmでもどちらでも大丈夫だと思います。
今回私はpnpmを使用します！

Reactプロジェクトの動作確認

http://localhost:5173/ にアクセスします

良い感じですね。

lucideライブラリのインストール

公式のガイドを参考にインストールしていきます。

インストールしてインポートするだけで使用できそうです。軽量なインターフェースですね。

やってみましょう！

> pnpm install lucide-react
+
Progress: resolved 223, reused 182, downloaded 1, added 1, done

dependencies:
+ lucide-react 0.455.0

Done in 32.1s

インストールが完了したので、App.tsxを編集してみます。

src/App.tsx

import { Beer, Trophy } from 'lucide-react';

// Usage
const App = () => {
  return <>
    <Beer color="orange" size={48} />
    <Beer color="orange" size={48} />
    <Trophy color="orange" size={48} />
    <Beer color="orange" size={48} />
    <Beer color="orange" size={48} />
  </>;
};

export default App;

いでよビール！！！

良い感じですね！！！
こんな感じで、Lucideを使用すると簡単にかわいいアイコンを実装することができます。

もう少し遊ぶ

せっかくなので、fillやグラデーションを実装してもう少しだけ豪華にしてみます。
LucideコンポーネントはSVGをoverrideしており、SVGのアトリビュートを受け取ることができます。

Claudeと少し会話して以下のようなコードを作ってみました。

src/App.tsx

import { Beer, Trophy } from 'lucide-react';

// Usage
const App = () => {
  return <>
    <Beer color="orange" size={48} />
    <Beer color="orange" size={48} />
    <svg width="48" height="48">
      <defs>
        <linearGradient id="trophyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#FFF5D4" />
          <stop offset="20%" stopColor="#FFD700" />
          <stop offset="40%" stopColor="#FFED4A" />
          <stop offset="60%" stopColor="#FFB800" />
          <stop offset="80%" stopColor="#FFD700" />
          <stop offset="100%" stopColor="#FFF5D4" />
        </linearGradient>
        <linearGradient id="highlightGradient" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#FFFFFF" stopOpacity="0.8" />
          <stop offset="100%" stopColor="#FFD700" stopOpacity="0" />
        </linearGradient>
        <filter id="lighting1">
          <feDiffuseLighting in="SourceGraphic" lightingColor="#FFE5B4" surfaceScale="5" diffuseConstant="1.5">
            <fePointLight x="24" y="10" z="15" />
          </feDiffuseLighting>
          <feSpecularLighting in="SourceGraphic" lightingColor="#FFFFFF" surfaceScale="5" specularConstant="1.5" specularExponent="20">
            <fePointLight x="24" y="5" z="20" />
          </feSpecularLighting>
          <feComposite in="SourceGraphic" operator="arithmetic" k1="1" k2="0.8" k3="0.2" k4="0" />
          <feComponentTransfer>
            <feFuncR type="linear" slope="1.2" intercept="-0.1" />
            <feFuncG type="linear" slope="1.2" intercept="-0.1" />
            <feFuncB type="linear" slope="1.2" intercept="-0.1" />
          </feComponentTransfer>
        </filter>
      </defs>
      <Trophy
        color="orange"
        fill="url(#trophyGradient)"
        size={48}
      />
    </svg>
    <Beer color="orange" size={48} />
    <Beer color="orange" size={48} />
  </>;
};

export default App;

自分でも何が何やらぶっちゃけわかってない
表示するとこんな感じです

トロフィーが黄金に！！！（台座が真っ白・・・）
このように、colorやfillをうまく使うと、色々な表現ができて楽しそうです（figmaでやってsvgエクスポートしたほうが速いけど）。

おわりに

ふと目に入っておもしろそうだなーと思った「Lucide」を使ってみました。
svgのおもわぬ勉強になり、どんなライブラリも手を出してみるものだなーと感じました。

デザインセンスが皆無な人間なりに、結構楽しげなUIが作れてよいなーと思います！