SVG
Overdog permet d'optimiser et de nettoyer les SVG automatiquement et de créer un sprite avec ceux-ci.
Fonctionnement
Placez vos fichiers SVG dans le dossier src/svg/sprite-images
. Ces fichiers seront ensuite combinés en symbol dans un fichier JavaScript qui les injectera dans votre DOM après le chargement de la page.
Utilisation du sprite dans vos templates
Pour utiliser un SVG du sprite ainsi créé, utilisez la façon suivante. Remplacez #logo-overdog
de l'exemple par le nom original du SVG désiré. Le nom de chaque fichier SVG est utilisé pour créer son ID dans le sprite.
<svg class="votre-classe"><use xlink:href="#logo-overdog"></use></svg>
Le use xlink:href
va aller chercher le code du symbol #logo-overdog
dans le sprite et l'afficher à l'intérieur de la balise SVG.
Le xlink
est déprécié au profit de seulement href
, mais Safari 11(2017) en a besoin. Il est encore suggéré de le conserver.
use xlink:href
, le fichier JS des SVG ne sera pas chargé.
Modifier la couleur via votre CSS
Comme le SVG Sprite est dans un shadow DOM, vous devez supprimer les balises fill=
de votre fichier SVG si vous souhaitez modifier sa couleur via votre CSS par la suite (aux groupes ET aux paths).
Vous pouvez aussi ajouter une classe sur la balise SVG. Exemple fill-slate-400
.
Utilisation scalable (sans width ou height)
Pour redimentionner un SVG responsivement, c'est assez complexe. Si votre div a un height
et un width
bien définis, c'est super (ex: icônes, illustrations, etc.).
Mais si vous souhaitez qu'un SVG utilise tout l'espace disponible en largeur, sans avoir de dimension (ex: divider). Disons fit the available width, c'est plus tricky.
Un truc : Prenez le viewbox
du symbol et mettez le sur votre <svg>
tag dans votre template. Mettez ensuite le width ou le height à auto
.
Les navigateurs vont ajuster automatiquement en respectant le ratio du viewbox.
Anciennes versions de Overdog (avant v1.3)
Si vous utilisez une version de Overdog avant v.1.3, placez vos fichiers SVG dans le dossier src/svg/sprite-images
. Faites à la racine de votre projet dans le terminal : yarn svg
.
Vous devrez ajouter l'alias @svgPath
avant votre ID de SVG dans votre HTML. Regardez les exemples déjà faits dans votre projet.