SVG component for Astro

While making some minor changes to my site, I found an unused component that I had used some time ago to read and display an SVG file. It may be useful to someone or to me in the future, so here it is.

---
import type { HTMLAttributes } from 'astro/types';
import { parse } from 'node-html-parser';

export interface Props extends HTMLAttributes<'svg'> {
  icon: string;
}

function getSVG(name: string) {
  const filepath = `/public/icons/${name}.svg`;
  const files = import.meta.glob<string>('/public/icons/*.svg', {
    eager: true,
    as: 'raw',
  });

  if (!(filepath in files)) {
    throw new Error(`${filepath} not found`);
  }

  const root = parse(files[filepath]);

  const svg = root.querySelector('svg')!;
  const { attributes, innerHTML } = svg;

  return {
    attributes,
    innerHTML,
  };
}

const { icon, ...attributes } = Astro.props;
const { attributes: baseAttributes, innerHTML } = getSVG(icon);

const svgAttributes = { ...baseAttributes, ...attributes };
---

<svg
  {...svgAttributes}
  set:html={innerHTML}
></svg>

It basically gets the content of an SVG from the hardcoded /public/icons/ path and displays it as an SVG.

---
import Icon from "components/Icon.astro";
---

<Icon icon="rss-feed" />