Skip To Content

Utiliser des icônes personnalisées

Lorsque vous configurez un indicateur, vous pouvez choisir d’utiliser une icône SVG (Scalable Vector Graphics), qui ne figure pas dans l’élément par défaut. Cette fonctionnalité vous permet de rendre les tableaux de bord conformes aux exigences de l’industrie et de leur apporter l’aspect et la convivialité de l’habillage de votre organisation. Le format SVG est un format d’image vectoriel basé sur le XML. Vous pouvez créer les icônes dans n’importe quel éditeur de texte ou à l’aide d’un logiciel de dessin. Lors de l’exécution, les icônes personnalisées sont mises à l’échelle à la même hauteur que le contenu du texte central dans l’indicateur.

Voici un exemple de contenu SVG qui affiche une série de trois flèches dans le sens anti-horaire. Cette image pourrait indiquer un travail en cours de progression.

Icône personnalisée

Vous pouvez essayer cette fonctionnalité en copiant et en collant le code SVG suivant dans la zone vide située sous Custom (Personnalisé) dans l’écran Select an icon (Sélectionner une icône) :

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

L’image suivante montre ce à quoi l’indicateur pourrait ressembler avec l’icône personnalisée :

Icône personnalisée avec remplissage

Voici quelques conseils utiles pour la création de votre propre icône :

  • Si vous ne définissez pas de trait ou de remplissage dans votre icône SVG, ces éléments ne peuvent pas être ajustés lorsque vous créez l’indicateur dans le tableau de bord.
  • Si vous ne définissez pas de trait dans votre icône, vous pouvez en ajouter un lors de la configuration. Il sera de 1 pixel.
  • Les dessins au format SVG peuvent être dynamiques et interactifs. Les animations basées sur des scripts ne sont toutefois pas prises en charge et sont supprimées.