Icônes personnalisées dans Salesforce LWC / Blogs / Perficient

Aloha les pionniers !

Parlons de l’amélioration de vos composants Web Lightning (LWC) avec une touche personnelle : des icônes personnalisées. Vous savez, ces minuscules repères visuels qui peuvent faire une grande différence dans la façon dont les utilisateurs interagissent avec votre application. Salesforce dispose d’une solide bibliothèque d’icônes standard, mais pourquoi ne pas y ajouter votre propre style ?

Pourquoi des icônes personnalisées ?

Tout d’abord, comprenons avec quoi nous travaillons. Les icônes personnalisées sont comme les coups de pinceau de l’artiste dans le canevas de votre interface utilisateur. Il s’agit généralement de fichiers SVG, ce qui signifie qu’ils sont nets, clairs et s’affichent parfaitement sur n’importe quel écran.

Comment donner vie à vos icônes

Préparez vos icônes
Avant de pouvoir commencer, vous aurez besoin de vos icônes personnalisées. Vous pouvez les créer à l’aide d’un logiciel de conception ou les récupérer dans votre bibliothèque d’icônes préférée. Assurez-vous simplement qu’ils sont au format SVG – c’est la clé.

Télécharger vers des ressources statiques

Maintenant, intégrons ces icônes dans Salesforce. Rendez-vous dans « Configuration » > « Ressources statiques » et téléchargez vos fichiers SVG. Cela donne à votre LWC l’accès à ces icônes élégantes.

Vous pouvez les configurer comme publics ou privés selon vos besoins.

Déposez-les dans votre balisage LWC

Vous devrez d’abord associer un identifiant à un fichier SVG. Cela garantira que notre composant obtiendra la bonne icône parmi un ensemble d’URL statiques personnalisées disponibles.

Dans votre fichier JavaScript, vous devez d’abord importer la ressource statique contenant votre icône personnalisée. Une fois que vous l’avez importé, assurez-vous de l’initialiser avec les valeurs appropriées dans notre hook de rappel connecté.

Sachez que lors de l’initialisation, vous devrez associer le même identifiant que celui que vous aviez associé au fichier SVG. Dans notre cas, nous avons étiqueté l’ID comme « démo ».

Une fois les importations et les initialisations en place, nous les mettrons à profit.

N’oubliez pas que nous ne pouvons pas utiliser l’icône personnalisée dans le contexte , nous devons l’utiliser soit comme image, soit comme

Maintenant que tous nos fichiers sont prêts, il faut vérifier la visibilité via le fichier XML.

Et puis vous êtes prêt à utiliser vos icônes personnalisées !

Stylez-le et utilisez-le !
Maintenant que vos icônes sont en place, n’hésitez pas à jouer avec les styles. Changez les couleurs, ajustez les tailles ou positionnez-les parfaitement pour les adapter à l’ambiance de votre application. C’est ici que vous laissez libre cours à votre créativité !

Pourquoi les icônes personnalisées sont préférées

• Brand Vibes : injectez la personnalité de votre marque dans votre application Salesforce et gardez les choses cohérentes avec votre apparence générale.
• Plaisir de l’utilisateur : les utilisateurs aiment la familiarité. Les icônes personnalisées facilitent la navigation et ajoutent une touche de plaisir supplémentaire à leur expérience.
• Libérez votre créativité : avec des icônes personnalisées, vous n’êtes pas limité par les éléments de stock. Déchaînez-vous, exprimez-vous et personnalisez votre application.

Envelopper le tout

Les icônes personnalisées peuvent sembler être un petit détail, mais elles peuvent avoir du punch dans votre Salesforce LWC. Suivez ces étapes, faites preuve de créativité et regardez votre application prendre vie d’une manière que vous n’auriez jamais imaginée. Il est temps de vous démarquer et de laisser votre marque dans l’écosystème Salesforce. Bon codage !

Vous avez apprécié la lecture de ce blog ? Plongez plus profondément dans notre collection d’articles et de didacticiels informatifs. Voici quelques recommandations pour vous:

Comment utiliser les jetons de conception SLDS dans un thème de communauté Lightning personnalisé

Documentation Salesforce