Svg Sprites

Sprite SVG

Questa pagina copre l’uso dello sprite SVG in un ambiente ospite (come referenziarlo, perché il path va adattato a mano). Le pagine correlate coprono altri due scopi:

• Icone SVG (sotto “Tokens” nella UI della libreria) — workflow contributor: come aggiungere una nuova icona alla libreria
• Icon (componente @icon, sotto “Atoms”) — API del componente Fractal per usare le icone nei template .njk

Il file sprite

Il file svg sprite si trova in: public/icons.svg (sorgente), dist/{core|servizi}/icons.svg (build statica).

File svg sprite - icons.svg

Uso nel markup e perché il path è manuale

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

Il path ../../icons.svg nell’esempio sopra non è un valore letterale da copiare così com’è: è un placeholder che va sostituito con il percorso reale a cui si trova icons.svg nel proprio ambiente di hosting.

Perché è manuale: dentro l’ambiente di sviluppo Fractal, il componente @icon (icon.njk) usa il filtro Nunjucks path per risolvere automaticamente il path assoluto corretto (/icons.svg) — ma questa risoluzione è una comodità offerta solo dall’ambiente Fractal stesso, a tempo di rendering della pagina di documentazione/preview. Quando si copia uno snippet HTML statico (dalla build in dist/, o dal tab “HTML” di un componente nella UI Fractal), quel valore è già stato risolto per l’ambiente Fractal in cui è stato generato — non c’è nessuna risoluzione automatica a runtime nell’ambiente di destinazione finale. Chi integra lo snippet deve quindi aggiornare l’href con il percorso effettivo a cui ha posizionato icons.svg nel proprio sito/applicativo.

Esempio: se nel proprio ambiente icons.svg è servito da /images/svg/icons.svg, l’href diventa:

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

Aggiungere icone

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

• public/svgs/{eventuale-sottocartella}

Esegui:

npm run build-svg-sprite

per compilare solo il file Svg Sprite (public/icons.svg).

Esegui invece:

npm run build-svgs

per compilare il file Svg Sprite e rigenerare il file yml (components/01-design-system/tokens/svgs/svgs.config.yml) che alimenta la pagina di documentazione contributor “Icone SVG” — necessario se hai aggiunto/rimosso file in public/svgs/, altrimenti quella pagina non riflette il nuovo set di icone.

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 della pagina Svgs (sotto la sezione “Tokens” nella ui della libreria).