本文へスキップ
Numio

React NativeアプリのためのSVG変換 — Numio

SVG マークアップを、react-native-svg から Svg、Path、G などの要素をインポートする React Native コンポーネントに変換します。まず SVGO の最適化が実行され、属性は JSX の prop になり、数値は数値のまま出力されます（strokeWidth={2}）。

Figma や Sketch から書き出したアイコンを、react-native-svg を使う Expo や React Native アプリ用のコンポーネントに変換する。

SVG

React Native

こんなときに使えます

  • Figma や Sketch から書き出したアイコンを、react-native-svg を使う Expo や React Native アプリ用のコンポーネントに変換する。
  • ネイティブコンポーネントとして組み込む前に、肥大化した SVG（title、エディターのメタデータ、未使用の defs）を削る。

使い方

  1. SVG エディターに SVG マークアップを貼り付けるか、.svg ファイルをドロップします。入力が有効な SVG でないと "This is not a valid svg code." と表示されます。
  2. SVGO の設定を開き、最適化をオフにしたり、remove title、remove view box、merge paths などのプラグインを個別に切り替えたりします。エディター下のプレビューで元の SVG と最適化後の SVG を比較できます。
  3. React Native パネルの出力を .js または .tsx ファイルにコピーし、アプリに react-native-svg をインストールします。

SVG マークアップ

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Check</title>
  <g fill="none" stroke="#16a34a" stroke-width="2">
    <circle cx="12" cy="12" r="10"/>
    <path d="M7 12.5l3 3 7-7"/>
  </g>
</svg>

React Native コンポーネント（react-native-svg）

import * as React from "react"
import Svg, { G, Circle, Path } from "react-native-svg"
const SvgComponent = (props) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <G fill="none" stroke="#16a34a" strokeWidth={2}>
      <Circle cx={12} cy={12} r={10} />
      <Path d="m7 12.5 3 3 7-7" />
    </G>
  </Svg>
)
export default SvgComponent

仕様と制限

SVGO の最適化はブラウザー内の Web Worker で実行されますが、JSX の生成はサーバーで行われます。最適化された SVG は /api/svg-to-jsx に POST され、そこで native: true を指定して SVGR が実行されます。

react-native-svg が対応していない要素は削除され、SVGR が /* SVGR has dropped some elements not supported by react-native-svg: filter */ のようなコメントを追加します。

SVGO は <style> のルールをインライン化してからスタイル宣言を属性に変換するため、style="stroke:blue" は stroke="#00f"（stroke prop）になります。<title> はデフォルトで削除されます。

width、height、viewBox は保持され、ルートの Svg に {...props} が展開されるので、サイズや色を上書きできます。

FAQ

出力には react-native-svg が必要ですか？

必要です。コンポーネントは react-native-svg から Svg と Path、Circle、G などの要素コンポーネントをインポートするため、プロジェクトにインストールしておく必要があります。通常の React Native の View だけでは動作しません。

アイコンを拡大縮小できるように viewBox を残せますか？

残せます。remove view box はデフォルトでオフなので、viewBox は Svg 要素に残ります。コンポーネントを使うときに width と height の prop を渡せば拡大縮小できます。

フィルターやグラデーションはどうなりますか？

filter のように react-native-svg に対応する要素がないものは削除され、ファイル先頭にコメントが付きます。未使用のグラデーションは SVGO の remove useless defs で削除されます。

SVG はアップロードされますか？

コンポーネントを生成するために、最適化された SVG はページの /api/svg-to-jsx エンドポイントに送信されます。最適化の手順とプレビューはブラウザー内で完結します。

仕様を確認する