Experimental SVG components

Type: boolean
Default: false

Added in: astro@5.0.0 New

This feature allows you to import SVG files and use them as Astro components. By default, 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, it requires using the same conventions (e.g. capitalization) as when using dynamic tags.

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

<Logo />

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

`size`

As a convenience, SVG components also accept a size property. size is a shorthand which sets both the width and height properties to the same value.

The following example uses Astro’s size property to set an equal width and height of 48 instead of setting the HTML <svg> attributes of width and height separately:

<!-- Using the size prop to set both width and height -->
<Logo size={48} />

`mode`

Add the mode attribute on any SVG component to override your default configured svg.mode technique for handling imported SVG files.

The following example generates a sprite sheet instead of inlining the logo’s SVG content into the HTML output:

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

<Logo size={64} mode="sprite" />

experimental.svg.mode

Type: string
Default: 'inline'

Added in: astro@5.0.0 New

The default technique for handling imported SVG files. Astro will inline the SVG content into your HTML output if not specified.

{
 experimental: {
   svg: {
     mode: 'sprite',
   }
 },
}

inline: Astro will inline the SVG content into your HTML output. (default)
sprite: Astro will generate a sprite sheet with all imported SVG files.

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

Contribute

Community