如何使用FontAwesome v6导入单个图标

Question

我有一个使用NPM/Webpack构建过程的Laravel web应用程序，目前正在像这样导入SCSS图标表版本的FontAwesome:

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands'; 

这比加载每一个FontAwesome图标的默认设置更轻量，但当我在整个项目中使用不到20个图标时，仍然会导致加载数千个图标。

因此，我想转移到导入单个图标，如下所示。

我卸载了旧的包，并安装了上面链接所要求的那些包:

npm uninstall @fortawesome/fontawesome-free
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons

然后我将以下内容添加到我的项目的bootstrap.js(所有其他外部导入都存在):

import { library } from "@fortawesome/fontawesome-svg-core";
import { faMugHot } from "@fortawesome/free-solid-svg-icons";
import { faBolt } from "@fortawesome/free-solid-svg-icons";
library.add(faMugHot, faBolt);

并在我的标记中添加了两个示例图标，如下所示:

<i class="fas fa-mug-hot"></i>
<i class="fas fa-bolt"></i>

最后我运行npm run dev重建JS，但两个图标都无法显示。

我还尝试启用在使用SVG Core包时默认禁用的选项:

import { config } from "@fortawesome/fontawesome-svg-core";
config.autoReplaceSvg = true;
config.observeMutations = true;
import { library } from "@fortawesome/fontawesome-svg-core";
import { faMugHot } from "@fortawesome/free-solid-svg-icons";
import { faBolt } from "@fortawesome/free-solid-svg-icons";
library.add(faMugHot, faBolt); 

…但这没有任何区别。

这似乎是上面的文档建议的方法，那么我在这里做错了什么?

Answer 1

我安装的包和HTML标记都在正确的轨道上-不幸的是，由于某种原因，我的JavaScript无法工作，尽管直接从文档中窃取。这是我的工作，改编自另一个文档的部分。

import { library, dom, config } from "@fortawesome/fontawesome-svg-core";
config.searchPseudoElements = true; 
// Optional setting to replace FontAwesome icons 
// in CSS pseudoselectors with SVG equivalents
import {
faMagnifyingGlass,
faLock,
faCheck
} from "@fortawesome/free-solid-svg-icons";
library.add(
faMagnifyingGlass,
faLock,
faCheck
);
// Replace any existing <i> tags with <svg> and set up a MutationObserver to
// continue doing this as the DOM changes.
dom.i2svg();
dom.watch();

这个解决方案现在只加载和构建三个指定的图标，而不是加载数千个额外的图标。

请注意，导入config对象是可选的，只有当您想修改上述配置时才需要。