React Iconsの使い方｜豊富なアイコンで見栄えの良いUIを作る

React アプリケーションでアイコンを使う時、どんな方法でやってますか？

「簡単にアイコンを追加したい」「デザインに統一感を持たせたい」「軽量で高品質なアイコンを使いたい」

こんなふうに思ったことはありませんか？

この記事では、React Icons ライブラリを使って、1万個以上のアイコンから必要なものを効率的に使う方法を詳しく解説します。初心者の方でも分かりやすいように、基本的な使い方から実践的なテクニックまで、具体的なコード例と一緒に説明していきますよ。

React Icons って何？

React Icons は、有名なアイコンライブラリを React コンポーネントとして使えるパッケージです。簡単に言うと、世界中で愛用されているアイコンセットを、Reactプロジェクトで簡単に使えるようにしたツールなんです。

React Icons の魅力的な特徴

React Icons を使うと、こんなにいいことがあります。

主な特徴

豊富なアイコンセット: 10,000個以上のアイコンが利用可能
統一された使い方: 全てのアイコンライブラリを同じ方法で使用
軽量設計: 使うアイコンだけがバンドルに含まれる
TypeScript対応: 型定義が完備されていて安心

含まれるアイコンライブラリ

どんなアイコンが使えるのか見てみましょう。

ライブラリ	プレフィックス	アイコン数	特徴
Ant Design Icons	Ai	700+	企業向けUIに最適
Bootstrap Icons	Bs	1,300+	シンプルで汎用的
Font Awesome	Fa	1,600+	最も人気の高いアイコンセット
Feather Icons	Fi	280+	軽量でミニマル
Heroicons	Hi	450+	Tailwind CSSと相性が良い
Material Design	Md	900+	Googleデザインガイドライン
React Icons	Ri	2,000+	オリジナルアイコンセット

結構たくさんありますよね。これだけあれば、どんなデザインにも合うアイコンが見つかりそうです。

インストールと基本設定

React Icons のインストールは本当に簡単です。

インストール方法

# npm を使用
npm install react-icons

# yarn を使用
yarn add react-icons

# pnpm を使用
pnpm add react-icons

コマンド一つでインストール完了です。特別な設定は必要ありません。

基本的なインポート方法

// 特定のアイコンをインポート
import { FaHeart, FaUser, FaStar } from 'react-icons/fa';
import { MdEmail, MdPhone, MdLocationOn } from 'react-icons/md';
import { BsDownload, BsUpload, BsShare } from 'react-icons/bs';

// 使用例
function App() {
  return (
    <div>
      <FaHeart />
      <MdEmail />
      <BsDownload />
    </div>
  );
}

このコードを見ると、アイコンを普通のReactコンポーネントと同じように使えることが分かりますね。 FaHeartは Font Awesome のハートアイコン、MdEmailは Material Design のメールアイコンという感じです。

効率的なインポートの方法

// ✅ 良い例: 必要なアイコンのみインポート
import { FaHeart } from 'react-icons/fa';

// ❌ 悪い例: 全体をインポート（バンドルサイズが大きくなる）
import * as FaIcons from 'react-icons/fa';

必要なアイコンだけをインポートすることで、アプリの読み込み速度を保つことができます。

利用可能なアイコンの確認

どんなアイコンが使えるのか、簡単に調べることができます。

アイコン検索の手順

公式サイトにアクセス: https://react-icons.github.io/react-icons/
検索ボックスでキーワード入力
気に入ったアイコンをクリック
インポート文をコピー

例えば、「heart」で検索してみましょう。

// 検索例: "heart" で検索した場合
import { 
  FaHeart,          // Font Awesome
  AiOutlineHeart,   // Ant Design
  BsHeart,          // Bootstrap
  MdFavorite,       // Material Design
  HiHeart           // Heroicons
} from 'react-icons/fa';

function HeartIcons() {
  return (
    <div className="heart-icons">
      <h3>様々なハートアイコン</h3>
      <div className="icon-grid">
        <div className="icon-item">
          <FaHeart />
          <span>Font Awesome</span>
        </div>
        <div className="icon-item">
          <AiOutlineHeart />
          <span>Ant Design</span>
        </div>
        <div className="icon-item">
          <BsHeart />
          <span>Bootstrap</span>
        </div>
        <div className="icon-item">
          <MdFavorite />
          <span>Material Design</span>
        </div>
        <div className="icon-item">
          <HiHeart />
          <span>Heroicons</span>
        </div>
      </div>
    </div>
  );
}

このコードを実行すると、同じ「ハート」でも、ライブラリごとに違うデザインのアイコンが表示されます。プロジェクトの雰囲気に合わせて選べるのが嬉しいですね。

基本的な使い方

React Icons の基本的な使用方法を一緒に学んでいきましょう。

シンプルなアイコン表示

最も基本的なアイコンの使用方法から始めます。

import React from 'react';
import { 
  FaHome, 
  FaUser, 
  FaCog, 
  FaEnvelope,
  FaPhone 
} from 'react-icons/fa';

function BasicIcons() {
  return (
    <div className="basic-icons">
      <h2>基本的なアイコン表示</h2>
      
      {/* そのまま表示 */}
      <div className="icon-row">
        <FaHome />
        <FaUser />
        <FaCog />
        <FaEnvelope />
        <FaPhone />
      </div>
      
      {/* テキストと組み合わせ */}
      <div className="icon-text-row">
        <span><FaHome /> ホーム</span>
        <span><FaUser /> プロフィール</span>
        <span><FaCog /> 設定</span>
        <span><FaEnvelope /> メール</span>
        <span><FaPhone /> 電話</span>
      </div>
    </div>
  );
}

このコードでは、まずアイコンだけを表示して、次にテキストと組み合わせて表示しています。アイコンと文字を組み合わせると、直感的で分かりやすいUIが作れますね。

アイコンのサイズ調整

アイコンのサイズは、いくつかの方法で調整できます。

import React from 'react';
import { FaStar } from 'react-icons/fa';

