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

时间:2018-07-12 00:16:08

标签: vue.js import font-awesome

我拥有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中导入所有图标?

2 个答案:

答案 0 :(得分:0)

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

如评论中所述,如果您具有 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中的所有详细信息。

答案 1 :(得分:0)

我试图将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 指示灯的专业图标。这就是您可以使用专业图标的全部。希望与您的项目一起工作。祝您好运。