我拥有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中导入所有图标?
答案 0 :(得分:0)
实际上,您正在将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中的所有详细信息。
答案 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 指示灯的专业图标。这就是您可以使用专业图标的全部。希望与您的项目一起工作。祝您好运。