React App，在 React VS Vue 中使用 Font Awesome 品牌图标答案

【问题标题】：React App, Using Font Awesome brand icons in React VS VueReact App，在 React VS Vue 中使用 Font Awesome 品牌图标
【发布时间】：2019-05-04 03:59:50
【问题描述】：

我正在尝试使用 Font Awesome 中的品牌图标，我之前已经在 vue 应用程序中使用过它，它与使用常规的 svg 图标有点不同，因为品牌库与常规的实体 svg 图标是分开的。这就是我在 vue 应用程序中使用的方式。

// imports in the main.js file
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faFacebookF } from '@fortawesome/free-brands-svg-icons';

library.add(faCoffee, faFacebookF);

Vue.component('fa-icon', FontAwesomeIcon)

// usage in a vue component - regular svg icons 
<fa-icon icon="coffee" />
// brand icon 
<fa-icon class="ic right" :icon="['fab', 'facebook-f']" />

现在我正在尝试在 React 应用程序中做类似的事情，但我有点卡在哪里以及如何导入和使用它，在 Vue 中，我在 main.js 中全局定义了 <fa-icon />，但是React 的情况有些不同。这是我在反应组件中的尝试。

// imports in my app.js file 
import React from 'react';

import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFacebookF } from '@fortawesome/free-brands-svg-icons';

library.add(faCoffee, faFacebookF)
//this works 
<FontAwesomeIcon icon="coffee" />
//this does not
<FontAwesomeIcon icon={"['fab', 'facebook-f']"} />

提前致谢。

【问题讨论】：

标签： reactjs vue.js font-awesome

【解决方案1】：

<FontAwesomeIcon icon={['fab', 'facebook-f']} />

https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently

【讨论】：

【解决方案2】：

安装所有免费字体真棒图标 - 在您的项目位置使用 cmd：

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

为 Font Awesome 导入这个：

import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";

为你的 JSX 添加 Font Awesome：

<FontAwesomeIcon icon={faFacebookF}></FontAwesomeIcon>
<FontAwesomeIcon icon={faTwitter}/>
<FontAwesomeIcon icon={faGoogle}/>

最后，从已安装的存储库中导入您的品牌图标：

import {faFacebookF, faGoogle, faTwitter} from "@fortawesome/free-brands-svg-icons";

【讨论】：