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

公開:2020/09/25
更新:2020/10/15
1 min読了の目安(約1000字TECH技術記事

Reactでライブラリを使わずに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>
  )
}

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

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

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

import { Arrow } from '../arrow'

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

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

まとめ

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