SVGファイルをReactコンポーネントとして使う時の備忘録

はじめに

• フロントエンド開発(React/TypeScript利用)で、簡単にSVGファイルを扱う方法のメモ。

SVGファイルを用意する

• Adobe ExpressがSVG変換で便利だった。

SVGファイルをReactコンポーネントとして使う

• VSCodeなどでSVGファイルの中身を参照し、以下のようなファイルを作成する。

Icon.tsx

export const Icon = (props: {
  width?: number | string;
  height?: number | string;
  style?: React.CSSProperties;
}) => {
  return (
    <svg
      xmlns="..."
      width={props.width}
      height={props.height}
      viewBox="..."
    >
      <path
        fill="..."
        opacity="..."
        d="..."
      />
      ...
    </svg>
  );
};

参考文献

• How to Use SVG Icons in React App?