Question 60890 in Html Question posted in
Some basic documentation can be found here.

How do I use SVGs in AstroJS? – 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:

  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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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 />

  2. 0

    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';
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search