Can I use fontawesome in Fresh framework? What is the correct way to install it or use it?

[soft ferry]

What is the correct way to install it or use it?

Im lost here

[foggy perch]

I recommend you to check tabler icons https://tabler-icons-tsx.deno.dev/
It came from this page https://fresh.deno.dev/components

[crystal thicket]

As a developer at Font Awesome, I'm interested in this too.

This is the first I've heard of Fresh. But there are several different ways of using Font Awesome, accommodating all sorts of environments. So I doubt there's "the correct way" to install or use it for Fresh. It would depend on your goals and how you want to work the tradeoffs.

It would also depend on whether you're using Font Awesome Free or Font Awesome Pro.

I might start experimenting with loading and using Font Awesome as an SVG Sprite. Here are docs for how to use it like that:
https://fontawesome.com/v6/docs/web/add-icons/svg-sprites#contentHeader

[crystal thicket]

I've done some more playing around with this and found that what might be the best solution is to adapt the Font Awesome React component as a Preact component. It could then be used very similarly to how the React component is used:
https://github.com/fortAwesome/react-fontawesome

There were three main pieces to my (preliminary) solution:

1. Load the Free icons and library code:

This would fetch the free NPMs and Free Classic Solid icons, and add them to the icon library:

import { library } from 'npm:@fortawesome/fontawesome-svg-core'
import { fas } from 'npm:@fortawesome/free-solid-svg-icons'
library.add(fas)

2. A plugin to load the support CSS

// fa.ts
import { Plugin } from "$fresh/server.ts";
import { dom } from 'npm:@fortawesome/fontawesome-svg-core'

export default function fa(): Plugin {
  return {
    name: "fa",
    render(ctx) {
      const cssText = dom.css();
      const res = ctx.render();

      return {
        scripts: [],
        styles: [{ cssText, id: 'font-awesome-svg-core-css' }],
      };
    },
  };
}

This is loaded from main.tsx:

// ...snip
import faPlugin from "./plugins/fa.ts"
await start(manifest, { plugins: [faPlugin(), twindPlugin(twindConfig)] });

**3. Adapting the React component code to work as a Preact component
**
(Sorry, exercise left to the reader. I know, this is the heavy lifting part. But it turned out not to be too heavy.)

Then in an application view, import:

import { FontAwesomeIcon } from "../components/FontAwesomeIcon.tsx";

and use:

<FontAwesomeIcon icon="star" />