从字体中导入许多图标很棒

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

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

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

然后，您可以简单地导入新的模块并使用差异语法或直接使用它。

// library.js
import {library} from '@fortawesome/fontawesome-svg-core'
import * as icons from './icons';
// using the spread syntax
library.add(...Object.values(icons));
// or using the variable directly 
library.add(icons);

Answer 2

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

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