Astro Inline SVG

---
// pnpm i @cxa/astro-inline-svg
import Svg from "@cxa/astro-inline-svg";
import sunRiseSVG from "lucide-static/icons/sunrise.svg?raw";
---

<Svg raw={sunRiseSVG} class="sun-rise" stroke-width={1.5} />
    

Use as symbol

<Svg raw={birdSVG} define:symbol="bird-1" />
{
  Array.from({ length: 10 }).map(() => (
    <Svg raw={birdSVG} use:symbol="bird-1" />
  ))
}           

More control on symbol

<Svg
  raw={birdSVG}
  define:symbol={{
    id: "bird-2",
    symbolProps: {
      "stroke-width": "3px",
    },
  }}
/>
{[
  "#FF0000", // Bright Red
  "#00FF00", // Lime Green
  "#0000FF", // Blue
  "#FFD700", // Gold (darker yellow)
  "#FF00FF", // Magenta
  "#00FFFF", // Cyan
  "#FF8000", // Orange
  "#8000FF", // Purple
  "#00FF80", // Spring Green
  "#FF0080", // Hot Pink
].map((color) => (
  <Svg
    raw={birdSVG}
    use:symbol={{
      id: "bird-2",
      useProps: { stroke: color },
    }} />
))