从 Font Awesome 导入许多图标答案

【问题标题】：Import many icons from Font Awesome从 Font Awesome 导入许多图标
【发布时间】：2019-05-03 22:49:16
【问题描述】：

我正在导入许多 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 后面那个看起来像物体的东西是什么？

【问题讨论】：

标签： javascript ecmascript-6 destructuring javascript-import

【解决方案1】：

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

// 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));

【讨论】：

你可以在这里调用library.add(icons)，它应该可以工作。

【解决方案2】：

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

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

【讨论】：