从 Font Awesome 导入许多图标

Question

我正在导入许多 FA 图标：

import { faUsers, faCut, faBullhorn, faPenNib, faCircle, faPalette, faVolumeUp, faSmile, faGrin, faShekelSign, faTv, faUserTie, faFolder, faPaintBrush, faCircleNotch, faSignOutAlt } 
from '@fortawesome/free-solid-svg-icons'

library.add(faUsers, faCut, faBullhorn, faPenNib, faCircle, faPalette, faVolumeUp, faSmile, faGrin, faShekelSign, faTv, faUserTie, faFolder, faPaintBrush, faCircleNotch, faSignOutAlt)

我如何声明该列表一次然后重新使用它？它会是一个数组吗？或者一个对象......什么？

我在想

const icons = {faUsers, faCut, faBullhorn, faPenNib, faCircle, faPalette, faVolumeUp, faSmile, faGrin, faShekelSign, faTv, faUserTie, faFolder, faPaintBrush, faCircleNotch, faSignOutAlt}

import icons from '@fortawesome/free-solid-svg-icons'

但这当然行不通。我会为 library.add() 做什么？

import 后面那个看起来像物体的东西是什么？

Answer 1

import 和 export 被定义为可静态分析的，因此它们不能依赖于运行时信息。因此，import 语句是不可能的。

导入后看起来像东西的对象称为命名导入，用于从导出项目列表中获取选定项目。例如，fontawesome 具有通过单个文件导出的所有图标对象。现在您可以使用 import { ... } 只导入您需要的项目。

Answer 2

一个解决方案是创建一个导出特定图标的新模块。

// icons.js
export {
    faUsers,
    faCut,
    faBullhorn,
    faPenNib,
    faCircle,
    faPalette,
    faVolumeUp,
    faSmile,
    faGrin,
    faShekelSign,
    faTv,
    faUserTie,
    faFolder,
    faPaintBrush,
    faCircleNotch,
    faSignOutAlt
} from '@fortawesome/free-solid-svg-icons';

然后您可以简单地导入新模块并使用 spread syntax。

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

import * as icons from './icons';

library.add(...Object.values(icons));

从 Font Awesome 导入许多图标

Import many icons from Font Awesome

javascript

destructuring

ecmascript-6

javascript-import