SVG スプライトと ReactJS を駆使したアイコン描画の達人ガイド

2024-05-22

SVG use タグと ReactJS を用いたスプライトの描画

概要

ReactJS で SVG スプライトを使用するには、svg タグと use 属性を用います。

手順

SVG スプライトを作成する
- すべてのアイコンを単一の SVG ファイルにまとめます。
- 各アイコンに固有の id 属性を設定します。
React コンポーネントを作成する
- svg タグを使用して SVG スプライトを読み込みます。
- use 属性を使用して、描画するアイコンを指定します。
- xlinkHref 属性を使用して、SVG スプライトのパスを指定します。

例

import React from 'react';

const Icon = ({ iconId }) => (
  <svg>
    <use xlinkHref="/path/to/sprite.svg#${iconId}" />
  </svg>
);

const App = () => (
  <div>
    <Icon iconId="home" />
    <Icon iconId="user" />
  </div>
);

この例では、Icon コンポーネントは iconId props を受け取り、対応するアイコンを描画します。App コンポーネントは Icon コンポーネントを 2 回使用し、異なるアイコンを描画します。

利点

アイコンの管理が容易になる
描画のパフォーマンスが向上する
コードの簡潔化

SVG スプライトは、アイコン以外にも、ロゴやその他のグラフィックに使用することができます。
ReactJS には、SVG スプライトを扱うためのライブラリがいくつか用意されています。

SVG スプライトと ReactJS を用いたアイコン描画のサンプルコード

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
  <symbol id="home" viewBox="0 0 24 24">
    <path d="M12 7c-2.76 0-5 2.24-5 5v7h2v-7c0-2.76 2.24-5 5-5zM19 4v10h-10v-10z" />
  </symbol>
  <symbol id="user" viewBox="0 0 24 24">
    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4c-2.21 0-4 1.79-4 4s1.79 4 4 4zM12 8c-1.1 0-2 0.9-2 2s0.9 2 2 2c1.1 0 2-0.9 2-2s-0.9-2-2-2z" />
  </symbol>
</svg>

上記のコードは、home アイコンと user アイコンを含む SVG スプライトを作成します。各アイコンは symbol タグで定義され、固有の id 属性が設定されています。

import React from 'react';

const Icon = ({ iconId }) => (
  <svg>
    <use xlinkHref="/path/to/sprite.svg#${iconId}" />
  </svg>
);

const App = () => (
  <div>
    <Icon iconId="home" />
    <Icon iconId="user" />
  </div>
);

上記のコードは、Icon コンポーネントと App コンポーネントを定義します。

App コンポーネントは Icon コンポーネントを 2 回使用し、異なるアイコンを描画します。

実行

上記のコードを実行すると、以下の結果が表示されます。

<svg>
  <use xlinkHref="/path/to/sprite.svg#home" />
</svg>
<svg>
  <use xlinkHref="/path/to/sprite.svg#user" />
</svg>

上記のように、Icon コンポーネントを使用して、SVG スプライトからアイコンを簡単に描画することができます。

補足

上記のコードはあくまで一例であり、必要に応じて変更することができます。

SVG スプライトと ReactJS を用いたアイコン描画のその他の方法

インライン SVG

import React from 'react';

const Icon = ({ iconId }) => {
  const iconMap = {
    home: (
      <svg width="24" height="24" viewBox="0 0 24 24">
        <path d="M12 7c-2.76 0-5 2.24-5 5v7h2v-7c0-2.76 2.24-5 5-5zM19 4v10h-10v-10z" />
      </svg>
    ),
    user: (
      <svg width="24" height="24" viewBox="0 0 24 24">
        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4c-2.21 0-4 1.79-4 4s1.79 4 4 4zM12 8c-1.1 0-2 0.9-2 2s0.9 2 2 2c1.1 0 2-0.9 2-2s-0.9-2-2-2z" />
      </svg>
    ),
  };

  return iconMap[iconId];
};

const App = () => (
  <div>
    <Icon iconId="home" />
    <Icon iconId="user" />
  </div>
);

上記のコードは、iconMap オブジェクトを使用して、各アイコンの SVG コードを定義します。Icon コンポーネントは iconId props を受け取り、対応する SVG コードを返します。

require 関数

import React from 'react';
import homeIcon from './home.svg';
import userIcon from './user.svg';

const Icon = ({ iconId }) => {
  const icons = {
    home: homeIcon,
    user: userIcon,
  };

  const IconComponent = icons[iconId];
  return <IconComponent />;
};

const App = () => (
  <div>
    <Icon iconId="home" />
    <Icon iconId="user" />
  </div>
);

動的な SVG

import React, { useState } from 'react';

const Icon = ({ iconId }) => {
  const [icon, setIcon] = useState(null);

  useEffect(() => {
    fetch(`/path/to/icon/${iconId}.svg`)
      .then((response) => response.text())
      .then((svg) => setIcon(svg));
  }, [iconId]);

  if (!icon) {
    return null;
  }

  return (
    <svg dangerouslySetInnerHTML={{ __html: icon }} />
  );
};

const App = () => (
  <div>
    <Icon iconId="home" />
    <Icon iconId="user" />
  </div>
);