React Nativeのタブバーでは標準のシステムアイコンを利用できますが、その他の場所でアイコンを利用するには別途導入が必要となります。 この記事では、react-native-vector-iconsによるアイコンの導入方法を紹介します。

react-native-vector-iconsについて

react-native-vector-iconsは、Font AwesomeやOcticonsといった有名なアイコンフォントや、FontelloによるオリジナルアイコンをReact Nativeに導入できるパッケージです。

また、タブバーだけでなく、アプリの任意の場所にアイコンを設置することができます。

動作環境

この記事の内容は以下のバージョンで動作を確認しています。

  • react-native-vector-icons 2.0.3
  • rnpm 1.9.0
  • Xcode 7.3.1

導入方法

1. インストールする

react-native-vector-iconsはnpmをとおしてインストールします。 また、React Nativeのパッケージ管理ツールrnpmもあわせてインストールしておきます。

$ npm install --save react-native-vector-icons
$ npm install -g rnpm

2. パッケージをリンクする

ネイティブからパッケージを参照するには、パッケージをリンクさせる必要があります。

手動で行なう方法もありますが、以下のコマンドを実行すると、これを自動で実行してくれます。

$ rnpm link

3. アイコンを表示する

以上で、アイコンを表示する準備が整いました。 あとは、コードからアイコンフォントをimportして：

import Icon from 'react-native-vector-icons/FontAwesome';

表示したい場所で<Icon />タグを記述するだけです。

render() {
  return (
    <View>
      <Text><Icon name="home" />Home</Text>
    </View>
  );
}

おわりに

React Nativeにおけるアイコンフォントの導入は簡単で、かつ一度やっておくといろんな場所に利用できてとても便利です。 アイコン導入の際は参考にしてみてください。