Feature request: Astro Components + Docs for Astro #20914
Replies: 8 comments
-
|
For reference, i managed to make Font-Awesome SVG+JS work on the client side by using This is how to use SVG+JS client-side in Astro:
---
// 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>
---
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> |
Beta Was this translation helpful? Give feedback.
-
|
I also just tested 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. |
Beta Was this translation helpful? Give feedback.
-
|
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;
} |
Beta Was this translation helpful? Give feedback.
-
|
I got a similar setup to @h93xV2 's working with this, but I'm using Shoelace and it's not playing nice with it yet. |
Beta Was this translation helpful? Give feedback.
-
|
H93xV2's solution can be wrapped in a component to make it easier to use: ---
import type {IconDefinition} from '@fortawesome/fontawesome-svg-core';
import {icon} from '@fortawesome/fontawesome-svg-core';
interface Props {
icon: IconDefinition
}
const iconHtml = icon(Astro.props.icon).html;
---
<style>
.icon {
display: inline-block;
width: 1em;
height: 1em;
}
</style>
<i class="icon" set:html={iconHtml}></i>Then, to use it (MDX file here): |
Beta Was this translation helpful? Give feedback.
-
|
Same as @carcigenicate but with ---
import { icon, type IconDefinition } from "@fortawesome/fontawesome-svg-core";
import "@fortawesome/fontawesome-svg-core/styles.css";
interface Props {
icon: IconDefinition;
class?: string;
}
const iconHtml = icon(Astro.props.icon, {
classes: Array.from(new Set(Astro.props.class?.split(" "))),
}).html;
---
<Fragment set:html={iconHtml} />And for layer. ---
import { layer, icon, type IconDefinition } from "@fortawesome/fontawesome-svg-core";
import "@fortawesome/fontawesome-svg-core/styles.css";
interface IconsDefinition {
icon: IconDefinition;
class?: string;
}
interface Props {
icons: IconsDefinition[];
class?: string;
}
const layerHtml = layer((push) => {
for (const iconDefinition of Astro.props.icons) {
push(icon(iconDefinition.icon, {
classes: Array.from(new Set(iconDefinition.class?.split(" "))),
}));
}
}, {
classes: Array.from(new Set(Astro.props.class?.split(" "))),
}).html;
---
<Fragment set:html={layerHtml} /> |
Beta Was this translation helpful? Give feedback.
-
|
@Shiva127 Your solution works perfectly and is elegant. Would you mind if I utilized the code (with credit) to create an Astro component library for others to use? |
Beta Was this translation helpful? Give feedback.
-
@luluvia No problem. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
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-coreand am working on a pure SSR way by using theicon().htmlfunction 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
Beta Was this translation helpful? Give feedback.
All reactions