ⵟastro

in an astro component

Astro passes custom elements through untouched. Register the element from a <script>, which Astro bundles for the client:

1---2const { email } = Astro.props;3---4 5<glorpie-face name={email} size="40" style="width: 40px; height: 40px"></glorpie-face>6 7<script>8  import 'glorpies/element';9</script>

Every option is an attribute. The inline size reserves the space until the element upgrades.

in a framework island

If you already use React, Vue, Svelte, Solid or Preact in Astro, use that component as an island. It server-renders a placeholder, and with client:visible it hydrates only when scrolled into view:

1---2import { Glorpie } from 'glorpies/react';3---4 5<Glorpie client:visible name="ada@lovelace.dev" size={40} />

as an image

For zero client JavaScript, serve faces from an image route and use an <img>.