Font-Awesome
Font-Awesome copied to clipboard
FortAwesome
Feature request: Astro Components + Docs for Astro
Is your feature request related to a problem?
Font-Awesome supports the major frontend frameworks such as React, Vue… as well as some Meta Frameworks like Next.js, but using it with Astro is still unsupported / undocumented.
Feature description
Astro is a unique meta framework focused on websites and has its own component architecture alternative to react, vue… (.astro files)
unfortunately, there is currently no official integration although astro is increasingly getting used over other meta frameworks because of its better performance and focus on websites rather than applications.
I’d like to see an official component for astro components so we don’t have to use react or svg-core
Alternatives
Alternative to an official component, we should at least create some documentation using Font-Awesome with Astro Layouts / Pages.
Additional context
I managed to get Font-Awesome working (client side) via @fortawesome/fontawesome-svg-core and am working on a pure SSR way by using the icon().html function provided by svg-core. This function could also possibly be used for creating an astro component, similar to how the react / vue components work.
Feature request checklist
- [X] The title starts with "Feature request: " and is followed by the requested feature description
- [X] This is a single feature
- [X] I have searched for existing issues and to the best of my knowledge this is not a duplicate
For reference, i managed to make Font-Awesome SVG+JS work on the client side by using @fortawesome/fontawesome-svg-core in my layout component. However, this results in a small flash since the client needs to execute the javascript before an icon appears. It would be best to handle svg-inlining on the server side to minimize this behavior.
This is how to use SVG+JS client-side in Astro:
- In the
src/layouts/Layout.astrocomponent add the styles / scripts of@fortawesome/fontawesome-svg-core
---
// load the core stylesheet on the server side,
// so astro can bundle, optimize and serve it.
import '@fortawesome/fontawesome-svg-core/styles.css'
---
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head>
<body>
<slot /> {/* this is where your page content is added */}
</body>
</html>
{/* Add a client side script for loading Font-Awesome */}
<script>
// import the required functions and icons
import { library, config, dom} from '@fortawesome/fontawesome-svg-core'
import { faPhone } from '@fortawesome/free-solid-svg-icons'
// since we want astro to handle the css we should disable automatic css injection on the client
// this is similar to other ssr frameworks like next.js or nuxt
config.autoAddCss = false
// create a subset of icons that you are going to use so
// astro is able to tree shake and optimize the javascript bundle for best performance
library.add(
faPhone
);
// replace the unprocessed icons with the svg and watch for additional icons
dom.watch();
</script>
- and then in your
src/pages/index.astroadd the icon:
---
import Layout from '../layouts/Layout.astro';
---
<Layout>
<h1>Hello World</h1>
{/* add the icon to your page. it will automatically be replaced client-side */}
<i class="fas fa-phone"></i>
</Layout>
I also just tested dom.i2svg() instead of .watch() and can confirm it working even for deeply nested pages, since all astro does is bundle the script using vite and add the optimized script src to the document.
So compatibility with Font-Awesome is definitely there without any major problems. It’s just not documented anywhere how to use it with astro.
I’d love to see my example being incorporated (in some form or another) in the docs or even having the FortAwesome team consider creating an official astro component.
Found this issue after looking into the same problem for myself. Looks like you can do something like this for SSR:
---
import { icon } from '@fortawesome/fontawesome-svg-core';
import { faHouse } from '@fortawesome/free-solid-svg-icons';
const devIcon = icon(faHouse).html;
---
<div set:html={devIcon}></div>
However, you will have to go and set the width and height for the SVG. I'm doing that like this:
.svg-inline--fa {
width: 1.33em;
height: 1.33em;
}
