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