Regione Toscana Design System — Servizi Design System Core

Icon: Medium 

<svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8" aria-hidden="true" focusable="false" role="img">
    <use href="../../icons.svg#mini--chevron-right" />
</svg>
 
<svg
  class="rtds-icon{% if type === 'fill' %} rtds-fill-current{% else %} rtds-stroke-current{% endif %}{% if size %} {{ size }}{% endif %}{% if classes %} {{ classes }}{% endif %}"
  aria-hidden="true"
  focusable="false"
  role="img"
>
  <use href="{{ '/icons.svg' | path }}#{{ id }}" />
</svg>
 
{
  "id": "mini--chevron-right",
  "size": "rtds-w-8 rtds-h-8",
  "type": "fill"
}
  • Content: 
    /**
 * ICON
 *
*/
.rtds-icon {
    display: inline-block;
    vertical-align: middle;
}
  • URL: /components/raw/icon/icon.built.css
  • Filesystem Path: components/02-atoms/icon/icon.built.css
  • Size: 88 Bytes
  • Content: 
    /**
 * ICON
 *
*/
@layer components {
    .rtds-icon {
        @apply  rtds-inline-block rtds-align-middle;
    }
}
  • URL: /components/raw/icon/icon.css
  • Filesystem Path: components/02-atoms/icon/icon.css
  • Size: 115 Bytes

Icon

Questa pagina copre l’API del componente Fractal @icon. Per il workflow contributor (come aggiungere una nuova icona alla libreria), vedi il README delle icone SVG in 01-design-system/tokens/svgs/. Per l’uso dello sprite in un ambiente ospite (perché il path va adattato a mano), vedi la pagina documentazione “Sprite SVG” nella sezione Fondamenta.

Componente per la visualizzazione di icone SVG con supporto per diverse dimensioni e tipi di riempimento.

Comportamento

Il componente renderizza un elemento <svg> che:

  • È nascosto agli screen reader (aria-hidden="true")
  • Non è focusabile (focusable="false")
  • Ha il ruolo di immagine (role="img")
  • Utilizza un sistema di sprite SVG per le icone

Varianti

Varianti di Dimensione

  • default: Dimensione grande (w-12 h-12)
  • medium: Dimensione media (w-8 h-8)
  • small: Dimensione piccola (w-4 h-4)

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria. Non descrive attributi HTML o proprietà da usare nei temi, CMS o ambienti di implementazione: per quello, fare riferimento alla sezione Esempi di utilizzo.

Parametri Base

  • id (stringa, obbligatorio): ID dell’icona da utilizzare (es. “mini–chevron-right”)
  • size (stringa, opzionale): Classi CSS per le dimensioni dell’icona
  • type (stringa, opzionale): Tipo di riempimento dell’icona (“fill” o “stroke”)
  • classes (stringa, opzionale): Classi CSS aggiuntive

Accessibilità

Componente puramente decorativo e non interattivo. L’icona è sempre nascosta alle tecnologie assistive; il nome accessibile è responsabilità del componente padre.

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.1.1 Contenuti non testuali — l’icona è nascosta agli screen reader tramite aria-hidden="true"; il nome accessibile dell’azione o dell’elemento è sempre fornito dal contesto circostante (label visibile o rtds-sr-only)

Struttura e semantica

  • <svg> — nascosto alle tecnologie assistive tramite aria-hidden="true"; non focusabile (focusable="false", necessario per compatibilità con IE/Edge legacy); non deve mai essere l’unico vettore di informazione: il nome accessibile dell’azione è sempre responsabilità del componente padre

Stili CSS

Classi Base

  • .rtds-icon: Stile base dell’icona
    • Display: inline-block
    • Allineamento: align-middle

Classi Condizionali

  • .rtds-fill-current: Quando type="fill"
  • .rtds-stroke-current: Quando type="stroke"

Esempi di utilizzo

<!-- Icona standard -->
<svg class="rtds-icon rtds-fill-current rtds-w-12 rtds-h-12" aria-hidden="true" focusable="false" role="img">
  <use href="/icons.svg#mini--chevron-right" />
</svg>

<!-- Icona media -->
<svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8" aria-hidden="true" focusable="false" role="img">
  <use href="/icons.svg#mini--chevron-right" />
</svg>

<!-- Icona piccola -->
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false" role="img">
  <use href="/icons.svg#mini--chevron-right" />
</svg>

<!-- Icona con stroke -->
<svg class="rtds-icon rtds-stroke-current rtds-w-12 rtds-h-12" aria-hidden="true" focusable="false" role="img">
  <use href="/icons.svg#mini--chevron-right" />
</svg>