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. Par défaut, Astro intègre 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, elle nécessite l’utilisation des 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

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

`size`

Par convenance, les composants SVG acceptent également une propriété size. size est un raccourci qui fixe les propriétés width et height à la même valeur.

L’exemple suivant utilise la propriété size d’Astro pour définir une largeur et une hauteur égales de 48 au lieu de définir les attributs HTML <svg> de width et height séparément :

<!-- Utilisation de l'attribut "size" pour définir la largeur et la hauteur -->
<Logo size={48} />

`mode`

Ajoutez l’attribut mode sur n’importe quel composant SVG pour remplacer la technique svg.mode configurée par défaut pour gérer les fichiers SVG importés.

L’exemple suivant génère une feuille de sprite au lieu d’intégrer le contenu SVG du logo dans la sortie HTML :

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

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

experimental.svg.mode

Type : string
Par défaut : 'inline'

Ajouté à la version : astro@5.0.0

La technique par défaut pour traiter les fichiers SVG importés. Si elle n’est pas spécifiée, Astro intégrera le contenu SVG dans votre sortie HTML.

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

inline : Astro va intégrer le contenu SVG dans votre sortie HTML. (par défaut)
sprite : Astro va générer une feuille de sprite avec tous les fichiers SVG importés.

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

Contribuer

Communauté