代码之家 › 专栏 › 技术社区 › Hashim Aziz

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

font-awesome-6 font-awesome build npm laravel

0

Hashim Aziz · 技术社区 · 2 年前

在我基于Laravel构建的web应用程序中,它在引擎盖下使用npm/web包构建过程,我目前正在使用FontAwesome的SCSS图标表版本,如下所示:

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

这比加载每个FontAwesome图标的默认设置更加轻量级,但在整个项目中使用不到20个图标时,仍会加载数千个图标。

因此,我想导入单个图标,如文档所示 here in the docs 。

我卸载了旧软件包,并安装了上面链接所需的软件包:

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

终于跑了 npm run dev 重建JS,但我正在加载的两个示例图标都无法显示。

我正在引用标记中的图标,如下所示:

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

我还尝试启用 options that are disabled by default 使用SVG核心包时:

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

。。。但这也不会使图标加载。

这似乎是这里的文档建议的方法,为什么它对我不起作用呢?我做错了什么?

0 回复 | 直到 2 年前

1

0

Hashim Aziz 2 年前

我安装的软件包和HTML标记都是正确的——不幸的是,由于某种原因,我的JavaScript无法正常工作,尽管我的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 对象是可选的,仅当您要修改如上所示的配置时才需要。