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:
- Move the SVG in /public and /src to isolate the situation.
- Renamed file to ui.svg to simplify naming issues.
- Imported the svg as a ponent.
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>
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:
- Move the SVG in /public and /src to isolate the situation.
- Renamed file to ui.svg to simplify naming issues.
- Imported the svg as a ponent.
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 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 Commented Apr 26, 2023 at 1:28
4 Answers
Reset to default 3Your 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';
Try this:
<img src={ui.src}>
Ui is an object. The path to the svg itself is in ui.src.
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 ponent.
Then reference the ponents as you would with ponents.
import UI from '../UI.astro'
<UI />
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 ponent. 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?