---
const icons = import.meta.glob("../icons/*.svg", {
  query: "?raw",
  import: "default",
  eager: true,
});

interface Props {
  name: string;
  label?: string;
  class?: string;
}
const { name, label, class: cls } = Astro.props;
const svg = (icons[`../icons/${name}.svg`] as string | undefined) ?? "";
---

<span class:list={["brand-icon", cls]} role="img" aria-label={label} set:html={svg}></span>

<style is:global>
  .brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }
  .brand-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }
</style>