function IconSizes() {
  return (
    <div className="icon-sizes">
      <h2>アイコンサイズの調整</h2>
      
      {/* size プロパティを使用 */}
      <div className="size-props">
        <h3>size プロパティ</h3>
        <FaStar size={16} />
        <FaStar size={24} />
        <FaStar size={32} />
        <FaStar size={48} />
        <FaStar size={64} />
      </div>
      
      {/* CSS の font-size を使用 */}
      <div className="css-font-size">
        <h3>CSS font-size</h3>
        <FaStar style={{ fontSize: '1rem' }} />
        <FaStar style={{ fontSize: '1.5rem' }} />
        <FaStar style={{ fontSize: '2rem' }} />
        <FaStar style={{ fontSize: '3rem' }} />
        <FaStar style={{ fontSize: '4rem' }} />
      </div>
      
      {/* CSS クラスを使用 */}
      <div className="css-classes">
        <h3>CSS クラス</h3>
        <FaStar className="icon-small" />
        <FaStar className="icon-medium" />
        <FaStar className="icon-large" />
        <FaStar className="icon-xlarge" />
      </div>
    </div>
  );
}

sizeプロパティが一番簡単ですが、CSSを使う方法もあります。プロジェクト全体で統一したいなら、CSSクラスを使うのがおすすめです。

対応するCSS

/* アイコンサイズのCSS */
.icon-small {
  font-size: 1rem;
}

.icon-medium {
  font-size: 1.5rem;
}

.icon-large {
  font-size: 2rem;
}

.icon-xlarge {
  font-size: 3rem;
}

/* アイコンの基本スタイル */
.icon-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 1rem 0;
}

.icon-text-row {
  display: flex;
  gap: 2rem;
  align-items: center;
  margin: 1rem 0;
}

.icon-text-row span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

この CSS を使うことで、アイコンのレイアウトが整って見やすくなります。

アイコンの色とスタイル

アイコンの色やスタイルを自由にカスタマイズできます。

import React from 'react';
import { 
  FaHeart, 
  FaStar, 
  FaThumbsUp,
  FaExclamationTriangle,
  FaCheckCircle
} from 'react-icons/fa';

function IconStyles() {
  return (
    <div className="icon-styles">
      <h2>アイコンの色とスタイル</h2>
      
      {/* インラインスタイル */}
      <div className="inline-styles">
        <h3>インラインスタイル</h3>
        <FaHeart style={{ color: '#e74c3c', fontSize: '2rem' }} />
        <FaStar style={{ color: '#f39c12', fontSize: '2rem' }} />
        <FaThumbsUp style={{ color: '#27ae60', fontSize: '2rem' }} />
        <FaExclamationTriangle style={{ color: '#e67e22', fontSize: '2rem' }} />
        <FaCheckCircle style={{ color: '#2ecc71', fontSize: '2rem' }} />
      </div>
      
      {/* CSS クラスによるスタイル */}
      <div className="css-styles">
        <h3>CSS クラス</h3>
        <FaHeart className="icon-danger" />
        <FaStar className="icon-warning" />
        <FaThumbsUp className="icon-success" />
        <FaExclamationTriangle className="icon-info" />
        <FaCheckCircle className="icon-primary" />
      </div>
      
      {/* ホバーエフェクト */}
      <div className="hover-effects">
        <h3>ホバーエフェクト</h3>
        <FaHeart className="icon-hover" />
        <FaStar className="icon-hover" />
        <FaThumbsUp className="icon-hover" />
      </div>
      
      {/* アニメーション */}
      <div className="animated-icons">
        <h3>アニメーション</h3>
        <FaHeart className="icon-pulse" />
        <FaStar className="icon-rotate" />
        <FaThumbsUp className="icon-bounce" />
      </div>
    </div>
  );
}

インラインスタイルでも、CSSクラスでも、どちらでも色を変更できます。ホバーエフェクトやアニメーションを追加すると、ユーザーが操作していて楽しいUIになりますね。

対応するCSS

/* 色のスタイル */
.icon-danger {
  color: #e74c3c;
  font-size: 2rem;
}

.icon-warning {
  color: #f39c12;
  font-size: 2rem;
}

.icon-success {
  color: #27ae60;
  font-size: 2rem;
}

.icon-info {
  color: #3498db;
  font-size: 2rem;
}

.icon-primary {
  color: #9b59b6;
  font-size: 2rem;
}

/* ホバーエフェクト */
.icon-hover {
  font-size: 2rem;
  color: #7f8c8d;
  cursor: pointer;
  transition: all 0.3s ease;
}

.icon-hover:hover {
  color: #e74c3c;
  transform: scale(1.2);
}

/* アニメーション */
.icon-pulse {
  font-size: 2rem;
  color: #e74c3c;
  animation: pulse 2s infinite;
}

.icon-rotate {
  font-size: 2rem;
  color: #f39c12;
  animation: rotate 2s linear infinite;
}

