ReactでSVGを使用する方法

SVGファイルのインポート: Reactでは、SVGファイルをコンポーネントとしてインポートして使用することができます。まず、SVGファイルをReactプロジェクトのソースコードに追加します。次に、SVGファイルをインポートし、Reactコンポーネント内で使用します。

import { ReactComponent as Logo } from './logo.svg';
function App() {
  return (
    <div>
      <Logo />
    </div>
  );
}

SVG要素の直接作成: Reactでは、JSXを使用して直接SVG要素を作成することもできます。以下は、Reactコンポーネント内でSVG要素を作成する例です。

function App() {
  return (
    <div>
      <svg width="400" height="400">
        <circle cx="200" cy="200" r="100" fill="red" />
      </svg>
    </div>
  );
}

SVGプロパティの動的変更: Reactでは、状態やプロパティを使用してSVG要素のプロパティを動的に変更することができます。以下は、状態を使用して円の色を変更する例です。

import { useState } from 'react';
function App() {
  const [circleColor, setCircleColor] = useState('red');
  const handleColorChange = () => {
    setCircleColor('blue');
  };
  return (
    <div>
      <svg width="400" height="400">
        <circle cx="200" cy="200" r="100" fill={circleColor} />
      </svg>
      <button onClick={handleColorChange}>Change Color</button>
    </div>
  );
}

これらはReactでSVGを使用するための基本的な方法の一部です。SVG要素内にさまざまな形状やプロパティを追加することもできます。また、外部のSVGライブラリやコンポーネントを使用することもできます。

このチュートリアルはReactでSVGを使用するためのスタート地点となるでしょう。詳細なカスタマイズや高度な使用法については、Reactの公式ドキュメントやSVGの仕様を参照してください。