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

Posted 2023-02-23

【中文标题】React App，在 React VS Vue 中使用 Font Awesome 品牌图标

【英文标题】：React App, Using Font Awesome brand icons in React VS Vue

【发布时间】：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']" />

提前致谢。

【参考方案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";