如何使用FontAwesome v6导入单个图标
如何使用FontAwesome v6导入单个图标
提问于 2022-04-25 21:04:10
在我构建在Laravel上的web应用程序中，我使用的是npm/Webpack构建过程，我目前使用的是FontAwesome的SCSS图标表版本，如下所示：
@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);最后运行npm run dev来重建JS，但是我正在加载的两个示例图标都没有显示出来。
我引用标记中的图标如下：
<i class="fas fa-mug-hot"></i>
<i class="fas fa-bolt"></i>我还尝试在使用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); ...but --这也不会使图标加载。
这似乎是这里的文档所建议的方法，那么为什么它不适用于我呢？我在这里做错什么了？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-04-27 23:47:08
我在正确的轨道上安装的软件包和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 注意，导入对象是可选的，只有当您想要修改配置时才需要，如上面所示.
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72005729
复制相关文章
相似问题
腾讯云开发者
