— GENERALE

Iconografia

Le icone sono utili per mitigare le barriere linguistiche ed è necessario che assicurino una chiara comprensione del loro significato: hanno, perciò, lo scopo funzionale di velocizzare la comprensione delle informazioni rendendo l'interfaccia più intuitiva.


Implementazione

L'iconografia del Design System ABANA è disponibile sottoforma di sprite SVG da includere all'interno della pagina HTML.
Per visualizzare un'icona bisogna utilizzare un tag <svg> accompagnato dall'attributo xlink:href.


<svg class="icon icon-nomeIcona"><use xlink:href="#icon-nomeIcona"></use></svg>
Realizzazione e stilizzazione

Le icone sono state realizzate sulla base di una griglia di 32x32px. Ognuna di esse comprende un attributo icon impostato di default nel css: ciò non toglie che possa essere personalizzata una singola icona se necessario.

<!-- HTML -->
<svg class="icon icon-download"><use xlink:href="#icon-download"></use></svg>

/* CSS */
.icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

/* CSS */
.icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  stroke-width: 1;
  stroke: currentColor;
  fill: currentColor;
}


.icon-download {
  stroke: var(--primary);
  fill: var(--primary);
}

Set di icone

Quando si crea un set di icone si deve garantire che siano stilisticamente coerenti tra di loro ed attinenti alle guidelines di visual definite per tutto il progetto. La perfetta implementazione delle icone in un Design System fornisce le massime prestazioni per tutti gli utenti, consentendo uno stile dinamico.

search
zoom-in
zoom-out
arrow-left
arrow-up
arrow-right
arrow-down
download
email
eye-open
eye-close
phone
user
web
menu
close
accessibility