SVGとReactJSの連携
2024-10-29
SVG とは
SVG (Scalable Vector Graphics) は、ベクターグラフィックを記述するためのXMLベースの言語です。SVG画像は解像度によらず鮮明に表示され、拡大縮小しても画質が劣化しません。
SVG スプライトとは
<use> タグ
<use> タグは、SVG スプライト内の特定のSVG要素を参照して、その要素をドキュメント内の別の場所に表示するタグです。
ReactJS での SVG の使用
ReactJS では、SVG を以下の方法で使用することができます：
-
インライン SVG 直接 JSX 内に SVG コードを記述する方法です。
<svg width="24" height="24" viewBox="0 0 24 24"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58 -8 8-8 8 3.58 8 8-3.58 8-8 8z" /> </svg> -
SVG スプライトと <use> タグ SVG スプライトを作成し、<use> タグを使って必要なSVG要素を参照する方法です。
<svg width="24" height="24" viewBox="0 0 24 24"> <use xlinkHref="#icon-star" /> </svg>ここで、
#icon-starはSVG スプライト内のIDで、参照したいSVG要素を指定します。
ReactJS で SVG スプライトを使用するには、以下のような手順を踏みます：
メリット
- デザインの一貫性の維持 SVG スプライトを使うことで、デザインの一貫性を保つことができます。
- コードの簡潔化 同じSVG要素を複数回使用する場合、<use> タグを使うことでコードを簡潔に書くことができます。
- パフォーマンスの向上 HTTP リクエストの数を減らすことで、ページの読み込み速度を向上させることができます。
直接 JSX 内に SVG コードを埋め込む方法です。
import React from 'react';
const MyComponent = () => {
return (
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
);
};
SVG スプライトと <use> タグ
SVG スプライトを作成し、<use> タグを使って必要な SVG 要素を参照する方法です。
SVG スプライトファイル (sprite.svg)
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-star" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
</symbol>
</ svg>
React コンポーネント
import React from 'react';
const MyComponent = () => {
return (
<svg width="24" height="24">
<use xlinkHref="#icon-star" />
</svg>
);
};
解説
- インライン SVG
- シンプルな SVG を直接 JSX 内に記述します。
- 小規模な SVG に適しています。
- コードの簡潔化
同じ SVG を複数回使う場合、<use> タグで簡潔に記述できます。 - パフォーマンスの向上
HTTP リクエストの数を減らせます。
注意
- SVG スプライトの管理
SVG スプライトを管理するツールやライブラリを使うと効率的です。 - ブラウザのサポート
古いブラウザでは <use> タグのサポートが限られている場合があります。
SVGとReactJSを連携させる方法には、<use>タグの他にもいくつかの代替手法があります。以下に、代表的な手法をいくつか紹介します。
SVG コンポーネントの直接インポート
- SVG 文字列をインラインで定義
const StarIcon = () => { return ( <svg width="24" height="24" viewBox="0 0 24 24"> <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" /> </svg> ); }; - SVG ファイルを直接インポート
import StarIcon from './StarIcon.svg'; const MyComponent = () => { return <StarIcon />; };
SVG ライブラリの利用
- SVG スプライト管理ライブラリ
- React Icon Libraries
react-icons: 数多くのアイコンを提供し、簡単に使用できます。react-svg-icons: カスタマイズ可能な SVG アイコンを提供します。
CSS Modules による SVG のスタイル設定
- CSS Modules を利用して、SVG 要素にクラス名を与え、CSS でスタイルを設定できます。
選択基準
- 開発チームのスキルと好み
チームのスキルセットや好みによって、手法を選択できます。 - パフォーマンス要件
HTTP リクエストの数を減らすために、SVG スプライトやインライン定義が有効です。 - アイコンの豊富さとカスタマイズ性
必要なアイコンの種類やカスタマイズの度合いによって、適切なライブラリを選択します。 - プロジェクトの規模と複雑さ
小規模なプロジェクトでは直接インポートやインライン定義がシンプルです。大規模なプロジェクトでは、SVG ライブラリや SVG スプライト管理ライブラリが効率的です。
svg sprite reactjs
