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

# React Native - アイコンフォントを導入してアイコンを使う【react-native-vector-icons】
React Nativeでアイコンフォントを利用してアイコンを表示します。
今回は[react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)を使用します。
## react-native-vector-icons?
世の中には沢山のIconFontがあります（FontAwesomeやIonIconsなど）が、[react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)では多くのアイコンフォントを一つのライブラリ利用可能にしてくれるものです。

## 利用できるアイコンの一覧(公式からコピペ)
**[Browse all](https://oblador.github.io/react-native-vector-icons/)**

- [`AntDesign`](https://ant.design/) by AntFinance (**297** icons)
- [`Entypo`](http://entypo.com) by Daniel Bruce (**411** icons)
- [`EvilIcons`](http://evil-icons.io) by Alexander Madyankin & Roman Shamin (v1.10.1, **70** icons)
- [`Feather`](http://feathericons.com) by Cole Bemis & Contributors (v4.21.0, **279** icons)
- [`FontAwesome`](http://fortawesome.github.io/Font-Awesome/icons/) by Dave Gandy (v4.7.0, **675** icons)
- [`FontAwesome 5`](https://fontawesome.com) by Fonticons, Inc. (v5.13.0, 1588 (free) **7842** (pro) icons)
- [`Fontisto`](https://github.com/kenangundogan/fontisto) by Kenan Gündoğan (v3.0.4, **615** icons)
- [`Foundation`](http://zurb.com/playground/foundation-icon-fonts-3) by ZURB, Inc. (v3.0, **283** icons)
- [`Ionicons`](https://ionicons.com/) by Iconic Framework (v5.0.1, **1227** icons)
- [`MaterialIcons`](https://www.google.com/design/icons/) by Google, Inc. (v3.0.1, **932** icons)
- [`MaterialCommunityIcons`](https://materialdesignicons.com/) by MaterialDesignIcons.com (v5.3.45, **5346** icons)
- [`Octicons`](http://octicons.github.com) by Github, Inc. (v8.4.1, **184** icons)
- [`Zocial`](http://zocial.smcllns.com/) by Sam Collins (v1.0, **100** icons)
- [`SimpleLineIcons`](https://simplelineicons.github.io/) 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は私のプロジェクト名なので読み替えてください)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253700/d2fdd283-06f3-403a-6a14-ac390c5c1728.png)

4. `node_modules/react-native-vector-icons/Fonts`に入っているttfファイルを全て（利用状況によって減らしても良い）先ほど作成した`Fonts`グループにドラッグアンドドロップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253700/5c98052a-455d-98e8-6c76-a04ded067f63.png)
5. 確認が出るので一番上にチェックがついてることを確認してFinishします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253700/b7da1968-3677-1eed-d933-e63f64fbae9e.png)
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](https://github.com/oblador/react-native-vector-icons)

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

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