1

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>
ZuesSSSSS
  • 21
  • 3
  • 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 :) – MarcusOtter Apr 26 '23 at 01:28

2 Answers2

2

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';
MarcusOtter
  • 1,095
  • 10
  • 19
  • 1
    This is index.astro at /src/pages/index.astro. – ZuesSSSSS Apr 26 '23 at 02: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! – MarcusOtter Apr 26 '23 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 />
ZuesSSSSS
  • 21
  • 3