Icônes

Les icônes aident vos utilisateurs à comprendre votre interface en un coup d’œil : une maison pour revenir à l’accueil, une croix pour fermer, des flèches pour avancer. Dans PandaSuite, la façon dont vous ajoutez une icône détermine ce que vous pourrez en faire ensuite : changer sa couleur, l’animer, ou seulement l’afficher.

Choisir le bon format

Comment vous ajoutez l’icône	Couleur modifiable dans le Studio	Nette à toutes les tailles	Idéal pour
Coller le code SVG d’une icône à un seul path	Oui	Oui	Les icônes d’interface : navigation, menus, boutons
Importer un fichier SVG, ou coller un SVG à plusieurs formes	Non	Oui	Les icônes multicolores et les illustrations
Importer un fichier PNG ou JPG	Non	Jusqu’à sa résolution	Les icônes avec photos, textures ou effets complexes

Pour les icônes d’interface, privilégiez les icônes SVG dessinées avec un seul path. Vous pouvez les recolorer aux couleurs de votre projet, leur donner une couleur active dans une barre de navigation et les animer, sans préparer un nouveau fichier pour chaque variante.

Trouver des icônes

• Icônes SVG de navigation gratuites PandaSuite : flèches, chevrons, menu, fermer, accueil, plein écran, etc., sous licence CC0 (usage personnel et commercial libre, sans attribution). Chaque icône est dessinée avec un seul path, prête à être recolorée dans le Studio.
• SVGrepo : plus de 500 000 fichiers vectoriels et icônes.
• Flaticon : une vaste collection d’icônes disponibles dans plusieurs formats.
• Icons8 : des icônes gratuites et premium, avec des options d’édition en ligne.
• The Noun Project : des icônes stylisées créées par des designers du monde entier.
• FontAwesome : une bibliothèque d’icônes téléchargeables au format SVG.

Ajouter une icône à votre écran

Coller le code SVG (recommandé)

1. Sur le site d’icônes, copiez le code SVG de l’icône (souvent avec un bouton Copier le SVG).
2. Ouvrez votre projet dans PandaSuite Studio et sélectionnez l’écran.
3. Collez avec Ctrl+V (Windows) ou Cmd+V (macOS).

Si l’icône est dessinée avec un seul path, elle apparaît sur votre écran comme une forme modifiable. Sinon, elle est ajoutée à vos Fichiers comme SVG complet : glissez-la sur votre écran.

Pour comprendre comment PandaSuite traite chaque type de SVG, et que faire si le collage depuis Illustrator ne fonctionne pas, consultez Importer un SVG.

Importer un fichier d’icône

1. Cliquez sur Fichiers dans la barre du haut puis Importer vos fichiers, et sélectionnez vos fichiers SVG, PNG ou JPG.
2. Glissez l’icône depuis vos Fichiers sur votre écran.
3. Ajustez sa taille et sa position.

Pour une icône PNG ou JPG, importez un fichier au moins deux fois plus grand que sa taille d’affichage pour qu’elle reste nette sur les écrans haute résolution.

Personnaliser une icône

Une icône collée avec un seul path se comporte comme les autres formes de PandaSuite. Sélectionnez-la, puis dans ses propriétés :

• Changez sa couleur de remplissage avec Arrière-plan. Vous pouvez aussi appliquer un dégradé.
• Pour une icône au trait, réglez la couleur et l’épaisseur de la Bordure.
• Ajoutez une ombre.

Redimensionner l’icône ne dégrade pas sa qualité.

Rendre une icône interactive

Déclencher une action

Sélectionnez l’icône, ouvrez l’onglet Actions, choisissez le déclencheur Tape/Clic, puis l’action à lancer, par exemple Sélectionner un écran. Consultez Déclencheurs et Boutons.

Signaler l’icône active

Dans une barre de navigation, l’utilisateur doit savoir sur quel écran il se trouve. Utilisez le composant Multi-état pour créer un état par apparence, par exemple une icône grise par défaut et une icône colorée quand l’écran est actif. Avec des icônes à un seul path, il suffit de dupliquer l’icône et de changer sa couleur.

Pour animer une icône (rotation, taille, couleur…), utilisez les états et transitions.