React Native Vector Icons

2025 年 1 月 12 日 | 5 分钟阅读

React Native 矢量图标是 NPM GitHub 库中最受欢迎的自定义图标。它拥有超过 3K (3000) 个图标集合。所有这些图标都是免费使用的。React Native 矢量图标带有完整的自定义功能，例如图标大小、图标颜色，并且它还支持多种样式。

以下是 React Native 矢量图标中可用的图标类别列表。您也可以访问 https://oblador.github.io/react-native-vector-icons/ 查看这些图标。

AntDesign by AntFinance（297 个图标）
Entypo by Daniel Bruce（411 个图标）
EvilIcons by Alexander Madyankin & Roman Shamin（v1.10.1，70 个图标）
Feather by Cole Bemis & 贡献者（v4.21.0，279 个图标）
FontAwesome by Dave Gandy（v4.7.0，675 个图标）
FontAwesome 5 by Fonticons, Inc.（v5.7.0，1500（免费）5082（专业版）个图标）
Fontisto by Kenan Gündo?an（v3.0.4，615 个图标）
Foundation by ZURB, Inc.（v3.0，283 个图标）
Ionicons by Ben Sperry（v4.2.4，696 个图标）
MaterialIcons by Google, Inc.（v3.0.1，932 个图标）
MaterialCommunityIcons by MaterialDesignIcons.com（v3.6.95，3695 个图标）
Octicons by Github, Inc.（v8.4.1，184 个图标）
Zocial by Sam Collins（v1.0，100 个图标）
SimpleLineIcons by Sabbir & 贡献者（v2.4.1，189 个图标）

安装 React Native 矢量图标

1. 在命令提示符中打开您的 react native 项目文件夹并执行以下代码

成功执行上述代码后，它会添加 react-native-vector-icons 库。

2. 打开 您的_react_native_project->android -> app -> build.gradle 文件，并在其中放置以下代码行。

3. 再次打开 您的_react_native_project -> android -> app -> build.gradle 文件，并将以下代码放入 dependency 块中。

您的_react_native_project->android -> app -> build.gradle

添加以上代码后，build.gradle 文件如下所示

apply plugin: "com.android.application"
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
import com.android.build.OutputFile

project.ext.react = [
    entryFile: "index.js"
]

apply from: "../../node_modules/react-native/react.gradle"

def enableSeparateBuildPerCPUArchitecture = false

/**
 * Run Proguard to shrink the Java bytecode in release builds.
 */
def enableProguardInReleaseBuilds = false

android {
    compileSdkVersion rootProject.ext.compileSdkVersion
    buildToolsVersion rootProject.ext.buildToolsVersion

    defaultConfig {
        applicationId "com.vectoricons"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86"
        }
    }
    buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
            def versionCodes = ["armeabi-v7a":1, "x86":2]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }
}

dependencies {
    compile project(':react-native-vector-icons')
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.facebook.react:react-native:+"  // From node_modules
    implementation project(':react-native-vector-icons')
}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

4. 打开 您的_react_native_project-> android-> settings.gradle 文件并添加以下代码

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

您的_react_native_project-> android-> settings.gradle

rootProject.name = 'VectorIcons'
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
include ':app'

5. 打开 您的_react_native_project -> android -> app -> src -> main -> java-> com-> your_project_name -> MainApplication.java 文件，并使用以下代码行导入矢量图标包。

6. 在 MainApplication.java 文件中，在 return Arrays.asList() 块内调用 react native 矢量图标的以下包名。

MainApplication.java

package com.vectoricons;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import com.oblador.vectoricons.VectorIconsPackage;
import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new VectorIconsPackage()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }
  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

依赖项的链接

安装上述代码后，我们需要将其与我们的项目链接。

在 App.js 文件中，在 render 块内创建两个名为 facebook_button 和 twitter_button 的常量。我们将这些常量直接调用到 TouchableOpacity 组件中。Icon.Button 的 props 如下

Props	描述
name=" "	在此 prop 中，我们传递图标的名称。
backgroundColor=" "	它用于设置按钮的颜色。
size={}	它设置按钮的大小。
onPress={}	它表示按钮上的 onPress 事件。
color	它设置文本和图标的颜色。

在 render 块内创建另外两个名为 android_icon 和 music_icon 的 Icon 常量。

Props	描述
name=" "	在此 prop 中，我们传递图标的名称。
size={}	它设置图标的大小。
color=" "	它设置图标的颜色。
onPress={}	它是按钮上的 onPress 事件。

App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity, Alert} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
      const facebook_button = (
        <Icon.Button name="facebook" backgroundColor="#3b5998" size={20} onPress={()=>{Alert.alert("Facebook Button Clicked")}}>
          <Text style={{fontFamily: 'Arial', fontSize: 15, color: '#fff'}}>Login with Facebook</Text>
        </Icon.Button>
      );
    
      const twitter_button = (
       <Icon.Button name="twitter" backgroundColor="#51aaf0" size={20} onPress={()=>{Alert.alert("Twitter Button Clicked")}}>
         <Text style={{fontFamily: 'Arial', fontSize: 15, color: '#fff'}}>Follow Us on Twitter</Text>
       </Icon.Button>
      );

      const android_icon = (
       <Icon name="android" size={60} color="#007c00" onPress={()=>{Alert.alert("Android Icon Clicked")}} />
      );
 
      const music_icon = (
       <Icon name="music" size={60} color="#fb3742" onPress={()=>{Alert.alert("Music Icon Clicked")}} />
      );

    return (
      <View style={styles.MainContainer}>
          <TouchableOpacity>
            {facebook_button}
         </TouchableOpacity>
  
        <TouchableOpacity style={{marginTop: 10}}>
           {twitter_button}
         </TouchableOpacity>
 
 
        <TouchableOpacity style={{marginTop: 10}}>
           {android_icon}
         </TouchableOpacity>
 
        <TouchableOpacity style={{marginTop: 10}}>
          {music_icon}
        </TouchableOpacity>
      </View>
 
    );
 
  }
}
const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    padding: 20
  }
});

输出