Vue-FontAwesome：如何导入所有免费和专业图标？重复声明错误

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)

如何导入免费版和专业版中的所有图标？

Answer 1

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

正如评论中所述，如果您有FontAwesome Pro，则包含 FontAwesome Free 中的所有内容。导入您需要的专业包，忘记免费版本。

话虽这么说，导入整个东西并不理想。如果您使用具有 Tree Shaking 功能的包管理器（即 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)

有关所有这些的更多信息，请参阅 FA-Pro 的官方文档。