Web Awesome 问候，最大的、最好的开源 Web 组件库。

React Native

将 Font Awesome 与 React Native 集成。您必须使用 React Native，否则此页面无法帮到您。

如何安装

我们假设您已经设置了 React Native 项目。如果您没有，可以在他们的文档中开始。

安装我们的组件、SVG 核心和 react-native-svg 库。

npm
yarn

npm i --save @fortawesome/react-native-fontawesome @fortawesome/fontawesome-svg-core react-native-svg

yarn add @fortawesome/react-native-fontawesome @fortawesome/fontawesome-svg-core react-native-svg

如果您使用的是裸 react-native-cli 项目，您需要在 iOS 上运行以下命令以完成设置

cd ios && pod install

添加一些图标样式

安装我们免费的 Solid、Brands 和 Regular 图标样式

npm
yarn

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-brands-svg-icons
yarn add @fortawesome/free-regular-svg-icons

如果您是 Pro 或 Pro Max 订阅者，您可以安装其他图标。安装我们的 Pro 软件包需要额外的配置。

完成 Pro 配置后，您可以添加 Pro 图标

npm
yarn

npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-thin-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons
npm i --save @fortawesome/sharp-solid-svg-icons
npm i --save @fortawesome/sharp-regular-svg-icons
npm i --save @fortawesome/sharp-light-svg-icons
npm i --save @fortawesome/sharp-thin-svg-icons

yarn add @fortawesome/pro-solid-svg-icons
yarn add @fortawesome/pro-regular-svg-icons
yarn add @fortawesome/pro-light-svg-icons
yarn add @fortawesome/pro-thin-svg-icons
yarn add @fortawesome/pro-duotone-svg-icons
yarn add @fortawesome/sharp-solid-svg-icons
yarn add @fortawesome/sharp-regular-svg-icons
yarn add @fortawesome/sharp-light-svg-icons
yarn add @fortawesome/sharp-thin-svg-icons

在您的项目中使用图标

有两种方法可以在您的 React Native 组件中使用 Font Awesome 图标

1. 显式导入

显式导入允许您对图标进行子集化并优化最终的捆绑包 - 只会包含您导入的图标。

import React, { Component } from 'react'
import { View } from 'react-native'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { faMugSaucer } from '@fortawesome/free-solid-svg-icons/faMugSaucer'

type Props = {}
export default class App extends Component<Props> {
  render() {
    return (
      <View>
        <FontAwesomeIcon icon={faMugSaucer} />
      </View>
    )
  }
}

2. 构建一个库

将图标显式地导入到您的应用程序中的多个组件中可能会很繁琐，因此您可能希望构建一个库，以便更容易地在多个组件中使用我们的图标。这样，您就可以在一个初始化模块中导入图标一次，将它们添加到库中，然后从任何组件中以字符串形式通过图标名称引用任何图标。

将图标添加到库后，无需将它们导入到每个组件中。

// in App.js
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faSquareCheck } from '@fortawesome/free-solid-svg-icons/faSquareCheck'
import { faMugEmpty } from '@fortawesome/free-solid-svg-icons/faMugEmpty'

library.add(fab, faSquareCheck, faMugSaucer)

我们将在上面的代码块中传递 fab，它代表 @fortawesome/free-brands-svg-icons 中的所有品牌图标。该软件包中的任何品牌图标都可以通过图标名称（字符串形式）在我们的应用程序中的其他任何地方引用。

我们分别添加了 faSquareCheck 和 faMugSaucer 图标，这使我们能够通过它们的图标字符串名称（分别为 square-check 和 mug-saucer）在整个应用程序中引用它们。

现在，我们可以在组件中使用图标

// in Beverage.js, or any functional component
import React from 'react'
import { View, Text } from 'react-native'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'

export const Beverage = () => (
  <View>
    <FontAwesomeIcon icon="square-check" />
    <Text>Favorite beverage: </Text>
    <FontAwesomeIcon icon="mug-saucer" />
    // Using mug-saucer is the same as fa-mug-saucer
    <Text>Favorite beverage: </Text>
    <FontAwesomeIcon icon="fa-mug-saucer" />
  </View>
)

使用其他图标样式

如果您已经导入了其他样式，您可以使用以下语法添加图标

// any component
import React from 'react'
import { View, Text } from 'react-native'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'

export const Gadget = () => (
  <View>
    // if no style prefix is given, icon defaults to a solid icon -->
    <FontAwesomeIcon icon="fa-square-check" />
    <Text>Popular gadgets come from vendors like:</Text>
    // regular icon
    <FontAwesomeIcon icon="fa-regular fa-flux-capacitor" />
    // light icon
    <FontAwesomeIcon icon="fa-light fa-alien" />
    // thin icon
    <FontAwesomeIcon icon="fa-thin fa-car" />
    // duotone icon
    <FontAwesomeIcon icon="fa-duotone fa-car-bolt" />
    // sharp solid icon
    <FontAwesomeIcon icon="fa-sharp fa-solid fa-car-bolt" />
    // sharp regular icon
    <FontAwesomeIcon icon="fa-sharp fa-regular fa-flux-capacitor" />
  </View>
)

