本文へスキップ
SvgJsx
言語: 日本語

SVG を React Native（react-native-svg）に変換

React Native は <svg> タグを直接描画できません。このツールは SVG を Svg、Path、G、Circle などの react-native-svg コンポーネントに書き換え、正しいインポート文も生成します。

クイックプリセット:
.svg ファイルをここにドロップ、またはファイルは FileReader でローカルに読み込まれ、アップロードされることはありません。
オプション
エクスポート:
import Svg, { G, Path } from "react-native-svg";
import type { SvgProps } from "react-native-svg";

const HeartIcon = (props: SvgProps) => (
  <Svg width="24" height="24" viewBox="0 0 24 24" {...props}>
    <G id="Layer_1" fill="none" stroke="#e11d48" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <Path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style={{ fillOpacity: "0.15", fill: "#e11d48" }} />
    </G>
  </Svg>
);

export default HeartIcon;

注意

  • React Native は class 属性をサポートしていないため削除しました。

プレビュー

変換後の SVG のプレビュー
元の SVG
706B
最適化後の SVG
538B(-24%)
コンポーネント
648B

React Native 向け出力の違い

react-native-svg は SVG の各要素に対応する大文字始まりのコンポーネントを提供しています。<path> は <Path>、<g> は <G>、<linearGradient> は <LinearGradient> になります。ツールはサポートされているすべての要素を対応付け、実際に使うコンポーネントだけを 1 行でインポートし、props を SvgProps 型にします。

<title>、<desc>、<style>、<metadata> などネイティブに対応するものがない要素は、実行時にクラッシュしないよう注意メッセージとともに削除されます。React Native には CSS クラスがないため、class 属性も削除されます。

react-native-svg のセットアップ

生成したコンポーネントを使う手順：

  • ライブラリをインストールします：Expo なら npx expo install react-native-svg、素の React Native なら npm install react-native-svg。
  • 変換したコードをプロジェクト内の .tsx または .jsx ファイルとして保存します。
  • 通常のコンポーネントと同じように描画し、width、height、color などを渡します。
  • currentColor を有効にして color プロパティを渡すと、親からアイコンの色を変えられます。

モバイル向けアイコンのヒント

アイコンはシンプルに保ちましょう。フィルターやマスクはローエンドの Android 端末では描画コストが高くなります。座標を小数点以下 1〜2 桁に丸めれば JavaScript バンドルを小さくでき、ごく小さなアイコンでは線よりも塗りを優先すると、高解像度でない画面でもにじみにくくなります。

よくある質問

Expo で使えますか？

はい。react-native-svg は Expo SDK に含まれています。npx expo install react-native-svg でインストールすれば、生成したコンポーネントは Expo Go でも開発ビルドでも動作します。

<style> 要素が削除されたのはなぜ？

react-native-svg は CSS スタイルシートをサポートしていないためです。変換前にルールを fill や stroke などの属性に書き換えるか、各要素に直接指定してください。

React Native でアイコンの色を変えるには？

currentColor を有効にし、コンポーネントに color="#ff0000" を渡します。react-native-svg は Svg 要素の color プロパティから currentColor を解決します。

react-native-svg-transformer はまだ必要ですか？

アイコンを事前に変換しておくなら不要です。transformer は .svg ファイルを直接インポートするためのものですが、このツールは Metro の設定が不要な通常のコンポーネントを出力します。