React Native で自分で用意したアイコンフォントを使う方法

WEBアプリでカスタムアイコンを使用したい場合はFontello/Icomoon等を使ってアイコンフォントを作成するかと思います。
今回はアイコンフォントをReact Nativeのアプリでも使用する方法について説明します。

1. React Nativeで使用したいアイコンフォントをプロジェクトにインポートする

アイコンフォントの作り方は省略します。Icomoonで作成するのと以下のようなファイルが生成されます。

.
├── Read\ Me.txt
├── demo-files
│   ├── demo.css
│   └── demo.js
├── demo.html
├── fonts
│   ├── NCR-icon.eot
│   ├── NCR-icon.svg
│   ├── NCR-icon.ttf
│   └── NCR-icon.woff
├── selection.json
└── style.css

アイコンフォントを用意したら、プロジェクトにファイルをコピーします。

src/assets
└── fonts
    ├── NCR-icon.ttf
    └── selection.json

今回はsrc/assets/fontsディレクトリを作成して、配下に*.ttfとselection.json(Icomoon)、Fontelloの場合はconfig.jsonをコピーします。

次に追加したアイコンフォントのリンク付けをします。

package.jsonに以下を追加します。(rnpmをインストールしていない場合はしておいてください。)

package.json

  "rnpm": {
    "assets": [
      "./src/assets/fonts"
    ]
  }

package.jsonに追記したら以下を実行してリンクさせます。

$ rnpm link

2. react-native-vector-icons をインストール

アイコンフォントの表示にはreact-native-vector-iconsを使用します。

$ npm i -S react-native-vector-icons
$ rnpm link

Info.plistのFonts provided by applicationにfontが追加されているか確認する。（ない場合は手動で追加してください）

3. 使い方

import

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
// import { createIconSetFromFontello } from 'react-native-vector-icons'; // Fontello の場合はこっち
import customFontIcon from '../../../assets/fonts/selection.json'; // 適宜変更してください
const Icon = createIconSetFromIcoMoon(customFontIcon);

JSX

JSXで以下の様に書くとフォントアイコンが表示されます。

<Icon name="info" />

全体

コンポーネント全体はこんな感じ

import React, { Component, PropTypes } from 'react';
import { compose, setPropTypes } from 'recompose';
import { TouchableOpacity } from 'react-native';

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import customFontIcon from '../../../assets/fonts/selection.json';
const Icon = createIconSetFromIcoMoon(customFontIcon);

export default compose(
  setPropTypes({
    name: PropTypes.string.isRequired,
    color: PropTypes.string,
    size: PropTypes.number,
    onPress: PropTypes.func,
  }),
)(class FontIcon extends Component {

  renderFontIcon() {
    const { name, color, size} = this.props;
    return (
      <Icon name={name} color={color} size={size} />
    );
  }

  render() {
    const { onPress } = this.props;

    return onPress != undefined ? (
      <TouchableOpacity onPress={onPress}>
        {this.renderFontIcon()}
      </TouchableOpacity>
    ) : this.renderFontIcon();
  }
});