Import SVG file in Astro and use it without the <img /> tag

Is there a way to use and SVG file in an Astro file directly without using the <img /> tag. I want something like this:

import Logo from "./logo.svg"

and then use it like this:

<Logo />

I tried that doing it like that but it didn't work.

You can change the import to add ?raw after the file extension. Then, use <Fragment set:html={Logo} /> to inline the css. See: this post and the Astro docs

I ended up using an npm package called astro-icon which I really liked and it solved my problem.

First, I created a folder name icons in src/ and put my icons inside. Then use it like this:

import { Icon } from "astro-icon"

<Icon name={icon_name} />

You can use code like this without any plugin.

---
import loaderEyes from "svgs/loader-eyes.svg?raw"; 
---
<div class="loader__eyes-container">
  <Fragment set:html={loaderEyes} />
</div>

I have used "astro-icon" package. You can see in their docs how to load local svgs in your html.

Basically just:

• Create a icon folder inside src directory.
• Inside src/icons create new svg file. ie. "logo.svg"
• You can now use <Icon name="logo" /> in astro files to load your svg.

Read more here:
https://github.com/natemoo-re/astro-icon#local-icon-packs

Astro docs on assets:
https://docs.astro.build/en/guides/assets/#move-your-images-to-srcassets