Heroicons : bibliothèque d'icônes open source de haute qualité 97

Heroicons est une bibliothèque d'icônes open source de haute qualité, dont les différentes versions sont maintenues respectivement par l'équipe Tailwind CSS et l'équipe Refactoring UI.

Heroicons convient au développement web et applicatif. Toutes les icônes sont sous licence MIT, ce qui permet à quiconque de les télécharger et de les utiliser gratuitement, aussi bien pour des projets personnels que commerciaux.

Caractéristiques de Heroicons

• Icônes SVG de haute qualité : Heroicons propose des conceptions d'icônes claires et cohérentes, adaptées au développement d'interfaces utilisateur, au design web et applicatif.

• Deux styles disponibles : comprend les styles Outline (contour) et Solid (rempli), pour répondre à différents besoins de conception.

• Large champ d'application : les icônes couvrent les éléments d'interface courants et les scénarios métier, convenant à la navigation, aux actions, aux indicateurs d'état, etc.

• Intégration facile : prend en charge l'utilisation directe de code SVG dans HTML, ainsi que l'installation via npm pour une utilisation en tant que composants dans des frameworks frontend modernes comme React, Vue, etc.

• Mises à jour régulières : avec les itérations de versions, le nombre d'icônes continue d'augmenter, certaines versions comportant par exemple plus de 1 200 icônes.

Comment utiliser Heroicons

1. Installation :

• Pour les projets frontend, vous pouvez installer la bibliothèque React ou Vue de Heroicons via npm ou Yarn.

npm install @heroicons/react

# ou utiliser Yarn

yarn add @heroicons/react

2. Importer les icônes :

• Dans le code, vous pouvez directement importer et utiliser les icônes, par exemple :

import { BellIcon } from '@heroicons/react/24/outline';

function App() {

  return

}

3. Utilisation directe du SVG :

• Vous pouvez également copier directement le code SVG depuis le site web de Heroicons pour l'utiliser dans HTML.

4. Intégration avec Figma :

• Les designers peuvent utiliser le plugin Figma ou télécharger directement les fichiers SVG pour leur travail de conception.

Heroicons propose non seulement des icônes dans plusieurs styles, mais offre également un choix d'icônes en différentes tailles, pour s'adapter à divers besoins de conception. Les utilisateurs peuvent choisir des icônes de différentes tailles, comme 24x24, 20x20, etc., en fonction des exigences spécifiques de leur projet. De plus, le style de conception des icônes Heroicons est épuré et moderne, adapté à tout type d'application et de site web, et combiné avec Tailwind CSS, il permet d'obtenir de meilleurs effets visuels et une meilleure expérience utilisateur.

La bibliothèque d'icônes Heroicons est en constante évolution, et les développeurs peuvent suivre sa page GitHub pour obtenir les dernières icônes et mises à jour de fonctionnalités.

Github : https://github.com/tailwindlabs/heroicons