Composants SVG (expérimental)

Type : boolean
Par défaut : false

Ajouté à la version : astro@5.0.0

Cette fonctionnalité vous permet d’importer des fichiers SVG et de les utiliser comme composants Astro. Astro intégrera le contenu SVG dans votre sortie HTML.

Pour activer cette fonctionnalité, mettez experimental.svg à true dans votre configuration Astro :

{
 experimental: {
   svg: true,
 },
}

Pour utiliser cette fonctionnalité, faites référence à l’importation par défaut de n’importe quel fichier .svg local. Comme cette importation est traitée comme un composant Astro, vous devrez utiliser les mêmes conventions (par exemple la capitalisation) que lors de l’utilisation des balises dynamiques.

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

<Logo />

Attributs des composants SVG

Titre de la section Attributs des composants SVG

Vous pouvez passer des attributs tels que width, height, fill, stroke, et tout autre attribut accepté par l’élément natif <svg>. Ces attributs seront automatiquement appliqués à l’élément <svg> sous-jacent. Si une propriété est présente dans le fichier .svg original et qu’elle est transmise au composant, la valeur transmise au composant remplacera la valeur originale.

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

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

Pour une présentation complète et pour donner votre avis sur cette API expérimentale, consultez la RFC de la fonctionnalité SVG.