Regione Toscana Design System

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
 *
*/
@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

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

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

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"

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