使用 Font Awesome 6 icon() API（包管理器）

Question

但是，他们关于应如何加载图标的文档并不清楚。我知道它应该自动用内联的 <svg> 替换所有 <i> 标签（但这对我不起作用，我知道 FA6 启动不稳定，我只是假设它是现在的错误）。

无论如何，他们有一个名为“图标”的方法，其唯一描述是：

Renders an icon as SVG.

简单地调用方法 returns 我是一个带有 SVG 信息的对象。根据他们对其基本用法的描述（上面的link），它说我只需要调用 icon() 并传入对 Font Awesome 图标的引用。

import { icon } from '@fortawesome/fontawesome-svg-core'
import { faPlus } from '@fortawesome/free-solid-svg-icons'

const faPlusIcon = icon(faPlus)

这实际上并没有进行任何渲染。我可以调用 icon(...).html 并将 html 附加到文档中（这有效），但它似乎不是使用 [=31= 的正确方法]（简直没说清楚）

Answer 1

注意：此示例使用 Svelte's @html

<i class="text-4xl mx-4 fa-spin">{ @html icon(faSun).html }</i>

这并不理想，但足够了。（如果有人想出更好的解决方案，请告诉我！）

将 class 作为“classes”选项传递到图标中也是不可取的，因为它没有 Tailwind 的智能感知。

示例：

{ @html icon(faSun, { classes: "text-4xl" }).html }

注意手动导入 CSS 并防止 Font Awesome 自动添加 CSS 以避免 FOUC（无样式内容的闪现）：

import '@fortawesome/fontawesome-svg-core/styles.css';
import { config } from '@fortawesome/fontawesome-svg-core';
config.autoAddCss = false;

Using Font Awesome 6 icon() API (Package Manager)