React、Vue、モダンフレームワークでのSVGスプライト

モダンJavaScriptフレームワークでのSVGスプライト

React、Vue、その他のコンポーネントベースフレームワークでSVGスプライトを使用するには、プレーンHTMLとは少し異なるアプローチが必要です。各主要フレームワークのパターンを紹介します。

React

再利用可能なIconコンポーネントを作成：

// Icon.tsx
interface IconProps {
  name: string;
  size?: number;
  className?: string;
  title?: string;
}

export function Icon({ name, size = 24, className, title }: IconProps) {
  return (
    <svg
      width={size}
      height={size}
      className={className}
      aria-hidden={!title}
      role={title ? "img" : undefined}
      aria-label={title}
    >
      {title && <title>{title}</title>}
      <use href={`#icon-${name}`} />
    </svg>
  );
}

重要： Reactでは<use>要素にhrefを使用してください（xlinkHrefではなく）。xlinkHrefプロップはReact 18で非推奨になりました。

Vue 3

<!-- SvgIcon.vue -->
<template>
  <svg :width="size" :height="size" :class="className"
       :aria-hidden="!title" :aria-label="title">
    <title v-if="title">{{ title }}</title>
    <use :href="`#icon-${name}`" />
  </svg>
</template>

TypeScript統合

型安全なアイコン名のunionを作成：

export const iconNames = ["home", "search", "settings", "user", "mail"] as const;
export type IconName = typeof iconNames[number];

Iconコンポーネントのpropsで使用すると、オートコンプリートとコンパイル時のアイコン名検証が得られます。