.icon-bounce {
  font-size: 2rem;
  color: #27ae60;
  animation: bounce 1s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

このCSSを使うと、アイコンに色々な効果をつけることができます。

実用的なコンポーネント例

アイコンを使った実用的なコンポーネントを作成してみましょう。

import React, { useState } from 'react';
import { 
  FaEye, 
  FaEyeSlash, 
  FaUser, 
  FaLock,
  FaEnvelope,
  FaPhone,
  FaMapMarkerAlt,
  FaGithub,
  FaTwitter,
  FaLinkedin
} from 'react-icons/fa';

// パスワード表示切り替えコンポーネント
function PasswordInput({ value, onChange, placeholder }) {
  const [showPassword, setShowPassword] = useState(false);

  return (
    <div className="password-input">
      <FaLock className="input-icon" />
      <input
        type={showPassword ? 'text' : 'password'}
        value={value}
        onChange={onChange}
        placeholder={placeholder}
      />
      <button
        type="button"
        onClick={() => setShowPassword(!showPassword)}
        className="toggle-password"
      >
        {showPassword ? <FaEyeSlash /> : <FaEye />}
      </button>
    </div>
  );
}

このコンポーネントは、パスワード入力フィールドでよく見る「パスワードを表示/非表示する」機能です。アイコンがあることで、何ができるかが直感的に分かりますね。

// ソーシャルリンクコンポーネント
function SocialLinks({ links }) {
  const getIcon = (platform) => {
    switch (platform) {
      case 'github': return <FaGithub />;
      case 'twitter': return <FaTwitter />;
      case 'linkedin': return <FaLinkedin />;
      default: return null;
    }
  };

  return (
    <div className="social-links">
      {links.map((link, index) => (
        <a
          key={index}
          href={link.url}
          target="_blank"
          rel="noopener noreferrer"
          className={`social-link ${link.platform}`}
        >
          {getIcon(link.platform)}
        </a>
      ))}
    </div>
  );
}

このコンポーネントでは、プラットフォーム名に応じて適切なアイコンを表示しています。ソーシャルリンクは文字だけよりも、アイコンがあった方が圧倒的に分かりやすいです。

// 連絡先情報コンポーネント
function ContactInfo({ email, phone, address }) {
  return (
    <div className="contact-info">
      <div className="contact-item">
        <FaEnvelope className="contact-icon" />
        <span>{email}</span>
      </div>
      <div className="contact-item">
        <FaPhone className="contact-icon" />
        <span>{phone}</span>
      </div>
      <div className="contact-item">
        <FaMapMarkerAlt className="contact-icon" />
        <span>{address}</span>
      </div>
    </div>
  );
}

連絡先情報も、アイコンがあることで一目で何の情報かが分かります。

// 使用例
function PracticalExamples() {
  const [password, setPassword] = useState('');

  const socialLinks = [
    { platform: 'github', url: 'https://github.com/username' },
    { platform: 'twitter', url: 'https://twitter.com/username' },
    { platform: 'linkedin', url: 'https://linkedin.com/in/username' }
  ];

  return (
    <div className="practical-examples">
      <h2>実用的なコンポーネント例</h2>
      
      <div className="example-section">
        <h3>パスワード入力フィールド</h3>
        <PasswordInput
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="パスワードを入力"
        />
      </div>
      
      <div className="example-section">
        <h3>ソーシャルリンク</h3>
        <SocialLinks links={socialLinks} />
      </div>
      
      <div className="example-section">
        <h3>連絡先情報</h3>
        <ContactInfo
          email="example@email.com"
          phone="090-1234-5678"
          address="東京都渋谷区1-2-3"
        />
      </div>
    </div>
  );
}

実際に使ってみると、アイコンがあることでUIがとても分かりやすくなることが実感できると思います。

カスタマイズとスタイリング

React Icons をより効果的に使うためのカスタマイズ方法を学びましょう。

IconContext による一括設定

IconContext を使うと、複数のアイコンに共通の設定を適用できます。とても便利な機能なので、ぜひ覚えてくださいね。

import React from 'react';
import { IconContext } from 'react-icons';
import { 
  FaHome, 
  FaUser, 
  FaCog, 
  FaEnvelope,
  FaBell,
  FaHeart
} from 'react-icons/fa';

function IconContextExample() {
  return (
    <div className="icon-context-example">
      <h2>IconContext による一括設定</h2>
      
      {/* デフォルト設定 */}
      <div className="section">
        <h3>デフォルト設定</h3>
        <div className="icon-row">
          <FaHome />
          <FaUser />
          <FaCog />
          <FaEnvelope />
        </div>
      </div>
      
      {/* 一括で色とサイズを設定 */}
      <div className="section">
        <h3>一括設定（色・サイズ）</h3>
        <IconContext.Provider value={{ color: '#e74c3c', size: '2rem' }}>
          <div className="icon-row">
            <FaHome />
            <FaUser />
            <FaCog />
            <FaEnvelope />
          </div>
        </IconContext.Provider>
      </div>
      
      {/* クラス名を一括設定 */}
      <div className="section">
        <h3>クラス名一括設定</h3>
        <IconContext.Provider value={{ className: 'custom-icon' }}>
          <div className="icon-row">
            <FaHome />
            <FaUser />
            <FaCog />
            <FaEnvelope />
          </div>
        </IconContext.Provider>
      </div>
      
      {/* 複数の設定を組み合わせ */}
      <div className="section">
        <h3>複合設定</h3>
        <IconContext.Provider value={{ 
          color: '#27ae60', 
          size: '1.5rem',
          className: 'animated-icon',
          style: { marginRight: '1rem' }
        }}>
          <div className="icon-row">
            <FaBell />
            <FaHeart />
            <FaCog />
          </div>
        </IconContext.Provider>
      </div>
    </div>
  );
}

IconContext.Providerで囲んだ範囲の中のアイコンは、全て同じスタイルになります。個別にスタイルを設定する手間が省けて、とても効率的です。

対応するCSS

.custom-icon {
  color: #3498db;
  font-size: 2.5rem;
  transition: all 0.3s ease;
}

.custom-icon:hover {
  color: #2980b9;
  transform: scale(1.1);
}

.animated-icon {
  transition: all 0.3s ease;
}

.animated-icon:hover {
  transform: scale(1.2) rotate(10deg);
}

このCSSを使うことで、マウスを乗せた時の効果も統一できます。

テーマ別アイコンスタイル

テーマシステムと組み合わせて、統一感のあるアイコンスタイルを作れます。ダークモードとライトモードの切り替えなどで活用できますよ。

import React, { useState, createContext, useContext } from 'react';
import { IconContext } from 'react-icons';
import { 
  FaSun, 
  FaMoon, 
  FaHome, 
  FaUser, 
  FaCog,
  FaEnvelope,
  FaBell
} from 'react-icons/fa';

// テーマコンテキスト
const ThemeContext = createContext();

// テーマ設定
const themes = {
  light: {
    background: '#ffffff',
    text: '#333333',
    iconColor: '#666666',
    iconHoverColor: '#333333',
    primary: '#3498db'
  },
  dark: {
    background: '#2c3e50',
    text: '#ecf0f1',
    iconColor: '#bdc3c7',
    iconHoverColor: '#ecf0f1',
    primary: '#e74c3c'
  }
};

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, themes: themes[theme], toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

まず、テーマの設定とコンテキストを作ります。ライトテーマとダークテーマで、それぞれ色を変えています。

function ThemedIcons() {
  const { theme, themes: currentTheme, toggleTheme } = useContext(ThemeContext);

  return (
    <div 
      className="themed-icons"
      style={{ 
        backgroundColor: currentTheme.background,
        color: currentTheme.text,
        padding: '2rem',
        borderRadius: '8px'
      }}
    >
      <div className="theme-header">
        <h2>テーマ別アイコンスタイル</h2>
        <button onClick={toggleTheme} className="theme-toggle">
          {theme === 'light' ? <FaMoon /> : <FaSun />} 
          {theme === 'light' ? 'ダーク' : 'ライト'}モード
        </button>
      </div>

      <IconContext.Provider value={{ 
        color: currentTheme.iconColor,
        size: '1.5rem',
        className: 'themed-icon'
      }}>
        <div className="icon-navigation">
          <div className="nav-item">
            <FaHome />
            <span>ホーム</span>
          </div>
          <div className="nav-item">
            <FaUser />
            <span>プロフィール</span>
          </div>
          <div className="nav-item">
            <FaEnvelope />
            <span>メッセージ</span>
          </div>
          <div className="nav-item">
            <FaBell />
            <span>通知</span>
          </div>
          <div className="nav-item">
            <FaCog />
            <span>設定</span>
          </div>
        </div>
      </IconContext.Provider>
    </div>
  );
}

この部分では、選択されたテーマに応じてアイコンの色が変わります。ボタンを押すことで、ライトモードとダークモードを切り替えられます。

function ThemedIconsExample() {
  return (
    <ThemeProvider>
      <ThemedIcons />
    </ThemeProvider>
  );
}

実際に使う時は、このようにテーマプロバイダーで全体を囲みます。

対応するCSS

.themed-icons {
  transition: all 0.3s ease;
}

.theme-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.icon-navigation {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.nav-item:hover .themed-icon {
  transform: scale(1.2);
}

.themed-icon {
  transition: all 0.3s ease;
}

この CSS により、テーマが切り替わった時の滑らかなアニメーションが実現できます。

動的アイコンコンポーネント

状態に応じてアイコンを動的に変更するコンポーネントを作成できます。これができると、より高度なUIが作れるようになります。

import React, { useState } from 'react';
import { 
  FaHeart, 
  FaRegHeart,
  FaStar,
  FaRegStar,
  FaThumbsUp,
  FaRegThumbsUp,
  FaBookmark,
  FaRegBookmark,
  FaPlay,
  FaPause,
  FaVolumeUp,
  FaVolumeMute
} from 'react-icons/fa';

// いいねボタンコンポーネント
function LikeButton({ initialLiked = false, onLike }) {
  const [isLiked, setIsLiked] = useState(initialLiked);

  const handleClick = () => {
    setIsLiked(!isLiked);
    onLike && onLike(!isLiked);
  };

  return (
    <button 
      className={`like-button ${isLiked ? 'liked' : ''}`}
      onClick={handleClick}
    >
      {isLiked ? (
        <FaHeart className="icon-filled" />
      ) : (
        <FaRegHeart className="icon-outline" />
      )}
      <span>{isLiked ? 'いいね済み' : 'いいね'}</span>
    </button>
  );
}

いいねボタンでは、状態に応じて塗りつぶしのハートか、アウトラインのハートかを切り替えています。こういう細かい変化があると、ユーザーが操作している実感を得られますね。

// 星評価コンポーネント
function StarRating({ rating = 0, maxStars = 5, onChange }) {
  const [hoverRating, setHoverRating] = useState(0);

  const handleClick = (starIndex) => {
    onChange && onChange(starIndex);
  };

  return (
    <div className="star-rating">
      {[...Array(maxStars)].map((_, index) => {
        const starIndex = index + 1;
        const isFilled = starIndex <= (hoverRating || rating);

        return (
          <button
            key={index}
            className="star-button"
            onClick={() => handleClick(starIndex)}
            onMouseEnter={() => setHoverRating(starIndex)}
            onMouseLeave={() => setHoverRating(0)}
          >
            {isFilled ? (
              <FaStar className="star-filled" />
            ) : (
              <FaRegStar className="star-outline" />
            )}
          </button>
        );
      })}
      <span className="rating-text">{rating}/5</span>
    </div>
  );
}

星評価では、マウスを乗せた位置まで星が光ります。クリックすると評価が確定する仕組みです。

// 音楽プレイヤーコントロール
function MusicPlayerControls() {
  const [isPlaying, setIsPlaying] = useState(false);
  const [isMuted, setIsMuted] = useState(false);

  return (
    <div className="music-controls">
      <button 
        className="control-button"
        onClick={() => setIsPlaying(!isPlaying)}
      >
        {isPlaying ? <FaPause /> : <FaPlay />}
      </button>
      
      <button 
        className="control-button"
        onClick={() => setIsMuted(!isMuted)}
      >
        {isMuted ? <FaVolumeMute /> : <FaVolumeUp />}
      </button>
    </div>
  );
}

音楽プレイヤーでも、再生中は一時停止ボタン、停止中は再生ボタンというように、状態に応じてアイコンが変わります。

// 使用例
function DynamicIconsExample() {
  const [rating, setRating] = useState(3);

  return (
    <div className="dynamic-icons-example">
      <h2>動的アイコンコンポーネント</h2>
      
      <div className="example-section">
        <h3>いいねボタン</h3>
        <LikeButton 
          onLike={(liked) => console.log('Liked:', liked)}
        />
      </div>
      
      <div className="example-section">
        <h3>星評価</h3>
        <StarRating 
          rating={rating}
          onChange={setRating}
        />
      </div>
      
      <div className="example-section">
        <h3>音楽プレイヤー</h3>
        <MusicPlayerControls />
      </div>
    </div>
  );
}

これらのコンポーネントを組み合わせることで、リッチなユーザーインターフェースが作れます。

対応するCSS

.like-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  background: #f8f9fa;
  color: #6c757d;
  cursor: pointer;
  transition: all 0.3s ease;
}

.like-button:hover {
  background: #e9ecef;
}

.like-button.liked {
  background: #ffe6e6;
  color: #e74c3c;
}

.star-rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.star-button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.star-filled {
  color: #f39c12;
  font-size: 1.5rem;
}

.star-outline {
  color: #ddd;
  font-size: 1.5rem;
}

.control-button {
  border: none;
  background: #3498db;
  color: white;
  padding: 1rem;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.control-button:hover {
  background: #2980b9;
  transform: scale(1.1);
}

このようなカスタマイズを使うことで、ブランドに合った統一感のあるアイコンシステムを作ることができます。

実用的なコンポーネント作成

React Icons を活用した実用的なコンポーネントを一緒に作ってみましょう。

ナビゲーションメニュー

アイコン付きのナビゲーションメニューは、ユーザビリティを大幅に向上させます。

import React, { useState } from 'react';
import { 
  FaHome, 
  FaUser, 
  FaShoppingCart, 
  FaEnvelope,
  FaCog,
  FaChevronDown,
  FaSearch,
  FaBell,
  FaSignOutAlt
} from 'react-icons/fa';

// メインナビゲーション
function MainNavigation() {
  const [activeItem, setActiveItem] = useState('home');

  const navItems = [
    { id: 'home', label: 'ホーム', icon: FaHome, path: '/' },
    { id: 'profile', label: 'プロフィール', icon: FaUser, path: '/profile' },
    { id: 'cart', label: 'カート', icon: FaShoppingCart, path: '/cart', badge: 3 },
    { id: 'messages', label: 'メッセージ', icon: FaEnvelope, path: '/messages', badge: 12 },
    { id: 'settings', label: '設定', icon: FaCog, path: '/settings' }
  ];

  return (
    <nav className="main-navigation">
      <ul className="nav-list">
        {navItems.map((item) => {
          const IconComponent = item.icon;
          return (
            <li key={item.id} className="nav-item">
              <a
                href={item.path}
                className={`nav-link ${activeItem === item.id ? 'active' : ''}`}
                onClick={(e) => {
                  e.preventDefault();
                  setActiveItem(item.id);
                }}
              >
                <div className="nav-icon-container">
                  <IconComponent className="nav-icon" />
                  {item.badge && (
                    <span className="nav-badge">{item.badge}</span>
                  )}
                </div>
                <span className="nav-label">{item.label}</span>
              </a>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}

このナビゲーションでは、各メニューにアイコンがついています。カートやメッセージには、数量を示すバッジも表示されていますね。

// ドロップダウンメニュー
function DropdownMenu() {
  const [isOpen, setIsOpen] = useState(false);

  const menuItems = [
    { label: 'プロフィール編集', icon: FaUser },
    { label: '通知設定', icon: FaBell },
    { label: '設定', icon: FaCog },
    { label: 'ログアウト', icon: FaSignOutAlt, action: 'logout' }
  ];

  return (
    <div className="dropdown-menu">
      <button
        className="dropdown-trigger"
        onClick={() => setIsOpen(!isOpen)}
      >
        <FaUser />
        <span>アカウント</span>
        <FaChevronDown className={`dropdown-arrow ${isOpen ? 'rotated' : ''}`} />
      </button>

      {isOpen && (
        <div className="dropdown-content">
          {menuItems.map((item, index) => {
            const IconComponent = item.icon;
            return (
              <button
                key={index}
                className={`dropdown-item ${item.action === 'logout' ? 'logout' : ''}`}
                onClick={() => {
                  console.log(`${item.label} clicked`);
                  setIsOpen(false);
                }}
              >
                <IconComponent className="dropdown-icon" />
                <span>{item.label}</span>
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

ドロップダウンメニューでは、矢印アイコンが開閉状態を示しています。各メニュー項目にもアイコンがついていて、何ができるかが一目で分かります。

// 検索バー
function SearchBar() {
  const [searchValue, setSearchValue] = useState('');

  return (
    <div className="search-bar">
      <div className="search-input-container">
        <FaSearch className="search-icon" />
        <input
          type="text"
          placeholder="検索..."
          value={searchValue}
          onChange={(e) => setSearchValue(e.target.value)}
          className="search-input"
        />
      </div>
    </div>
  );
}

検索バーにも虫眼鏡アイコンがついていて、検索機能があることが直感的に分かります。

// 使用例
function NavigationExample() {
  return (
    <div className="navigation-example">
      <header className="app-header">
        <div className="header-left">
          <h1 className="app-title">My App</h1>
        </div>
        <div className="header-center">
          <SearchBar />
        </div>
        <div className="header-right">
          <DropdownMenu />
        </div>
      </header>
      
      <MainNavigation />
    </div>
  );
}

全体を組み合わせると、プロフェッショナルなナビゲーションシステムが完成します。

通知システム

アイコンを使った通知システムで、ユーザーエクスペリエンスを向上させます。

import React, { useState, useEffect } from 'react';
import { 
  FaCheckCircle, 
  FaExclamationTriangle, 
  FaInfoCircle,
  FaTimesCircle,
  FaTimes
} from 'react-icons/fa';

// 通知タイプと対応するアイコン
const notificationTypes = {
  success: {
    icon: FaCheckCircle,
    className: 'notification-success',
    color: '#27ae60'
  },
  warning: {
    icon: FaExclamationTriangle,
    className: 'notification-warning',
    color: '#f39c12'
  },
  info: {
    icon: FaInfoCircle,
    className: 'notification-info',
    color: '#3498db'
  },
  error: {
    icon: FaTimesCircle,
    className: 'notification-error',
    color: '#e74c3c'
  }
};

まず、通知の種類ごとにアイコンと色を定義します。このようにオブジェクトで管理すると、新しい通知タイプを簡単に追加できます。

// 単一の通知コンポーネント
function NotificationItem({ notification, onClose }) {
  const { icon: IconComponent, className, color } = notificationTypes[notification.type];

  useEffect(() => {
    if (notification.autoClose) {
      const timer = setTimeout(() => {
        onClose(notification.id);
      }, notification.duration || 5000);

      return () => clearTimeout(timer);
    }
  }, [notification, onClose]);

  return (
    <div className={`notification ${className}`}>
      <div className="notification-icon">
        <IconComponent style={{ color }} />
      </div>
      <div className="notification-content">
        <h4 className="notification-title">{notification.title}</h4>
        <p className="notification-message">{notification.message}</p>
      </div>
      <button
        className="notification-close"
        onClick={() => onClose(notification.id)}
      >
        <FaTimes />
      </button>
    </div>
  );
}

各通知アイテムでは、タイプに応じたアイコンが表示されます。自動で消える設定もあり、ユーザーが手動で閉じることもできます。

// 通知管理システム
function NotificationSystem() {
  const [notifications, setNotifications] = useState([]);

  const addNotification = (notification) => {
    const id = Date.now();
    setNotifications(prev => [...prev, { ...notification, id }]);
  };

  const removeNotification = (id) => {
    setNotifications(prev => prev.filter(notification => notification.id !== id));
  };

  const showSuccessNotification = () => {
    addNotification({
      type: 'success',
      title: '成功',
      message: '操作が正常に完了しました。',
      autoClose: true
    });
  };

  const showWarningNotification = () => {
    addNotification({
      type: 'warning',
      title: '警告',
      message: 'この操作には注意が必要です。',
      autoClose: true
    });
  };

  const showInfoNotification = () => {
    addNotification({
      type: 'info',
      title: '情報',
      message: '新しいアップデートが利用可能です。',
      autoClose: true
    });
  };

  const showErrorNotification = () => {
    addNotification({
      type: 'error',
      title: 'エラー',
      message: '操作に失敗しました。再試行してください。',
      autoClose: false
    });
  };

  return (
    <div className="notification-system">
      <h2>通知システム</h2>
      
      <div className="notification-controls">
        <button onClick={showSuccessNotification} className="btn btn-success">
          成功通知
        </button>
        <button onClick={showWarningNotification} className="btn btn-warning">
          警告通知
        </button>
        <button onClick={showInfoNotification} className="btn btn-info">
          情報通知
        </button>
        <button onClick={showErrorNotification} className="btn btn-error">
          エラー通知
        </button>
      </div>

      <div className="notification-container">
        {notifications.map(notification => (
          <NotificationItem
            key={notification.id}
            notification={notification}
            onClose={removeNotification}
          />
        ))}
      </div>
    </div>
  );
}

この通知システムでは、4つの異なるタイプの通知を表示できます。エラー通知は手動で閉じる必要がありますが、その他は5秒後に自動で消えます。

ファイルアップロード

アイコンを使った直感的なファイルアップロードコンポーネントです。

import React, { useState, useRef } from 'react';
import { 
  FaCloudUploadAlt, 
  FaFile,
  FaImage,
  FaFilePdf,
  FaFileWord,
  FaFileExcel,
  FaTimes,
  FaCheck,
  FaSpinner
} from 'react-icons/fa';

// ファイルタイプに応じたアイコンを取得
function getFileIcon(fileType) {
  if (fileType.startsWith('image/')) return FaImage;
  if (fileType === 'application/pdf') return FaFilePdf;
  if (fileType.includes('word')) return FaFileWord;
  if (fileType.includes('excel') || fileType.includes('spreadsheet')) return FaFileExcel;
  return FaFile;
}

まず、ファイルタイプに応じて適切なアイコンを返す関数を作ります。画像、PDF、Word、Excelなど、よく使われるファイルタイプに対応しています。

// 単一ファイルアイテム
function FileItem({ file, onRemove, uploadStatus }) {
  const IconComponent = getFileIcon(file.type);

  const getStatusIcon = () => {
    switch (uploadStatus) {
      case 'uploading':
        return <FaSpinner className="status-icon uploading" />;
      case 'success':
        return <FaCheck className="status-icon success" />;
      case 'error':
        return <FaTimes className="status-icon error" />;
      default:
        return null;
    }
  };

  return (
    <div className="file-item">
      <div className="file-info">
        <IconComponent className="file-icon" />
        <div className="file-details">
          <span className="file-name">{file.name}</span>
          <span className="file-size">
            {(file.size / 1024 / 1024).toFixed(2)} MB
          </span>
        </div>
      </div>
      <div className="file-actions">
        {getStatusIcon()}
        <button
          className="remove-button"
          onClick={() => onRemove(file)}
          disabled={uploadStatus === 'uploading'}
        >
          <FaTimes />
        </button>
      </div>
    </div>
  );
}

各ファイルアイテムでは、ファイルタイプに応じたアイコンと、アップロード状況を示すアイコンが表示されます。回転するスピナーアイコンで「アップロード中」を表現するのは、よく見るパターンですね。

// ファイルアップロードコンポーネント
function FileUpload() {
  const [files, setFiles] = useState([]);
  const [dragOver, setDragOver] = useState(false);
  const [uploadStatuses, setUploadStatuses] = useState({});
  const fileInputRef = useRef(null);

  const handleFileSelect = (selectedFiles) => {
    const newFiles = Array.from(selectedFiles);
    setFiles(prev => [...prev, ...newFiles]);
  };

  const handleDrop = (e) => {
    e.preventDefault();
    setDragOver(false);
    handleFileSelect(e.dataTransfer.files);
  };

  const handleDragOver = (e) => {
    e.preventDefault();
    setDragOver(true);
  };

  const handleDragLeave = (e) => {
    e.preventDefault();
    setDragOver(false);
  };

  const removeFile = (fileToRemove) => {
    setFiles(prev => prev.filter(file => file !== fileToRemove));
    setUploadStatuses(prev => {
      const newStatuses = { ...prev };
      delete newStatuses[fileToRemove.name];
      return newStatuses;
    });
  };

  const simulateUpload = async (file) => {
    setUploadStatuses(prev => ({ ...prev, [file.name]: 'uploading' }));
    
    // アップロードのシミュレーション
    return new Promise((resolve) => {
      setTimeout(() => {
        const success = Math.random() > 0.3; // 70%の成功率
        setUploadStatuses(prev => ({ 
          ...prev, 
          [file.name]: success ? 'success' : 'error' 
        }));
        resolve(success);
      }, 2000);
    });
  };

  const uploadAllFiles = async () => {
    for (const file of files) {
      if (!uploadStatuses[file.name]) {
        await simulateUpload(file);
      }
    }
  };

  return (
    <div className="file-upload">
      <h2>ファイルアップロード</h2>
      
      <div
        className={`drop-zone ${dragOver ? 'drag-over' : ''}`}
        onDrop={handleDrop}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onClick={() => fileInputRef.current?.click()}
      >
        <FaCloudUploadAlt className="upload-icon" />
        <h3>ファイルをドラッグ&ドロップ</h3>
        <p>または、クリックしてファイルを選択</p>
        <input
          ref={fileInputRef}
          type="file"
          multiple
          className="file-input"
          onChange={(e) => handleFileSelect(e.target.files)}
        />
      </div>

      {files.length > 0 && (
        <div className="file-list">
          <div className="file-list-header">
            <h3>選択されたファイル ({files.length})</h3>
            <button
              className="upload-all-button"
              onClick={uploadAllFiles}
              disabled={Object.values(uploadStatuses).some(status => status === 'uploading')}
            >
              すべてアップロード
            </button>
          </div>
          
          {files.map((file, index) => (
            <FileItem
              key={`${file.name}-${index}`}
              file={file}
              onRemove={removeFile}
              uploadStatus={uploadStatuses[file.name]}
            />
          ))}
        </div>
      )}
    </div>
  );
}

このファイルアップロードコンポーネントでは、ドラッグ&ドロップとクリック選択の両方に対応しています。雲のアイコンで「アップロード」を表現していて、とても分かりやすいUIになっています。

対応するCSS

/* Navigation Styles */
.main-navigation {
  background: #2c3e50;
  padding: 1rem 0;
}

.nav-list {
  display: flex;
  justify-content: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  color: #bdc3c7;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  background: #34495e;
  color: #3498db;
}

.nav-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #e74c3c;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

/* File Upload Styles */
.drop-zone {
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  padding: 3rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.drop-zone:hover,
.drop-zone.drag-over {
  border-color: #3498db;
  background: #f8fafe;
}

.upload-icon {
  font-size: 3rem;
  color: #6c757d;
  margin-bottom: 1rem;
}

.status-icon.uploading {
  color: #3498db;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

このCSSにより、ナビゲーションメニューやファイルアップロードが美しく表示されます。

パフォーマンス最適化

React Icons を効率的に使うためのパフォーマンス最適化手法を学びましょう。

Tree Shaking による最適化

Tree Shaking により、使うアイコンだけをバンドルに含めることができます。これはアプリの読み込み速度を向上させる重要なテクニックです。

// ✅ 良い例: 個別インポート
import { FaHeart, FaUser, FaStar } from 'react-icons/fa';
import { MdEmail, MdPhone } from 'react-icons/md';
import { BsDownload } from 'react-icons/bs';

// ✅ さらに良い例: 必要な時だけインポート
const HeartIcon = React.lazy(() => 
  import('react-icons/fa').then(module => ({ default: module.FaHeart }))
);

// ❌ 悪い例: 全体インポート
import * as FaIcons from 'react-icons/fa';
import * as MdIcons from 'react-icons/md';

個別インポートを使うと、実際に使っているアイコンだけがバンドルに含まれます。全体インポートだと、使わないアイコンまで含まれて、アプリが重くなってしまいます。

動的インポートによる遅延読み込み

大量のアイコンを使う場合は、動的インポートを活用しましょう。

import React, { useState, Suspense } from 'react';

// アイコンの動的インポート関数
const loadIcon = (iconName, library) => {
  return React.lazy(() => 
    import(`react-icons/${library}`)
      .then(module => ({ default: module[iconName] }))
      .catch(() => ({ default: () => <span>アイコンが見つかりません</span> }))
  );
};

// アイコンマネージャーコンポーネント
function DynamicIconManager() {
  const [selectedIcon, setSelectedIcon] = useState(null);
  const [IconComponent, setIconComponent] = useState(null);

  const iconOptions = [
    { name: 'FaHeart', library: 'fa', label: 'ハート' },
    { name: 'FaStar', library: 'fa', label: '星' },
    { name: 'FaUser', library: 'fa', label: 'ユーザー' },
    { name: 'MdEmail', library: 'md', label: 'メール' },
    { name: 'MdPhone', library: 'md', label: '電話' },
    { name: 'BsDownload', library: 'bs', label: 'ダウンロード' }
  ];

  const handleIconSelect = async (iconData) => {
    setSelectedIcon(iconData);
    
    try {
      const DynamicIcon = loadIcon(iconData.name, iconData.library);
      setIconComponent(() => DynamicIcon);
    } catch (error) {
      console.error('アイコンの読み込みに失敗しました:', error);
    }
  };

  return (
    <div className="dynamic-icon-manager">
      <h2>動的アイコン読み込み</h2>
      
      <div className="icon-selector">
        <h3>アイコンを選択:</h3>
        <div className="icon-options">
          {iconOptions.map((option, index) => (
            <button
              key={index}
              onClick={() => handleIconSelect(option)}
              className={`icon-option ${selectedIcon?.name === option.name ? 'selected' : ''}`}
            >
              {option.label}
            </button>
          ))}
        </div>
      </div>

      {IconComponent && (
        <div className="selected-icon-display">
          <h3>選択されたアイコン:</h3>
          <Suspense fallback={<div>アイコン読み込み中...</div>}>
            <IconComponent className="dynamic-icon" />
          </Suspense>
          <p>アイコン名: {selectedIcon.name}</p>
        </div>
      )}
    </div>
  );
}

この方法だと、選択された時に初めてアイコンが読み込まれます。最初の読み込み時間は短くなりますが、アイコンを選択する度に少し待ち時間が発生します。

アイコンキャッシュシステム

頻繁に使うアイコンをキャッシュして、パフォーマンスを向上させます。

import React, { useState, useCallback, useMemo } from 'react';

// アイコンキャッシュクラス
class IconCache {
  constructor() {
    this.cache = new Map();
    this.loadingPromises = new Map();
  }

  async getIcon(iconName, library) {
    const cacheKey = `${library}:${iconName}`;
    
    // キャッシュにある場合は即座に返す
    if (this.cache.has(cacheKey)) {
      return this.cache.get(cacheKey);
    }

    // 読み込み中の場合は既存のPromiseを返す
    if (this.loadingPromises.has(cacheKey)) {
      return this.loadingPromises.get(cacheKey);
    }

    // 新しく読み込みを開始
    const loadPromise = this.loadIcon(iconName, library);
    this.loadingPromises.set(cacheKey, loadPromise);

    try {
      const icon = await loadPromise;
      this.cache.set(cacheKey, icon);
      this.loadingPromises.delete(cacheKey);
      return icon;
    } catch (error) {
      this.loadingPromises.delete(cacheKey);
      throw error;
    }
  }

  async loadIcon(iconName, library) {
    const module = await import(`react-icons/${library}`);
    return module[iconName];
  }

  preloadIcons(iconList) {
    return Promise.all(
      iconList.map(({ name, library }) => 
        this.getIcon(name, library).catch(() => null)
      )
    );
  }

  getCacheSize() {
    return this.cache.size;
  }

  clearCache() {
    this.cache.clear();
    this.loadingPromises.clear();
  }
}

このキャッシュシステムでは、一度読み込んだアイコンはメモリに保存されます。同じアイコンを何度使っても、再読み込みは発生しません。

// グローバルなアイコンキャッシュインスタンス
const iconCache = new IconCache();

// キャッシュを使用するカスタムフック
function useIcon(iconName, library) {
  const [icon, setIcon] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const loadIcon = useCallback(async () => {
    if (!iconName || !library) return;

    setLoading(true);
    setError(null);

    try {
      const IconComponent = await iconCache.getIcon(iconName, library);
      setIcon(() => IconComponent);
    } catch (err) {
      setError(`アイコン ${iconName} の読み込みに失敗しました`);
    } finally {
      setLoading(false);
    }
  }, [iconName, library]);

  React.useEffect(() => {
    loadIcon();
  }, [loadIcon]);

  return { icon, loading, error };
}

カスタムフックを使うことで、キャッシュ機能を簡単に利用できます。

// プリロード機能付きアイコンシステム
function PreloadedIconSystem() {
  const [preloadStatus, setPreloadStatus] = useState('idle');
  const [cacheSize, setCacheSize] = useState(0);

  // よく使用するアイコンのリスト
  const commonIcons = useMemo(() => [
    { name: 'FaHome', library: 'fa' },
    { name: 'FaUser', library: 'fa' },
    { name: 'FaCog', library: 'fa' },
    { name: 'FaEnvelope', library: 'fa' },
    { name: 'FaHeart', library: 'fa' },
    { name: 'FaStar', library: 'fa' },
    { name: 'MdEmail', library: 'md' },
    { name: 'MdPhone', library: 'md' },
    { name: 'BsDownload', library: 'bs' },
    { name: 'BsUpload', library: 'bs' }
  ], []);

  const preloadCommonIcons = async () => {
    setPreloadStatus('loading');
    
    try {
      await iconCache.preloadIcons(commonIcons);
      setCacheSize(iconCache.getCacheSize());
      setPreloadStatus('success');
    } catch (error) {
      setPreloadStatus('error');
    }
  };

  const clearCache = () => {
    iconCache.clearCache();
    setCacheSize(0);
    setPreloadStatus('idle');
  };

  return (
    <div className="preloaded-icon-system">
      <h2>アイコンキャッシュシステム</h2>
      
      <div className="cache-controls">
        <button 
          onClick={preloadCommonIcons}
          disabled={preloadStatus === 'loading'}
          className="preload-button"
        >
          {preloadStatus === 'loading' ? '読み込み中...' : 'よく使うアイコンをプリロード'}
        </button>
        
        <button onClick={clearCache} className="clear-button">
          キャッシュクリア
        </button>
        
        <div className="cache-info">
          <span>キャッシュサイズ: {cacheSize}個</span>
          <span>ステータス: {preloadStatus}</span>
        </div>
      </div>

      <div className="icon-showcase">
        <h3>キャッシュされたアイコン例:</h3>
        <IconShowcase iconList={commonIcons} />
      </div>
    </div>
  );
}

プリロード機能を使うと、アプリの起動時によく使うアイコンをまとめて読み込むことができます。ユーザーがアイコンを使う時の待ち時間を短縮できますね。

バンドル分析と最適化

実際にどのくらいのサイズになっているか確認してみましょう。

# バンドル分析ツールのインストール
npm install --save-dev webpack-bundle-analyzer

# package.json にスクリプトを追加
"scripts": {
  "analyze": "npm run build && npx webpack-bundle-analyzer build/static/js/*.js"
}

このコマンドを実行すると、バンドルのサイズと構成を視覚的に確認できます。

// アイコン使用量モニタリングコンポーネント
function IconUsageMonitor() {
  const [iconUsage, setIconUsage] = useState({});

  const trackIconUsage = useCallback((iconName, library) => {
    setIconUsage(prev => ({
      ...prev,
      [`${library}:${iconName}`]: (prev[`${library}:${iconName}`] || 0) + 1
    }));
  }, []);

  const sortedUsage = useMemo(() => {
    return Object.entries(iconUsage)
      .sort(([, a], [, b]) => b - a)
      .slice(0, 10);
  }, [iconUsage]);

  return (
    <div className="icon-usage-monitor">
      <h2>アイコン使用量モニター</h2>
      
      <div className="usage-stats">
        <h3>よく使用されるアイコン Top 10:</h3>
        <ol>
          {sortedUsage.map(([iconKey, count]) => (
            <li key={iconKey}>
              {iconKey}: {count}回
            </li>
          ))}
        </ol>
      </div>
    </div>
  );
}

使用量をモニタリングすることで、どのアイコンをプリロードすべきかが分かります。

対応するCSS

.dynamic-icon-manager {
  padding: 2rem;
}

.icon-options {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.icon-option {
  padding: 0.5rem 1rem;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.icon-option:hover {
  background: #f8f9fa;
}

.icon-option.selected {
  background: #3498db;
  color: white;
}

.selected-icon-display {
  margin-top: 2rem;
  padding: 2rem;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  text-align: center;
}

.dynamic-icon {
  font-size: 3rem;
  color: #3498db;
  margin: 1rem 0;
}

.preload-button {
  background: #27ae60;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}

.preload-button:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
}

これらのパフォーマンス最適化手法により、React Icons を効率的に使い、アプリの読み込み速度とユーザーエクスペリエンスを向上させることができます。

まとめ

React Icons の使い方について、幅広く解説しました。

重要なポイント

1. React Icons の特徴と利点

1万個以上のアイコンが使い放題
Tree Shaking で軽量化
統一されたAPI
TypeScript 完全対応

2. 基本的な使用方法

個別インポートで効率的に使用
サイズと色を自由にカスタマイズ
IconContext で一括設定
実用的なコンポーネント作成

3. 高度なカスタマイズ

テーマシステムとの連携
動的アイコン変更
アニメーション効果
状態管理との組み合わせ

4. パフォーマンス最適化

Tree Shaking の活用
動的インポートによる遅延読み込み
アイコンキャッシュシステム
バンドルサイズの監視

5. 実用的なコンポーネント例

ナビゲーションメニュー
通知システム
ファイルアップロード
インタラクティブな要素

ベストプラクティス

効率的な使用方法

必要なアイコンのみインポート
一貫したアイコンライブラリの選択
パフォーマンスを考慮した実装
アクセシビリティの確保

設計指針

ユーザーにとって直感的なアイコン選択
ブランドガイドラインとの整合性
レスポンシブデザインへの対応
保守性を考慮したコンポーネント設計

開発フロー

アイコンライブラリの事前検討
プロトタイプでの使用感確認
パフォーマンステストの実施
継続的な最適化

今後の学習ステップ

基礎から応用へ

基本的なアイコン表示の習得
カスタマイズ手法の理解
実用的なコンポーネント作成
パフォーマンス最適化の実践

実践的な活用

既存プロジェクトへの導入
デザインシステムとの統合
チーム開発での標準化
継続的な改善

React Icons は、React アプリケーションの UI を大幅に向上させる強力なツールです。この記事で紹介した手法を活用して、美しく使いやすいインターフェースを構築してください。

適切なアイコンの使用により、ユーザーエクスペリエンスが向上し、より直感的で魅力的なアプリケーションを作成できるでしょう。ぜひ、これらのテクニックを実際のプロジェクトで試してみてくださいね。

React Iconsの使い方｜豊富なアイコンで見栄えの良いUIを作る

React Icons って何？

React Icons の魅力的な特徴

インストールと基本設定

利用可能なアイコンの確認

基本的な使い方

シンプルなアイコン表示

アイコンのサイズ調整

アイコンの色とスタイル

実用的なコンポーネント例

カスタマイズとスタイリング

IconContext による一括設定

テーマ別アイコンスタイル

動的アイコンコンポーネント

実用的なコンポーネント作成

ナビゲーションメニュー

通知システム

ファイルアップロード

パフォーマンス最適化

Tree Shaking による最適化

動的インポートによる遅延読み込み

アイコンキャッシュシステム

バンドル分析と最適化

まとめ

重要なポイント

ベストプラクティス

今後の学習ステップ

関連記事

Untitled

Untitled

Untitled