React+TypeScriptでSVGをコンポーネントとして扱う

ReactでSVGをコンポーネントとして扱う為にライブラリを使っている例を見つけたので、ライブラリ無しのシンプルな方法を書いてみました。

シンプルな矢印SVGをコンポーネントにしてみる

arrow.tsxというファイルを作成して以下の様に記述。

arrow.tsx

import React, { FC } from 'react'

type Props = {
  size?: number
  color?: string
}

export const Arrow: FC<Props> = (props: Props) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={props.size || 24}
      height={props.size || 24}
      viewBox="0 0 24 24"
      fill="none"
      stroke={props.color || '#000'}
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M19 12H6M12 5l-7 7 7 7" />
    </svg>
  )
}

サイズと色は呼び出し側で設定したいのでオプションパラメータとしてsizeとcolorを設定。
パラメータが指定されていない場合の初期値を論理演算子で記述。
非常にシンプルなコンポーネント。

SVGコンポーネントを呼び出す

先ほど作成したarrow.tsxをimportしてコンポーネントとして記述。
下記は呼び出し側の抜粋です。

import { Arrow } from '../arrow'

<Arrow size={30} color="red" />

ここではsize={30}とcolor="red"を記述していますが、省略した場合はコンポーネント側で設定した初期値が使われます。

まとめ

わざわざコンポーネントにせずにimgタグで表示させるのが最も簡単だと思いますが、呼び出す側でサイズや色などを変更できれば再利用性は高まりますね。