Svg Sprites | Regione Toscana Design System

Inclusione di SVG con sprites:

Il file svg sprite si trova in: dist/icons.svg

FILE SVG SPRITE

Esempio di codice SVG con riferimento allo sprite:

<svg class="rtds-inline-block rtds-align-middle rtds-fill-current rtds-w-8 rtds-h-8" aria-hidden="true" focusable="false" role="img">
    <use href="../../icons.svg#mini--chevron-right" />
</svg>

Nel codice dell’icona SVG, sostituire il percorso nell’attributo href con il percorso effettivo alla risorsa sprite icon.svg nell’ambiente di implementazione.

Per esempio, se il percorso è /images/svg/icons.svg, sostituirlo con:

<svg class="rtds-inline-block rtds-align-middle rtds-fill-current rtds-w-8 rtds-h-8" aria-hidden="true" focusable="false" role="img">
    <use href="/images/svg/icons.svg#mini--chevron-right" />
</svg>

AGGIUNTA ICONE

Se è necessario aggiungere delle icone non presenti nel set/sprite svg, esportare l’svg, ottimizzarla tramite tools come SVGOptimizer, sostiuire nel codice del file svg eventuali colori nel valore di fill o stroke con “currentColor”, aggiungere il file svg in:

public/svgs/(eventuale-sottocartella)

Esegui:

npm run build-svg-sprite

per compilare il file Svg Sprite

Esegui:

npm run build-svgs

per compilare il file Svg Sprite e aggiornare la pagina di documentazione (compilazione file yml)

L’id dell’icona sarà il nome del file, preceduto dal nome della sottocartella: {nome-sottocartella}–{nome-svg}

Altri dettagli sulle icone svg nella tab note di Svgs (sotto la sezione “Tokens” nella ui della libreria) /components/detail/svgs

https://rt-design-system.netseven.work/components/detail/svgs.html