您也可以使用数组语法。这不太友好，但您仍然可以使用它。

// These icons are the same Light icon
<FontAwesomeIcon icon="fal fa-alien" />
<FontAwesomeIcon icon={['fal', 'alien']} />

// These icons are the same Sharp Solid icon
<FontAwesomeIcon icon="fass fa-car-bolt" />
<FontAwesomeIcon icon={['fass', 'car-bolt']} />

// These icons are the same Sharp Regular icon
<FontAwesomeIcon icon="fasr fa-flux-capacitor" />
<FontAwesomeIcon icon={['fasr', 'flux-capacitor']} />

相同图标，不同样式

使用 ES 模块和 import 语句，我们可以重命名图标，这使我们能够以不同样式导入和使用相同的图标

import { library } from '@fortawesome/fontawesome-svg-core'
import { faStroopwafel as fasFaStroopwafel } from '@fortawesome/pro-solid-svg-icons/faStroopwafel'
import { faStroopwafel as farFaStroopwafel } from '@fortawesome/pro-regular-svg-icons/faStroopwafel'
import { faStroopwafel as fassFaStroopwafel } from '@fortawesome/sharp-solid-svg-icons/faStroopwafel'
import { faStroopwafel as fasrFaStroopwafel } from '@fortawesome/sharp-regular-svg-icons/faStroopwafel'

library.add(
  fasFaStroopwafel,
  farFaStroopwafel,
  fassFaStroopwafel,
  fasrFaStroopwafel
)

在以前版本的 react-native-fontawesome 中，我们这样记录导入图标的方式

import { faStroopwafel } from '@fortawesome/pro-solid-svg-icons'

这会导致项目的构建时间激增，因为 React Native 试图进行摇树优化。Font Awesome 软件包非常庞大，我们强烈建议您避免这种情况。

相反，默认情况下使用“深度导入”。

import { faStroopwafel } from '@fortawesome/pro-solid-svg-icons/faStroopwafel' // <- notice the additional module here?

通过直接从 faStroopwafel.js 模块中导入，摇树优化无需做任何额外工作来减小捆绑包的大小。

样式化这些图标

颜色

color 属性优先于通过 StyleSheet 设置颜色。因此，如果您同时使用两者，属性将胜出。实际上，当提供一个样式对象时（假设您已声明除了颜色之外的其他样式属性），如果指定了 color 属性，则在将样式对象传递给底层的 SVG 渲染库之前，会从样式对象中删除任何颜色属性。这是为了避免歧义。

建议优先使用 color 属性而不是 StyleSheet。

Color 属性

<FontAwesomeIcon icon={faMugSaucer} color={'red'} />

颜色 StyleSheet 属性

要设置图标的颜色，请提供一个 StyleSheet，如下所示

import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { faMugSaucer } from '@fortawesome/free-solid-svg-icons/faMugSaucer'

type Props = {}

const style = StyleSheet.create({
  icon: {
    color: 'blue'
  }
})

export default class App extends Component<Props> {
  render() {
    return (
      <View>
        <FontAwesomeIcon icon={faMugSaucer} style={style.icon} />
      </View>
    )
  }
}

大小

默认图标大小为 16。要调整图标大小，请使用 size 属性

<FontAwesomeIcon icon={faMugSaucer} size={32} />

其他功能

双色调

您可以使用 secondaryColor 和 secondaryOpacity 属性指定双色调的次要图层的颜色和不透明度。请注意，这些属性是可选的，它们只是默认使用您的主色，不透明度为 40%。

<FontAwesomeIcon
  icon="mug-saucer"
  color="blue"
  secondaryColor="red"
  secondaryOpacity={0.4}
/>

强大的变换

使用强大的变换控制图标的位置，以下是使用方法

  <FontAwesomeIcon icon="arrows-up-down-left-right" transform="shrink-6 left-4" />
  <FontAwesomeIcon icon="arrow-right" transform={{ rotate: 42 }} />

蒙版

想要将两个图标组合起来创建一个单色形状……请使用蒙版，以下是使用方法

<FontAwesomeIcon icon="mug-saucer" mask="circle" transform="shrink-6" />

请注意，我们还在使用强大的变换来使 mug-saucer 图标变小。如果不这样做，它就不会很好地拟合。

您也可以使用 maskId 显式地设置用于蒙版的 id。它通常是自动生成的，但这会导致 Jest 快照测试出现问题，因为该值可能会发生变化。

<FontAwesomeIcon
  icon="mug-saucer"
  mask="circle"
  maskId="mug-saucer-mask"
  transform="shrink-6"
/>