ReactJSでSVGを使う方法

ReactJSへのSVGの埋め込みについて (日本語)

SVG (Scalable Vector Graphics) は、ベクター形式のグラフィックをウェブページに表示するための言語です。 ReactJS は、JavaScriptのライブラリで、ユーザーインターフェイスの開発に広く使われています。

SVGをReactJSに埋め込む方法

1. SVGファイルの作成または取得
   

   • SVGファイルを作成する: テキストエディタやデザインツールを使ってSVGコードを直接書く。
   • SVGファイルを取得する: 外部ソースからSVGファイルをダウンロードしたり、APIから取得する。

2. SVGコードのインポート
   

   • ES6モジュール
     

     import mySvg from './mySvg.svg';
     

   • URL
     

     <img src="./mySvg.svg" alt="My SVG" />
     

3. SVGコンポーネントの作成 (推奨)
   

SVGの動的なレンダリング

• Reactのstateやprops
  

  function MySvg({ color }) {
    return (
      <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" fill={color} />
      </svg>
    );
  }
  

• JSXのテンプレートリテラル
  

  <svg width={width} height={height}>
    {/* SVG code */}
  </svg>
  

SVGのスタイル設定

• インラインスタイル
  

  <svg width="100" height="100" style={{ fill: 'blue', stroke: 'red' }}>
    {/* SVG code */}
  </svg>
  

• CSS
  

  svg {
    fill: blue;
    stroke: red;
  }
  

SVGのアニメーション

• Reactのアニメーションライブラリ (e.g., React Spring, Framer Motion)
  

  import { useSpring } from 'react-spring';
  
  function AnimatedSvg() {
    const props = useSpring({
      to: { opacity: 1 },
      from: { opacity: 0 },
    });
  
    return (
      <animated.svg style={props}>
        {/* SVG code */}
      </animated.svg>
    );
  }
  

ReactJSでSVGを使う方法 (日本語)

SVGコンポーネントの作成

function MySvg() {
  return (
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" fill="blue" />
    </svg>
  );
}

• circleタグ
  円を描画します。
  • cxとcy属性
    円の中心の座標を指定します。
  • r属性
    円の半径を指定します。
  • fill属性
    円の塗りつぶしの色を指定します。
• widthとheight属性
  SVGのサイズを指定します。
• svgタグ
  SVG要素を定義します。
• MySvg関数
  SVGコンポーネントを定義します。

function MySvg({ color }) {
  return (
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" fill={color} />
    </svg>
  );
}

• fill={color}
  円の塗りつぶしの色を動的に設定します。
• colorプロパティ
  コンポーネントに渡される色を指定します。

function MySvg() {
  return (
    <svg width="100" height="100" style={{ fill: 'blue', stroke: 'red' }}>
      <circle cx="50" cy="50" r="40" />
    </svg>
  );
}

• style属性
  SVG要素のスタイルを指定します。
  • fillとstrokeプロパティ
    塗りつぶしと輪郭の色を指定します。

import { useSpring } from 'react-spring';

function AnimatedSvg() {
  const props = useSpring({
    to: { opacity: 1 },
    from: { opacity: 0 },
  });

  return (
    <animated.svg style={props}>
      {/* SVG code */}
    </animated.svg>
  );
}

• styleプロパティ
  アニメーションのスタイルを指定します。
• animated.svg
  アニメーション可能なSVG要素です。
• toとfromプロパティ
  アニメーションの開始状態と終了状態を指定します。
• useSpringフック
  スプリングアニメーションを作成します。
• react-springライブラリ
  アニメーションを扱うためのライブラリです。

SVGコンポーネントの外部ファイル化

• SVGコードを別のファイルに保存し、インポートする。

  // MySvg.svg
  <svg width="100" height="100">
    {/* SVG code */}
  </svg>
  
  // MyComponent.js
  import MySvg from './MySvg.svg';
  
  function MyComponent() {
    return <MySvg />;
  }
  

SVGの動的な生成

• JavaScriptでSVGコードを生成し、Reactコンポーネントに渡す。

  function MySvg({ width, height, color }) {
    const svgString = `<svg width="<span class="math-inline">\{width\}" height\="</span>{height}">
      <circle cx="50" cy="50" r="40" fill="${color}" />
    </svg>`;
  
    return <div dangerouslySetInnerHTML={{ __html: svgString }} />;
  }
  

SVGのアイコンライブラリ

• Heroicons
  

  import { HeartIcon } from '@heroicons/react/solid';
  
  function MyComponent() {
    return <HeartIcon className="h-6 w-6 text-red-500" />;
  }
  

• React Icon
  

  import { FaHeart } from 'react-icons/fa';
  
  function MyComponent() {
    return <FaHeart size={32} color="red" />;
  }
  

SVGのアニメーションライブラリ

• Framer Motion
  

  import { motion } from 'framer-motion';
  
  function AnimatedSvg() {
    return (
      <motion.svg
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.5 }}
      >
        {/* SVG code */}
      </motion.svg>
    );
  }