Icônes

Les icônes sont essentielles dans la création d'une interface utilisateur claire et intuitive. Elles permettent de simplifier la navigation en offrant des représentations visuelles d'actions ou d'éléments. Vous pouvez importer des icônes sous forme de fichiers d'image classiques tels que PNG ou JPG, ou en format vectoriel (SVG).

Pour vos projets PandaSuite, voici quelques sites populaires où vous pouvez trouver des icônes de qualité, souvent disponibles aux formats PNG, JPG et SVG :

• 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 qui peut être utilisée directement en code ou téléchargée au format SVG.
• SVGrepo : plus de 500 000 fichiers vectoriels et icônes

Importer une icône au format PNG ou JPG 

• Dans l'interface de PandaSuite, cliquez sur l'icône Fichiers du menu du haut.
• Importez vos fichiers PNG ou JPG depuis votre ordinateur.
• Glissez-déposer dans votre écran
• Ajustez la taille et la position de l'icône sur votre écran.

Cependant, ces formats peuvent entraîner une perte de qualité lors du redimensionnement et ne sont pas éditables (changement de couleur par exemple). C'est ici que le format SVG (vecteur) prend tout son sens.

Importer une icône au format vectoriel

Les fichiers SVG (Scalable Vector Graphics) sont des fichiers graphiques vectoriels qui offrent un grand avantage : ils peuvent être redimensionnés à n'importe quelle taille sans perte de qualité. Contrairement aux formats d'image standards, les icônes SVG ne sont pas constituées de pixels mais de formes géométriques, ce qui les rend idéales pour les interfaces réactives et les écrans haute résolution.

Les bénéfices du format SVG :

• Qualité : Les icônes SVG restent nettes quel que soit le niveau de zoom.
• Poids réduit : Elles sont généralement plus légères que les images bitmap.
• Édition facile : Elles peuvent être facilement modifiées en modifiant leur code source ou avec des outils de design.

Pour en savoir plus : Importer un SVG

Copier-coller le fichier SVG directement

Il vous suffit de copier votre fichier SVG et de le coller directement dans votre projet PandaSuite. L'éditeur reconnaîtra automatiquement le format et l'intégrera dans votre interface. Vous pourrez alors le redimensionner, l'animer ou l'utiliser selon vos besoins.

Copier-coller un SVG depuis un site d'icônes

PandaSuite permet d'importer des fichiers SVG directement via leur code. Voici la marche à suivre :

1. Allez sur un site proposant des icônes en SVG (comme Flaticon ou Icons8).
2. Sélectionnez l'icône souhaitée, puis copiez le code SVG (souvent accessible via un bouton ou en affichant le code source de l'icône).
3. Ouvrez PandaSuite Studio
4. Collez le code SVG dans la fenêtre

L'icône sera ainsi directement intégrée à votre projet, et vous pourrez ajuster sa taille, sa couleur et même l'animer en utilisant du code CSS ou JS. Ce processus offre une flexibilité supplémentaire, notamment si vous souhaitez adapter l'icône aux besoins de votre interface.