React Native Vector Icons 簡介

通常我們需要使用到 Icons 時，都會前往常用的一些 Icon 網站取得相關工具包檔案

現在，在React Native Vector Icons 就一次幫你整合市面上常用的 Icon 類型，容易使用及修改

可以讓我們更簡單就能使用，真的非常方便

這裡僅節錄在RN使用時的一些筆記，關於網頁用法及其他細節部分請再直接參考官方說明

底下是他所提供的 Icon 類別，多是知名主流Icon:

• Entypo by Daniel Bruce (411 icons)
• EvilIcons by Alexander Madyankin & Roman Shamin (v1.8.0, 70 icons)
• Feather by Cole Bemis & Contributors (v3.2.2, 240 icons)
• FontAwesome by Dave Gandy (v4.7.0, 675 icons)
• Foundation by ZURB, Inc. (v3.0, 283 icons)
• Ionicons by Ben Sperry (v3.0.0, 859 icons)
• MaterialIcons by Google, Inc. (v3.0.1, 932 icons)
• MaterialCommunityIcons by MaterialDesignIcons.com (v2.0.46, 2046 icons)
• Octicons by Github, Inc. (v6.0.1, 177 icons)
• Zocial by Sam Collins (v1.0, 100 icons)
• SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons)

安裝方式

npm install react-native-vector-icons --save

使用方式

這裡舉例FontAwesome

Icon Component

Icon component 一共有三個參數可以使用 - size, name, color

import Icon from 'react-native-vector-icons/dist/FontAwesome';
const myIcon = (<Icon name="rocket" size={30} color="#900" />)

並且可以搭配 style 來調整顯示樣式，例如下方這些 style屬性

backgroundColor borderWidth borderColor borderRadius padding margin color fontSize

Icon Button

可以使用Icon component 的 Button 方法，來產生按鈕

並且有底下屬性可以使用

color, size, iconStyle, backgroundColor, borderRadius, onPress

import Icon from 'react-native-vector-icons/FontAwesome';
const myButton = (
  <Icon.Button name="facebook" backgroundColor="#3b5998" onPress={this.loginWithFacebook}>
    Login with Facebook
  </Icon.Button>
);

const customTextButton = (
  <Icon.Button name="facebook" backgroundColor="#3b5998">
    <Text style={{fontFamily: 'Arial', fontSize: 15}}>Login with Facebook</Text>
  </Icon.Button>
);