Création d’un thème unique avec des polices et des icônes personnalisées dans ThemeBuilder

Découvrez comment importer une police, y compris des bibliothèques de polices d’icônes personnalisées, dans vos styles ThemeBuilder, prête à être implémentée dans votre application !

Vous connaissez peut-être déjà tout options de personnalisation étonnantes le progrès Générateur de thèmes offre en termes de couleurs, de remplissage, d’effets tels que le rayon de bordure et l’ombre portée, et plus encore. Mais saviez-vous que vous pouvez également importer vos propres polices et icônes, par exemple un look vraiment personnalisé?

Si le guide de style de votre marque spécifie l’utilisation d’une police sous licence ou si votre équipe de conception a investi dans la création d’icônes personnaliséesvous pouvez toujours intégrer ces ressources de manière transparente dans la thématique de votre bibliothèque de composants et exporter du code prêt pour la production !

Polices personnalisées

ThemeBuilder inclut déjà l’accès à une collection de polices standard et familières à utiliser dans votre système de typographie. Pour modifier la police par défaut utilisée dans toute la bibliothèque de composants, mettez simplement à jour le $kendo-default-typography variable dans la sous-section « Typographies » de la barre latérale Styles de thème.

Cependant, si vous êtes tombé amoureux d’une belle police Google ou si vous avez investi dans une famille de polices sous licence spécifique, vous pouvez tout à fait les utiliser également ! Pour importer une police, suivez simplement les étapes suivantes :

1. Cliquez sur l’icône d’engrenage dans la barre de navigation supérieure pour ouvrir les paramètres du projet.
2. Ouvrez l’onglet Polices dans la barre latérale Paramètres du projet.
3. Cliquez sur le bouton Télécharger la police pour ajouter des fichiers de polices de notre système.
4. Personnalisez les détails de la police, tels que le type, l’épaisseur et le style. Le détail « Type de police » est obligatoire, mais les autres sont facultatifs.
5. Cliquez sur l’icône de coche pour ajouter la nouvelle police aux options de police du thème !

Une fois qu’il a été déplacé des polices en attente vers les polices téléchargées, nous savons qu’il est prêt à être utilisé dans notre conception. Désormais, lorsque nous mettrons à jour la police par défaut (ou toute autre option typographique), nous verrons notre police personnalisée dans la liste déroulante des options de la famille de polices.

Icônes personnalisées

Nous pouvons également utiliser le processus de téléchargement de polices pour ajouter des jeux d’icônes personnalisés ! Exportez simplement votre jeu d’icônes personnalisé en tant que police d’icônes ou téléchargez la police d’icônes pour votre bibliothèque préférée.

Par exemple, disons que nous souhaitons utiliser la bibliothèque d’icônes populaire Font Awesome dans notre projet. Je vais télécharger les fichiers OTF gratuits à partir de la page de téléchargement de Font Awesome, puis ouvrir ThemeBuilder et suivre le même processus que ci-dessus : assurez-vous simplement de définir le type de police sur « Icône ».

Ensuite, pour modifier une icône, cliquez sur un composant et ouvrez le panneau Advanced Edit. Dans cet exemple, je vais modifier les icônes du composant Slider. Ensuite, suivez les étapes suivantes :

1. Sélectionnez le icon dans le volet Composants dans le coin supérieur droit de la barre latérale Advanced Edit.

   

2. Ouvrez la sous-section Texte. Cliquez sur l’icône de typographie sur le côté droit pour passer à « Définir les propriétés du texte local » si vous n’avez pas attribué la nouvelle police en tant que variable dans les styles de thème.

   

3. Choisissez votre police téléchargée dans la liste déroulante Familles de polices.

4. Cliquez sur l’icône d’engrenage en bas à droite du panneau Texte pour ouvrir le menu de sélection des icônes.

   

5. Choisissez une nouvelle icône dans le panneau de sélection des icônes.

   

6. Effectuez les ajustements nécessaires à la taille du texte ou à l’espacement.

Et juste comme ça, vous pouvez appliquer votre propre jeu d’icônes personnalisé pour modifier l’apparence de vos composants dans ThemeBuilder. Voici un avant et un après, montrant les icônes Slider par défaut et celles mises à jour à l’aide de la bibliothèque Font Awesome.

Comme vous pouvez le voir, cela ne prend que quelques minutes pour charger des polices et des icônes personnalisées dans ThemeBuilder et prêtes à être utilisées dans votre projet ! Essayez-le vous-même avec notre essai gratuit de 7 jours, et consultez nos documents pour découvrir d’autres façons dont ThemeBuilder peut rendre le style de votre bibliothèque de composants rapide et facile !