3

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.

Storm
  • 63
  • 1
  • 8

4 Answers4

6

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

Marijn Kneppers
  • 534
  • 2
  • 15
1

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} />
Storm
  • 63
  • 1
  • 8
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 26 '23 at 00:39
0

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

Pavel S
  • 11
  • 2
0

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>
Jaki Chen
  • 1