ImageMetaData not defined

[golden moat]

I would like to use an SVG in an Image component.

When I create the following I get the errors ImageMetaData not defined and

Type '{ src: ImageMetadata; }' is not assignable to type 'IntrinsicAttributes & number'.
  Type '{ src: ImageMetadata; }' is not assignable to type 'number'.ts(2322)

---
import Logo from '../../public/logo_light.svg';
export interface Props {
  src: ImageMetadata;
}
---
<Image src={Logo} />

How do I use SVG's with the Image tag?

[whole maple]

Hi @golden moat. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To use an SVG with the <Image /> component, you need to import the SVG and use the src property of the imported object. Here's an example:

---
import { Image } from '@astrojs/image/components';
import rocket from '../images/rocket.svg';
---
<Image src={rocket.src} alt="A rocketship in space." />

However, note that the <Image /> component can only be used with SVG images when the original image is a .svg file. Other image formats (like .png or .jpg) cannot be converted into vector images. The .svg image itself will not be transformed, but the final <img /> will be properly optimized by the integration.

Source: Astro’s Image Integration (https://docs.astro.build/en/guides/images#using-img-with-the-image-integration)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@golden moat kapa.ai is still learning and improving, please let us how it did by reacting below

[golden moat]

@whole maple
The original image is an SVG. This is my code

---
import { Image } from '@astrojs/image/components';
import Logo from '../../public/logo_light.svg';
---
<Image src={Logo.src} alt="Logo"/>

Why am I still getting this errror?

Type '{ src: string; alt: string; }' is not assignable to type 'IntrinsicAttributes & Props'.
  Type '{ src: string; alt: string; }' is not assignable to type 'IntrinsicAttributes & ImageComponentRemoteImageProps'.

[whole maple]

Let me check the knowledge base for you. One moment! :books:

---

I apologize for the confusion earlier. It seems that the <Image /> component from @astrojs/image/components might not be suitable for handling SVGs directly. Instead, you can use the SVG directly as an inline element in your Astro component:

---
import Logo from '../../public/logo_light.svg';
---
<svg {...Logo}><use xlink:href="#logo_light" /></svg>

This way, you can use the SVG directly without the need for the <Image /> component.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: