使用字体很棒6图标（）API（软件包管理器）

Question

Font Awesome 6 提供了 Javascript API： https://fontawesome.com/v6/docs/apis/javascript/methods

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

不管怎样，他们有一个名为“icon”的方法，其唯一的描述是：

将图标渲染为 SVG。

https://fontawesome.com/ v6/docs/apis/javascript/methods#icon-icondefinition-params][2]

调用该方法只会返回一个带有 SVG 的对象 信息。根据他们对其基本用法的描述（上面的链接），它说我只需要调用 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 附加到文档中（并且这有效），但这似乎不是使用 API 的正确方法（只是没有明确说明）。

Answer 1

注意：此示例使用 Svelte 的 @html

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

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

将类作为“类”选项传递到图标中也是不可取的，因为它没有 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;

Answer 2

使用 Fa Svelte 组件 添加 Font Awesome 图标：

<script>
  import Fa from 'svelte-fa'
  import { faPlus} from '@fortawesome/free-solid-svg-icons'
</script>

<Fa icon={faPlus} /> Flag

---

这是组件内部添加/渲染的方式从 @fortawesome/free-solid-svg-icons 导入：https://github.com/Cweili/svelte-fa/blob/ master/src/fa.svelte