Téléchargement heroicons - Téléchargement du code source heroicons

heroicons

Autre code source

v2.2.0

Télécharger

De belles icônes SVG fabriquées à la main, par les fabricants de CSS du vent arrière.
Disponible en tant qu'icônes SVG de base et via les bibliothèques React et Vue de première partie.

Parcourez-vous sur héroïcons.com →

Utilisation de base

La façon la plus rapide d'utiliser ces icônes est de simplement copier la source de l'icône dont vous avez besoin sur HOROICONS.com et de l'installer directement dans votre HTML:

 <svg
  class = "size-6 text-gray-500" fill = "non" Viewbox = "0 0 24 24" rAMP = "currentColor" TRAD-width = "2">
  <pathstroke-linecap = "rond" stroke-linejoin = "rond" d = "m12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
  /> </ svg>

Les deux styles d'icônes sont préconfigurés pour être stylables en définissant la propriété CSS color , soit manuellement, soit en utilisant des classes de services publics comme text-gray-500 dans un cadre comme Tailwind CSS.

Réagir

Tout d'abord, installez @heroicons/react de NPM:

 NPM Install @ HOROICONS / REACT

Maintenant, chaque icône peut être importée individuellement en tant que composant REACT:

 import {beakericon} de '@ hoiCons / react / 24 / solide'function myComponent () {
  return (<div> <beeakericon className = "size-6 text-blue-500" /> <p> ... </p> </div>
  )}

Les icônes de contour 24x24 peuvent être importées à partir de @heroicons/react/24/outline , les icônes solides 24x24 peuvent être importées à partir de @heroicons/react/24/solid , les icônes solides 20x20 peuvent être importées à partir de @heroicons/react/20/solid et les icônes solides 16x16 peuvent être importées à partir de @heroicons/react/16/solid .

Les icônes utilisent une convention de dénomination du boîtier de chameau supérieur et sont toujours suffixées avec l' Icon de mot.

Parcourez la liste complète des noms d'icônes sur UNPKG →

Vue

Tout d'abord, installez @heroicons/vue de NPM:

 NPM Install @ HOROICONS / VUE

Maintenant, chaque icône peut être importée individuellement en tant que composant VUE:

 <mpelate>
  <div>
    <Beakericon class = "size-6 text-blue-500" />
    <p> ... </p>
  </div>
</ template> <Script Setup> Import {beakericon} de '@ HOROICONS / VUE / 24 / SOLID' </ Script>

Les icônes de contour 24x24 peuvent être importées à partir de @heroicons/vue/24/outline , les icônes solides 24x24 peuvent être importées à partir de @heroicons/vue/24/solid , les icônes solides 20x20 peuvent être importées à partir de @heroicons/vue/20/solid et les icônes solides 16x16 peuvent être importées de @heroicons/vue/16/solid .

Les icônes utilisent une convention de dénomination du boîtier de chameau supérieur et sont toujours suffixées avec l' Icon de mot.

Parcourez la liste complète des noms d'icônes sur UNPKG →

Contributif

Bien que nous apprécions absolument la volonté de quiconque d'essayer d'améliorer le projet, nous ne sommes actuellement intéressés que par les contributions qui corrigent les bogues, par exemple des choses comme des types de types de type incorrects, ou la fixation d'une icône qui a été exportée avec un remplissage au lieu d'un accident vasculaire cérébral, etc.

Nous n'acceptons pas les contributions pour de nouvelles icônes ni ne prenons en charge d'autres cadres comme Svelte ou SolidJS . Au lieu de cela, nous vous encourageons à publier vos propres icônes dans votre propre bibliothèque et à créer vos propres packages pour tous les autres cadres que vous souhaitez voir pris en charge.