Icône intégrée KendoReact et collection d’icônes SVG

Le système d’icônes KendoReact propose plus de 400 icônes aux formats police et SVG avec des options de personnalisation.

Les icônes sont les bêtes de somme silencieuses d’une expérience utilisateur exceptionnelle. Ils aident les utilisateurs à naviguer rapidement dans les interfaces, à communiquer leurs actions en un coup d’œil et à ajouter un attrait visuel à des interfaces autrement contenant beaucoup de texte. Qu’il s’agisse d’une simple icône « enregistrer » dans une barre d’outils ou d’un ensemble complexe d’icônes de réseaux sociaux dans un pied de page, ces petits éléments graphiques jouent un rôle important dans la création d’expériences utilisateur intuitives.

Le Progrès KendoReact La bibliothèque de composants d’interface utilisateur facilite l’utilisation des icônes dans les applications React grâce à une collection intégrée de plus de 400 icônesdisponible sous forme d’icônes de police et de SVG. Dans cet article, nous expliquerons comment démarrer avec les icônes KendoReact et comment personnaliser leur apparence.

Le KendoReact Icône et IcôneSVG les composants font partie du KendoReact Gratuit suite, ce qui signifie que vous pouvez les utiliser dans vos projets sans aucune condition de licence ou d’enregistrement !

Le composant React Icon

Le Composant icône KendoReact utilise des icônes de police, une méthode éprouvée pour restituer des icônes légères et faciles à styliser avec CSS. Pour commencer, vous devrez importer le composant et inclure le KendoReact feuille de style d’icône de police à partir d’un CDN.

Le composant Icon est distribué via le @progress/kendo-react-common Paquet npm :

import { Icon } from '@progress/kendo-react-common';

Voici un exemple de base de rendu d’une barre d’outils personnalisée qui affiche un ensemble d’icônes à l’aide du composant Icon :

import * as React from 'react';
import { Icon } from '@progress/kendo-react-common';
import { Button } from '@progress/kendo-react-buttons';

const App = () => {
  return (
    <div>
      <div className="toolbar">
        <Button>
          <Icon name="save" />
          Save
        </Button>
        <Button>
          <Icon name="folder-open" />
          Open
        </Button>
        <Button>
          <Icon name="print" />
          Print
        </Button>
        <Button>
          <Icon name="share" />
          Share
        </Button>
      </div>
    </div>
  );
};

export default App;

L’exemple de code ci-dessus crée une barre d’outils simple avec des actions familières (enregistrer, ouvrir, etc.), chacune marquée d’une icône. Le name prop correspond à une icône de la collection KendoReact.

Personnalisation de l’apparence

Le composant Icon propose plusieurs accessoires pour ajuster rapidement son apparence.

Couleurs du thème

Nous pouvons facilement changer la couleur des icônes en utilisant le themeColor prop, qui s’aligne sur les couleurs prédéfinies du thème KendoReact pour le succès, l’avertissement, l’erreur et plus encore.

import * as React from 'react';
import { Icon } from '@progress/kendo-react-common';

const App = () => {
  return (
    <div>
      <div className="status-indicators">
        <p>
          <Icon name="check-circle" themeColor="success" /> Operation Successful
        </p>
        <p>
          <Icon name="exclamation-circle" themeColor="warning" /> Please Check
          Configuration
        </p>
        <p>
          <Icon name="x-circle" themeColor="error" /> Connection Failed
        </p>
        <p>
          <Icon name="info-circle" themeColor="info" /> New Information
          Available
        </p>
      </div>
    </div>
  );
};

export default App;

Pouvoir changer la couleur des icônes est parfait pour créer des indicateurs d’état que les utilisateurs peuvent comprendre instantanément.

Dimensionnement

Le size prop nous permet de choisir parmi une gamme de tailles prédéfinies, permettant une cohérence dans notre application.

import * as React from 'react';
import { Icon } from '@progress/kendo-react-common';

const App = () => {
  const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'];
  return (
    <div>
      <div className="size-showcase">
        {sizes.map((size) => (
          <span key={size}>
            <Icon name="gear" size={size} />
            <p>{size}</p>
          </span>
        ))}
      </div>
    </div>
  );
};

export default App;

Le système de dimensionnement va de xsmall (12px) à xxxlarge (48px), ce qui nous donne une grande flexibilité pour différents cas d’utilisation. Les petites icônes fonctionnent bien dans les interfaces denses comme les tableaux de données, tandis que les icônes plus grandes sont parfaites pour les sections de héros ou les principaux boutons d’appel à l’action.

Retournement

Besoin de refléter une icône ? Le flip prop peut inverser une icône horizontalement, verticalement ou les deux.

import * as React from 'react';
import { Icon } from '@progress/kendo-react-common';
import { Button } from '@progress/kendo-react-buttons';

const App = () => {
  return (
    <div>
      <div className="navigation">
        <Button>
          <Icon name="arrow-chevron-left" />
          Previous
        </Button>
        <Button>
          Next
          <Icon name="arrow-chevron-left" flip="horizontal" />
        </Button>
      </div>
    </div>
  );
};

export default App;

Le code ci-dessus est un exemple de la façon dont le retournement peut aider à créer des éléments de navigation symétriques sans avoir besoin d’une icône « flèche droite » distincte.

Le composant KendoReact SvgIcon

Alors que le Icône Le composant utilise des icônes basées sur des polices, la bibliothèque KendoReact fournit également le Composant SVGIcon pour le rendu des icônes basées sur SVG. Les icônes SVG offrent certains avantages par rapport aux icônes de police, notamment une meilleure prise en charge de l’accessibilité, un rendu plus précis à différentes tailles et la possibilité d’utiliser plusieurs couleurs dans une seule icône.

Le composant SvgIcon est importé du même package, mais nécessite l’importation de définitions d’icônes individuelles :

import * as React from 'react';
import { SvgIcon } from '@progress/kendo-react-common';
import { saveIcon, folderOpenIcon, printIcon, shareIcon } from '@progress/kendo-svg-icons';

const App = () => {
  return (
    <div className="svg-toolbar">
      <button className="toolbar-button">
        <SvgIcon icon={saveIcon} />
        Save
      </button>
      <button className="toolbar-button">
        <SvgIcon icon={folderOpenIcon} />
        Open
      </button>
      <button className="toolbar-button">
        <SvgIcon icon={printIcon} />
        Print
      </button>
      <button className="toolbar-button">
        <SvgIcon icon={shareIcon} />
        Share
      </button>
    </div>
  );
};

export default App;

La principale différence dans l’utilisation du composant SvgIcon est qu’au lieu d’utiliser un name prop, nous importons les définitions d’icônes spécifiques et les transmettons au icon soutenir. Cette approche offre de meilleurs avantages en matière de tremblement d’arbre puisque seules les icônes que nous utilisons réellement sont incluses dans notre offre groupée.

Le SvgIcon Le composant prend en charge le même size, themeColor et flip accessoires comme police Icon composant.

Conclure

Le système d’icônes KendoReact intégré fournit tout ce dont vous avez besoin pour ajouter une iconographie professionnelle et cohérente à vos applications React. Avec plus de 400 icônes disponibles aux formats police et SVG avec options de personnalisation, vous pouvez créer des interfaces visuellement attrayantes sans avoir à gérer des bibliothèques d’icônes distinctes.

Pour voir la liste complète des icônes disponibles et explorer plus d’options de configuration, assurez-vous de consulter le Iconographie documentation du kit Progress Design System !

Et pour essayer tout cela par vous-même, débutez avec KendoReact Free!