Experimental SVG components

Type: boolean
Default: false

Hinzugefügt in: astro@5.0.0

This feature allows you to import SVG files and use them as Astro components. Astro will inline the SVG content into your HTML output.

To enable this feature, set experimental.svg to true in your Astro config:

{
 experimental: {
   svg: true,
 },
}

To use this feature, reference the default import of any local .svg file. Since this import is treated as an Astro component, you must use the same conventions (e.g. capitalization) as when using dynamic tags.

---
import Logo from './path/to/svg/file.svg';
---

<Logo />

SVG component attributes

Section titled SVG component attributes

You can pass props such as width, height, fill, stroke, and any other attribute accepted by the native <svg> element. These attributes will automatically be applied to the underlying <svg> element. If a property is present in the original .svg file and is passed to the component, the value passed to the component will override the original value.

---
import Logo from '../assets/logo.svg';
---

<Logo width={64} height={64} fill="currentColor" />

For a complete overview, and to give feedback on this experimental API, see the SVG feature RFC.