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

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" />;

~~~

アイコンの探し方

目的のアイコンを探すときはいつも以下のページを使っています。 それぞれのアイコンセットのページで探すことも可能ですが、UIがバラバラで使いにくいものもあります。

以下で探すとアイコンセットを横断して探すことができて便利です。もちろんそれぞれのアイコンセットでフィルタリングもできます。

https://icons.expo.fyi/

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

おわりに

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

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

  • このエントリーをはてなブックマークに追加