react-native-svg-transformerは、React NativeプロジェクトでSVGファイルをWebアプリケーションと同じようにインポートして使用できる便利なツールです。このガイドでは、インストールから設定、実際の利用までの完全な手順を解説します。

react-native-svg-transformerを選ぶ理由

React Native開発において、SVGファイルの処理には通常追加の設定と変換手順が必要です。react-native-svg-transformerはこの問題を解決し、SVGファイルを直接Reactコンポーネントに変換して、開発者が通常のコンポーネントと同じようにSVGリソースを簡単に参照できるようにします。これにより開発プロセスが簡素化され、コードの保守性とクロスプラットフォームの一貫性が向上します。

主要な利点

• 簡単な使用: 通常のコンポーネントと同じようにSVGファイルをインポート
• クロスプラットフォーム互換性: 同じコードでReact NativeとWebプロジェクトで使用可能
• 高カスタマイズ性: SVGR設定ファイルを通じてSVG変換ルールをカスタマイズ可能
• 型安全性: TypeScript型定義を提供し、開発プロセス中の型チェックを確保

準備：環境要件

react-native-svg-transformerのインストールを開始する前に、開発環境が以下の要件を満たしていることを確認してください：

• React Nativeバージョンは0.59.0以上
• react-native-svgライブラリバージョンは12.0.0以上

react-native-svgがまだインストールされていない場合は、まず公式ドキュメントに従ってインストールしてください。

インストール手順：クイックスタート

ステップ1：react-native-svg-transformerのインストール

npmを使用してインストール：

npm install --save-dev react-native-svg-transformer

またはyarnを使用：

yarn add --dev react-native-svg-transformer

ステップ2：Metroバンドラーの設定

使用しているReact NativeまたはExpoのバージョンに応じて、適切な設定方法を選択してください：

Expo SDK v41.0.0以降

プロジェクトルートディレクトリにmetro.config.jsファイルを作成または編集：

const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer/expo")
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"]
  };

  return config;
})();

React Native v0.72.1以降

プロジェクトルートディレクトリにmetro.config.jsファイルを作成または編集：

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

const config = {
  transformer: {
    babelTransformerPath: require.resolve(
      "react-native-svg-transformer/react-native"
    )
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...sourceExts, "svg"]
  }
};

module.exports = mergeConfig(defaultConfig, config);

React Native v0.59以降

プロジェクトルートディレクトリにmetro.config.jsファイルを作成または編集：

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve(
        "react-native-svg-transformer/react-native"
      )
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

基本的な使用方法：SVGのインポートと利用

設定が完了したら、通常のReactコンポーネントと同じようにSVGファイルをインポートできます：

import Logo from "./logo.svg";

コンポーネント内で使用する場合：

<Logo width={120} height={40} />

高度な設定：カスタムSVG変換ルール

react-native-svg-transformerはSVGRを使用してSVGファイルを処理します。.svgrrc設定ファイルを作成することで、変換ルールをカスタマイズできます。

SVGR設定ファイルの作成

プロジェクトルートディレクトリに.svgrrcファイルを作成：

{
  "replaceAttrValues": {
    "red": "currentColor"
  }
}

SVGの色を動的に変更する

JavaScriptコードでSVGの色を動的に変更するには、まず.svgrrcに以下を追加します：

{
  "replaceAttrValues": {
    "#000": "{props.fill}"
  }
}

SVGファイルのpathタグのfill属性が#000であることを確認してください：

<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M2.965 6.0925C4.045 8.215 ..." fill="#000"/>
</svg>

コンポーネントを使用する際にfill属性を渡します：

<Logo width={120} height={40} fill={"blue"} />

TypeScriptサポート

TypeScriptを使用している場合、プロジェクトにSVGモジュール宣言を追加する必要があります。declarations.d.tsファイル（存在しない場合）を作成します：

declare module "*.svg" {
  import React from "react";
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

Jestテスト設定

JestがSVGファイルを正しく処理できるようにするには、モックファイルを作成する必要があります。プロジェクトに__mocks__/svgMock.jsを作成します：

module.exports = "SvgMock";

Jest設定に以下を追加します：

{
  "jest": {
    "moduleNameMapper": {
      "\\.svg": "<rootDir>/__mocks__/svgMock.js"
    }
  }
}

よくある問題と解決策

問題：iOSでSVG内のカスタムフォントが表示されない

解決策：SVG内のテキストをアウトラインパスに変換します。Adobe IllustratorやSketchなどのほとんどのベクターグラフィック編集ソフトウェアは、テキストをアウトラインに変換する機能を提供しています。

問題：ExpoプロジェクトでSVG変換が効かない

解決策：正しいtransformerパスを使用していることを確認してください：

require.resolve("react-native-svg-transformer/expo")