Skip To Content

Usare icone personalizzate

Quando si configura un indicatore, si dispone dell'opzione di usare un'icona Scalable Vector Graphics (SVG), non inclusa nell'elemento per impostazione predefinita. Questa funzionalità garantisce che le dashboard possano essere allineate ai requisiti specifici del settore o all'aspetto del branding aziendale della propria organizzazione. Il formato SVG è un formato immagine vettoriale basato su XML. Le icone possono essere create in qualunque editor di testo o usando un software di disegno. In fase di runtime, le icone personalizzate si ridimensioneranno alla stessa altezza del contenuto del Testo al centro dell'indicatore.

Il seguente esempio mostra del contenuto SVG che si visualizza come una serie in senso antiorario di tre frecce. Questo può essere usato per indicare un lavoro in corso.

Icona personalizzata

È possibile provare questa funzionalità copiando e incollando il seguente codice SVG nella casella bianca di Personalizzato nella schermata Selezionare un'icona:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="icons"> 
    <path d="M13.91 9a6.003 6.003 0 0 1-5.658 4.987l-.347-1.992c.032.001.063.005.095.005a3.996 3.996 0 0 0 3.858-3h-1.749l2.75-3.912L15.61 9zm-8.668 1.877l-.002.002a3.945 3.945 0 0 1-.688-4.884l-1.809-.848a5.923 5.923 0 0 0 1.08 7.148L2.59 13.529l4.71.822-.82-4.711zm1.425-6.576l-.011-.067a3.97 3.97 0 0 1 4.575 1.43l1.194-1.697a5.941 5.941 0 0 0-6.119-1.718L6.018.607 2.64 3.994l4.33 2.03z" />
</svg>

La seguente immagine mostra come potrebbe apparire l'indicatore con l'icona personalizzata:

Icona personalizzata con riempimento

I seguenti suggerimenti possono essere utili per quando si crea la propria icona:

  • Se non si definisce un tratto o un riempimento nell'icona SVG, questi elementi possono essere regolati quando si crea l'indicatore nella dashboard.
  • Se non si definisce un tratto per la propria icona, è possibile aggiungerne una in fase di configurazione. Sarà di 1 pixel.
  • I disegni in formato SVG possono essere dinamici e interattivi; tuttavia, le animazioni basate su script non sono supportate e saranno rimosse.