Question

我正在尝试使用Font Awesome中的品牌图标，我之前已经在vue应用程序中使用过它，它与使用常规svg图标有些不同，因为brands库与常规的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中，我在{{1 }}，但与React有所不同。这是我对react组件的尝试。

<fa-icon />

提前致谢。

Answer 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

Answer 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

为此输入“真棒字体”：

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

将真棒字体添加到您的JSX：

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

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

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

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

2 个答案: