Question

我拥有FontAwesome Pro许可证，并且使用了Vue-FontAwesome组件。

当我尝试从免费和专业版仓库中导入所有图标时，出现“重复声明错误...”，如果更改声明名称，将无法再找到它。

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { fas } from '@fortawesome/pro-solid-svg-icons'
import { far } from '@fortawesome/pro-regular-svg-icons'
import { fal } from '@fortawesome/pro-light-svg-icons'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'

library.add(fab)
library.add(fas)
library.add(far)
library.add(fal)

如何从Free和Pro中导入所有图标？

Answer 1

实际上，您正在将far和fas的多个图标包导入到同一变量中，因此会出现错误“重复声明”。

如评论中所述，如果您具有 FontAwesome Pro ，则其中包括FontAwesome Free中的所有内容。导入您需要的专业版软件包，而无需考虑免费版本。

话虽如此，导入整个内容并不理想。如果您使用的捆绑管理器带有摇晃的树（即webpack），它将使应用程序的重量影响减少十倍。您很少需要所有5k图标。

继续沿着那条路前进；不导入整个程序包：您可以通过导入和投射不同的图标版本来导入它们。像这样：

import { library } from '@fortawesome/fontawesome-svg-core'

import { faCoffee as fasCoffee } from '@fortawesome/pro-solid-svg-icons'
import { faCoffee as farCoffee } from '@fortawesome/pro-regular-svg-icons'
import { faCoffee as falCoffee } from '@fortawesome/pro-light-svg-icons'

library.add(fasCoffee, farCoffee, falCoffee)

the official docs for FA-Pro中的所有详细信息。

Answer 2

我试图将Fontawesome pro图标添加到Vuetify（1.5.x）。我发现了一个孤独。我与您分享此解决方案。

首先，在您的项目目录中，创建一个名为 .npmrc 的文件并将其添加到其中：

@fortawesome:registry=https://npm.fontawesome.com/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX,

使用npm或yarn安装fontawesome-pro软件包

npm install --save-dev @fortawesome/fontawesome-pro

或

yarn add --dev @fortawesome/fontawesome-pro

在app.js或main.js中添加此行

import '@fortawesome/fontawesome-pro/css/all.css'

安装专业图标包

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

您可以使用带有前缀（ fas 稳定， far 常规 fal 指示灯的专业图标。这就是您可以使用专业图标的全部。希望与您的项目一起工作。祝您好运。

Vue-FontAwesome：如何导入所有Free和Pro图标？声明重复错误

2 个答案: