Font Awesome 6 provides a Javascript API: https://fontawesome.com/v6/docs/apis/javascript/methods
However, their documentation on how an icon should be loaded is unclear. I know it is supposed to automatically replace all the <i> tags with inlined <svg>'s (but that isn't working for me, I know FA6 had a shaky launch and I'm just assuming it's a bug right now).
Anyway, they have a method called "icon" whose only description is:
Renders an icon as SVG.
https://fontawesome.com/v6/docs/apis/javascript/methods#icon-icondefinition-params][2]
Calling the method simply returns me an object with the SVG information. Based on their description of its basic usage (link above), it says I just need to call icon() and pass in a reference to a Font Awesome icon.
import { icon } from '@fortawesome/fontawesome-svg-core'
import { faPlus } from '@fortawesome/free-solid-svg-icons'
const faPlusIcon = icon(faPlus)
This doesn't actually do any rendering. I can call icon(...).html and append that html to the document (and this works), but it doesn't seem to be the proper way to use the API (it is simply not clearly stated).
Note: This example is with Svelte's @html
<i class="text-4xl mx-4 fa-spin">{ @html icon(faSun).html }</i>
This is not ideal but is adequate. (If someone figures out a better solution, please let me know!)
Passing the class as a "classes" option into icon is also undesirable because it won't have Tailwind's intellisense.
Example:
{ @html icon(faSun, { classes: "text-4xl" }).html }
Take note to import the CSS manually and prevent Font Awesome's automatic adding of CSS to avoid a FOUC (flash of unstyled content):
import '@fortawesome/fontawesome-svg-core/styles.css';
import { config } from '@fortawesome/fontawesome-svg-core';
config.autoAddCss = false;