SVGアイコンをReactコンポーネントに変換する -SVGR CLI

2024年8月19日 09:19

この記事は弊社のフルスタックエンジニア：Suraj Subediが作成した記事の日本語翻訳版です。
https://medium.com/readytowork-org/configure-svgr-cli-to-convert-svg-icons-to-react-components-e778fa244bd8

現代のウェブ開発が進化するにつれ、シームレスなユーザー体験を生み出すために使用するツールやワークフローも進化している。SVGファイルをReactコンポーネントに変換する強力なライブラリであるSVGR（SVG to React）は、絶大な人気を得ているツールの1つだ。これにより、ReactアプリケーションにSVGをシームレスに統合することができ、よりダイナミックでインタラクティブなアプリケーションにすることができる。この記事では、SVGR CLIを設定してSVGアイコンをReactコンポーネントに効率的に変換する方法を探ります。

SVGRとは？

SVGR は SVG ファイルを React コンポーネントに変換するツールで、SVG を直接 React コンポーネントとして使用することができます。これにより、面倒な SVG から JSX への変換が不要になり、React アプリケーション内での SVG アイコンの再利用性とカスタマイズ性が向上します。

なぜ SVGR を使うのか？

再利用可能なコンポーネント： SVG アイコンを再利用可能な React コンポーネントに変換します。
カスタマイズ： React props を使って SVG を簡単に操作できます。
効率化：自動化することで開発ワークフローを効率化します。

SVGR CLIを始める

はじめに、プロジェクトにSVGRをセットアップする必要がある。SVGR CLI を使って SVG ファイルを React コンポーネントに変換する。以下のステップに従って始めましょう：

ステップ1：SVGR CLIをインストールする

まず、SVGR CLIをグローバルに、または開発依存としてプロジェクトにインストールする必要があります。以下はその方法です：

# Install globally
npm install -g @svgr/cli

# Or install as a dev dependency
npm install --save-dev @svgr/cli

ステップ 2: SVG ファイルの変換

SVGR CLIがインストールされたら、SVGファイルをReactコンポーネントに変換し始めることができる。これはコマンドラインから以下のコマンドを使って行うことができる：

svgr path/to/your/icons --out-dir path/to/output/components

例えば、SVGファイルを含むiconsというディレクトリがあり、コンポーネントをcomponentsというディレクトリに出力したい場合、次のように実行する：

svgr ./icons --out-dir ./components

このコマンドは、iconsディレクトリにあるすべてのSVGファイルを処理し、componentsディレクトリにあるReactコンポーネントを生成する。

ステップ3：SVGR設定のカスタマイズ

SVGR CLI は設定ファイルを通してカスタマイズすることができる。プロジェクトのルートに.svgr.config.jsというファイルを作成し、SVGRの動作をカスタマイズする。以下に設定例を示します：


module.exports = {
 typescript: true,
 dimensions: true,
 outDir: "packages/shared/src/assets/icons",
}

注意：typescriptにtrueを、dimensionsにtrueを渡すことでtypescriptを使用することができます。

他のオプションについてはここからも詳細情報を確認できます：
https://react-svgr.com/docs/options/?source=post_page-----e778fa244bd8--------------------------------

さらに、タイプスクリプトを使いたい場合は、プロジェクトのルートに以下のタイプファイルをsvgr.d.tsとして追加する必要がある。

declare module "*.svg" {
 import { FC, SVGProps } from "react"
 const content: FC<SVGProps<SVGElement>>
 export default content
}

declare module "*.svg?url" {
 const content: any
 export default content
}

ステップ3：インデックステンプレートのカスタマイズ

高度な使用例では、インデックス・テンプレートをカスタマイズすることができます。


--index-template <template>

引数を使えば、カスタム・テンプレートを指定することができる。

以下は、すべてのSVGをアイコンとしてエクスポートするテンプレートを設定したファイルの例です。

例：SVG画像の名前がmenu.svgの場合→MenuIconとしてそのリアクトコンポーネントをインポートして使うことができる。

カスタム設定のために、このファイルをルートにsvgr.index.template.jsとして追加します。

// index-template.js
const path = require("path")

function defaultIndexTemplate(filePaths) {
  const exportEntries = filePaths.map(({ path: filePath }) => {
    const basename = path.basename(filePath, path.extname(filePath))
    const exportName = /^\d/.test(basename) ? `Svg${basename}` : basename
    return `export { default as ${exportName}Icon } from './${basename}'`
  })
  return exportEntries.join("\n")
}

module.exports = defaultIndexTemplate

ステップ4：スクリプト・コマンドを書いてより便利にする

package.jsonに移動し、必要に応じて以下のスクリプトを追加する：

icon:create: "svgr --index-template svgr.index.template.js 
public/assets/icons"

これは、指定されたテンプレートファイルを使用し、public/assets/iconsのすべてのSVGファイルをReactコンポーネントとして、svgr.config.jsファイルで指定されたフォルダに作成します。

そして、ターミナルから実行するだけです（パッケージ・マネージャに固有）：

yarn icon:create

おめでとう🎉、これで次のプロジェクトでSVGファイルをReactコンポーネントとしてプロ並みにインポートできます。