React NativeでSVGを使う

1. 必要なパッケージのインストール

$ npm i react-native-svg

2. SVGアイコンとなるコンポーネントファイルの作成

import React from 'react';
import Svg, { Polygon, Line } from 'react-native-svg';

const AlertOctagon = (props) => (
  <Svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke={props.color} // アイコンの色をpropsから受け取る
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round">
    <Polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></Polygon>
    <Line x1="12" y1="8" x2="12" y2="12"></Line>
    <Line x1="12" y1="16" x2="12.01" y2="16"></Line>
  </Svg>
);

export { AlertOctagon };

※アイコンはFeather Iconsを使用

要点

• 使いたいSVGのタグをアッパーキャメルに変更する
  ex. <svg></svg>→<Svg></Svg>, <path />→<Path /> ...etc
• xmlns・xmlns:xlink属性は削除する

3. アイコンを使用したいファイルで読み込む

import React from 'react';
import { AlertOctagon } from './components/Icons';

export default function App() {
  return (
    <>
      <AlertOctagon color="red" />
      <AlertOctagon color="blue" />
      <AlertOctagon color="green" />
      <AlertOctagon color="purple" />
      <AlertOctagon color="yellow" />
    </>
  );
}

サイズとか色を可変にしたかったらpropsで渡してあげればOK