SVG component for Astro

· Tech

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.

components/Icon.astro
---
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} />

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" />

Related posts