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.

Si votre page ne contient pas de 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.