React Native - アイコンフォントを導入してアイコンを使う【react-native-vector-icons】

React Nativeでアイコンフォントを利用してアイコンを表示します。
今回はreact-native-vector-iconsを使用します。

react-native-vector-icons?

世の中には沢山のIconFontがあります（FontAwesomeやIonIconsなど）が、react-native-vector-iconsでは多くのアイコンフォントを一つのライブラリ利用可能にしてくれるものです。

利用できるアイコンの一覧(公式からコピペ)

Browse all

• AntDesign by AntFinance (297 icons)
• Entypo by Daniel Bruce (411 icons)
• EvilIcons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)
• Feather by Cole Bemis & Contributors (v4.21.0, 279 icons)
• FontAwesome by Dave Gandy (v4.7.0, 675 icons)
• FontAwesome 5 by Fonticons, Inc. (v5.13.0, 1588 (free) 7842 (pro) icons)
• Fontisto by Kenan Gündoğan (v3.0.4, 615 icons)
• Foundation by ZURB, Inc. (v3.0, 283 icons)
• Ionicons by Iconic Framework (v5.0.1, 1227 icons)
• MaterialIcons by Google, Inc. (v3.0.1, 932 icons)
• MaterialCommunityIcons by MaterialDesignIcons.com (v5.3.45, 5346 icons)
• Octicons by Github, Inc. (v8.4.1, 184 icons)
• Zocial by Sam Collins (v1.0, 100 icons)
• SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons)

---

こんだけあればアイコンには困らないと思いますが、普通にyarn add react-native-vector-iconsしただけでは動かないため、導入方法のメモです（リポジトリのReadmeにも英語で書いてあります）

導入手順(ios)

1. yarn add react-native-vector-iconsでとりあえず入れます。

2. プロジェクトのiosフォルダ内にあるxcodeprojフォルダをXCodeで開きます。

3. プロジェクトにFontsグループを作成します（右クリック → New Group）
   ※giralは私のプロジェクト名なので読み替えてください)
   

4. node_modules/react-native-vector-icons/Fontsに入っているttfファイルを全て（利用状況によって減らしても良い）先ほど作成したFontsグループにドラッグアンドドロップします。
   

5. 確認が出るので一番上にチェックがついてることを確認してFinishします
   

6. ios/プロジェクト名/Info.plistにロードするフォントの情報を書き加えます

Info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
...中略
　<key>UIAppFonts</key>
　<array>
　　<string>AntDesign.ttf</string>
　　<string>Entypo.ttf</string>
　　<string>EvilIcons.ttf</string>
　　<string>Feather.ttf</string>
　　<string>FontAwesome.ttf</string>
　　<string>FontAwesome5_Brands.ttf</string>
　　<string>FontAwesome5_Regular.ttf</string>
　　<string>FontAwesome5_Solid.ttf</string>
　　<string>Foundation.ttf</string>
　　<string>Ionicons.ttf</string>
　　<string>MaterialCommunityIcons.ttf</string>
　　<string>MaterialIcons.ttf</string>
　　<string>Octicons.ttf</string>
　　<string>SimpleLineIcons.ttf</string>
　　<string>Zocial.ttf</string>
　　<string>Fontisto.ttf</string>
 　</array>
</dict>
</plist>

7 . 最後にXCodeのメニューでProduct > Clean Build Folderを実行すれば準備完了です。

導入手順(Android)

1. android/app/build.gradle（注意：android/build.gradleではない）に以下の一文を追記します

build.gradle

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

かんたん！

導入手順(その他)

この記事では触れないので公式ドキュメント読んでください。
react-native-vector-icons

利用手順

これも詳しくは触れませんがこんな感じで割と適当に使えます

App.tsx

import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = <Icon name="home" size={30} color="#900" />;