@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
// or pnpm or yarn
npm 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.
