2

Going to their Docs @ AstroDocs

Astro.js Example

import imgReference from './image.png'; // imgReference === '/src/image.png'
import svgReference from './image.svg'; // svgReference === '/src/image.svg'
import txtReference from './words.txt'; // txtReference === '/src/words.txt'

// This example uses JSX, but you can use import references with any framework.
<img src={imgReference} alt="image description" />;

They import and reference the file.


Things I've Tried to do:

  1. Move the SVG in /public and /src to isolate the situation.
  2. Renamed file to ui.svg to simplify naming issues.
  3. Imported the svg as a component.

Nothing works it seems. Any help?

My index.astro

---
// import Settings from './icons/Settings.svg';
import ui from '../ui.svg'; // moved here and renamed file to remove potential issues.
---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>Mudriy | Home</title>
    </head>
    <body>
        <h1>Astro</h1>
        <!-- <img src={Settings} alt="ff"/> -->
        <img src={ui} />
    </body>
</html>
1
  • 1
    I've added an answer with what I think the problem is, but it would be great if we could see your file structure if my answer does not work for you :) Commented Apr 26, 2023 at 1:28

4 Answers 4

3

Your import path begins with two dots instead of one, which changes the path and makes it different from the examples in the docs.

This code should work, if ui.svg is at src/ui.svg

import ui from './ui.svg'; 
2
  • 1
    This is index.astro at /src/pages/index.astro.
    – ZuesSSSSS
    Commented Apr 26, 2023 at 2:24
  • 1
    I could not replicate the problem by importing ../ui.svg from src/pages/index.astro if the SVG is at src/ui.svg. This worked fine for me. Maybe your Astro version is not up to date? I also noted that in your answer you used UI in uppercase whereas you used lowercase for the example you posted. File paths are case-sensitive, maybe that was the problem? Glad you got it resolved one way or another! Commented Apr 26, 2023 at 17:49
1

This issue seems to be a bug.

Work-around / Solution:

rename .svg to .astro (ui.astro), as SVG are technically capable of being their own component.

Then reference the components as you would with components.

import UI from '../UI.astro'

<UI />
1

Try this:

<img src={ui.src}>

Ui is an object. The path to the svg itself is in ui.src.

0

I recently ran into an issue with astro-icons not working and I have to replace the svg files in multiple astro pages. I like this idea of inserting the svg as an Astro component. Once I figured out how to set the sizing as needed, it is a perfectly fine solution.

Are there any issues with using this method that I should be aware of?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.