Help us understand the problem. What is going on with this article?

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

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

React Nativeでアイコンフォントを利用してアイコンを表示します。
今回はreact-native-vector-iconsを使用します。

react-native-vector-icons?

世の中には沢山のIconFontがあります(FontAwesomeやIonIconsなど)が、react-native-vector-iconsでは多くのアイコンフォントを一つのライブラリ利用可能にしてくれるものです。

利用できるアイコンの一覧(公式からコピペ)

Browse all

  • 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.21.0, 279 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. (v3.0.1, 932 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)

こんだけあればアイコンには困らないと思いますが、普通に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

  4. node_modules/react-native-vector-icons/Fontsに入っているttfファイルを全て(利用状況によって減らしても良い)先ほど作成したFontsグループにドラッグアンドドロップします。
    image.png

  5. 確認が出るので一番上にチェックがついてることを確認してFinishします
    image.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

利用手順

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

App.tsx
import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = <Icon name="home" size={30} color="#900" />;
unotovive
Web系の技術に興味を持ってちょこちょこと触っていきます. https://twitter.com/unotovive
http://unotovive.me
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした