React Native でアイコン画像の実装とアイコンの探し方

React Native でアイコンを実装するやり方です。

React Native Vector Icons で簡単にアイコンやアイコン付きのボタンが実装できます。 特別難しいことはありませんがやり方を紹介します。

Expo を使っている場合は @expo/vector-icons を使うことができます。

ついでに目的のアイコンの探しかたも書いておきます。

概要

• React Native Vector Icons
• @expo/vector-icons
• アイコンの探し方

React Native Vector Icons

React Native Vector Icons を使う場合の実装を紹介です。

https://github.com/oblador/react-native-vector-icons

インストール

いつも通り npm もしくは yarn でのインストールです。

npm install react-native-vector-icons

アイコンを実装

使えるアイコンセットには種類がいくつかあり、その中から必要なものを選択します。

• 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.28.0, 285 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. (v4.0.0, 1547 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)

コンポーネントの引数としてアイコンの名前を指定して表示できます。他にもサイズと色を指定できます。 スタイルも渡せるので背景色や角丸・ボーダーなどの設定も可能です。

アイコン付きボタンコンポーネントも用意されています。

import Icon from "react-native-vector-icons/MaterialIcons";
~~~

   <Icon size={26} name="info" color="#666" />
   <Icon.Button
     name="info"
     backgroundColor="#888"
     onPress={()=>{}}
   >
     info
   </Icon.Button>

@expo/vector-icons

Expo を使っている場合はこちらで実装します。Expo のパッケージに含まれています。 使い方はほとんど同じですね。内部的には React Native Vector Icons を使っているようで、バージョンによってアイコンの有無に差がありますので注意しましょう。

import { Ionicons } from '@expo/vector-icons';

~~~

    <Ionicons name="md-checkmark-circle" size={32} color="green" />;

~~~

アイコンの探し方

アイコンを探せるWebページを自作した

目的のアイコンを探すときはいつも公式のページを使っていましたが、ちょっと探しにくかったので自分でアイコン探せる web ページを作成しました。

React Native U-tools / @expo/vector-icons preview

react-native-web で Web ページとしてみれるようにしているので、アプリでの表示と異なる部分があります。 アイコン探す分には十分なので私はこれを使ってます。

パッケージのバージョンなどによって、使えないアイコンとかがあるのでそこは注意してください。

公式のアイコンを探せるページ

以下は公式で用意されている一覧のページです。

アイコンセットを横断して探すことができて便利です。もちろんそれぞれのアイコンセットでフィルタリングもできます。 それぞれのアイコンセットのページで探すことも可能ですが、UIがバラバラで使いにくいものもあります。

https://icons.expo.fyi/

https://oblador.github.io/react-native-vector-icons/

おわりに

アプリのUIでアイコンを使いたい場面は多いです。 React Native Vector Icons・Expo を使うことで良質なアイコンを簡単に実装できるので覚えておくと良いです。

種類がたくさんあるのでアイコン画像を探すのは結構大変です。 お気に入りのアイコンセットを記録しておいて、思いついた時に使えるようにストックしておけるとデザインの幅が増えるのでおすすめです。