document how to use raw svg asset url #12102

dominikg · 2025-07-31T10:21:49Z

dominikg
Jul 31, 2025

ref: https://discord.com/channels/830184174198718474/1400413273047699496

Problem:

---
import icon from '$assets/favicon.svg'
---
<head>
<link rel="icon" href={icon}>
</head>

worked in older versions of astro but leads to 404 with astro svg components because icon is emitted as stringified component function into index.html

Solution:

Use the src property to access the asset url

---
import icon from '$assets/favicon.svg'
---
<head>
<link rel="icon" href={icon.src}>
</head>

https://docs.astro.build/en/guides/images/#images-in-src mentions the src prop but https://docs.astro.build/en/guides/images/#svg-components does not.

louisescher · 2025-07-31T12:47:34Z

louisescher
Jul 31, 2025
Sponsor

Thanks for reporting this!
We did some discussing on Talking and Doc'ing and found out that https://docs.astro.build/en/guides/imports/#other-assets used to document this, but is now outdated since v3 added image handling and v5.7 added SVG components, also there are no links to this section from the images and SVG components sections

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

document how to use raw svg asset url #12102

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

document how to use raw svg asset url #12102

Uh oh!

dominikg Jul 31, 2025

Replies: 1 comment

Uh oh!

louisescher Jul 31, 2025 Sponsor

dominikg
Jul 31, 2025

louisescher
Jul 31, 2025
Sponsor