heroicons Descargar - Descargar el código fuente heroicons

heroicons

Otro código fuente

v2.2.0

Descargar

Hermosos iconos SVG hechos a mano, por los creadores de CSS de Vailín.
Disponible como iconos SVG básicos y a través de bibliotecas de reaccionamiento de primera parte y VUE.

Explorar a Heroicons.com →

Uso básico

La forma más rápida de usar estos iconos es simplemente copiar la fuente del icono que necesita de Heroicons.com y en línea directamente en su HTML:

 <svg
  class = "Size-6 Text-Gray-500" Fill = "None" ViewBox = "0 0 24 24" Stroke = "CurrentColor" Stroke-width = "2">
  <Pathstroke-Linecap = "Round" Stroke-lineJoin = "Round" d = "M12 8V4L3 3M6-3A9 9 0 11-18 0 9 9 0 0118 0Z"
  /> </svg>

Ambos estilos de icono están preconfigurados para ser estilizables al establecer la propiedad CSS color , ya sea manualmente o utilizando clases de utilidad como text-gray-500 en un marco como CSS de Vail Vail.

Reaccionar

Primero, instale @heroicons/react desde NPM:

 npm install @heroicons/react

Ahora cada icono se puede importar individualmente como un componente React:

 import {beakericon} de '@heroicons/react/24/solid'function myComponent () {
  return (<iv> <beakericon classname = "size-6 text-blue-500"/> <p> ... </p> </div>
  )}

Los iconos de esquema 24x24 se pueden importar desde @heroicons/react/24/outline , los iconos sólidos 24x24 se pueden importar de @heroicons/react/24/solid , los iconos sólidos 20x20 se pueden importar de @heroicons/react/20/solid y 16x16 iconos sólidos se pueden importar de @heroicons/react/16/solid .

Los íconos usan una convención de nombres de casos de camello superior y siempre se sufre con el Icon de la palabra.

Explore la lista completa de nombres de iconos en UNPKG →

Vue

Primero, instale @heroicons/vue desde NPM:

 NPM install @heroicons/vue

Ahora cada icono se puede importar individualmente como un componente VUE:

 <template>
  <div>
    <Beakericon class = "size-6 text-blue-500" />
    <p> ... </p>
  </div>
</template> <script setup> import {beakericon} de '@heroicons/vue/24/solid' </script>

Los iconos de esquema 24x24 se pueden importar de @heroicons/vue/24/outline , los iconos sólidos 24x24 se pueden importar de @heroicons/vue/24/solid , los iconos sólidos 20x20 se pueden importar de @heroicons/vue/20/solid , y los iconos sólidos 16x16 se pueden importar de @heroicons/vue/16/solid .

Los íconos usan una convención de nombres de casos de camello superior y siempre se sufre con el Icon de la palabra.

Explore la lista completa de nombres de iconos en UNPKG →

Que contribuye

Si bien apreciamos absolutamente la voluntad de cualquiera de tratar de mejorar el proyecto, actualmente solo estamos interesados en contribuciones que corrigen errores, por ejemplo, cosas como tipos de mecanografiados incorrectos o arreglar un icono que se ha exportado con un relleno en lugar de un derrame cerebral, etc.

No aceptamos contribuciones para nuevos iconos o agregamos soporte para otros marcos como SVELTE o SOLIDJS . En su lugar, le recomendamos que lance sus propios íconos en su propia biblioteca y cree sus propios paquetes para cualquier otro marcado que desee ver con el apoyo.