@jasikpark/astro-svg-loader

This package allows you to import SVGs as Astro components, using @natemoo-re's ultrahtml and vite's support for raw imports to do the trick.

Taking inspiration from https://css-tricks.com/pretty-good-svg-icon-system/ that holds that icons should always be inlined.

Usage:

Peer deps are astro

npm add -D @jasikpark/astro-svg-loader

yarn add -D @jasikpark/astro-svg-loader

pnpm add -D @jasikpark/astro-svg-loader

then in an Astro component:

---
import Svg from "@jasikpark/astro-svg-loader";
---

<Svg
  src={import("#assets/my-cool-illustration.svg?raw")}
  aria-label="Cool illustration of an abstract nebula"
/>

Be sure to use a raw import: ?raw, or you'll import the URL rather than the SVG source.

License

Inspiration

• astro-icon
• svgr