heroicons

Lindos ícones SVG artesanais, pelos fabricantes do Tailwind CSS.
Disponível como ícones básicos de SVG e por meio de bibliotecas de reagir e vue de primeira parte.

Navegue em heroicons.com →

Uso básico

A maneira mais rápida de usar esses ícones é simplesmente copiar a fonte do ícone que você precisa do Heroicons.com e embutir diretamente no seu HTML:

 <svg
  class = "tamanho-6-6 text-500" preench = "nenhum" 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 os estilos de ícones são pré-configurados para serem estiláveis, definindo a propriedade CSS color , manualmente ou usando classes de utilitário como text-gray-500 em uma estrutura como o Tailwind CSS.

Reagir

Primeiro, instale @heroicons/react do npm:

 NPM Install @Heroicons/React

Agora, cada ícone pode ser importado individualmente como um componente React:

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

Os ícones de contorno 24x24 podem ser importados de @heroicons/react/24/outline , os ícones sólidos 24x24 podem ser importados de @heroicons/react/24/solid , os ícones sólidos 20x20 podem ser importados de @heroicons/react/20/solid e os ícones sólidos de 16x16 podem ser importados de @heroicons/react/16/solid .

Os ícones usam uma convenção de nomeação de estojo de camelo superior e são sempre sufixos com a palavra Icon .

Navegue a lista completa de nomes de ícones em unpkg →

Vue

Primeiro, instale @heroicons/vue do npm:

 NPM Install @Heroicons/Vue

Agora, cada ícone pode ser importado individualmente como um componente VUE:

 <Sodemplate>
  <div>
    <Beakericon class = "size-6 text-500" />
    <p> ... </p>
  </div>
</modemplate> <Script Setup> importar {beakericon} de '@heroicons/vue/24/sólido' </sCript>

Os ícones de contorno 24x24 podem ser importados de @heroicons/vue/24/outline , os ícones sólidos 24x24 podem ser importados de @heroicons/vue/24/solid , os ícones sólidos 20x20 podem ser importados de @heroicons/vue/20/solid e os ícones sólidos de 16x16 podem ser importados de @heroicons/vue/16/solid .

Os ícones usam uma convenção de nomeação de estojo de camelo superior e são sempre sufixos com a palavra Icon .

Navegue a lista completa de nomes de ícones em unpkg →

Contribuindo

Embora apreciamos absolutamente a disposição de qualquer pessoa de tentar melhorar o projeto, atualmente estamos interessados ​​apenas em contribuições que corrigem bugs, por exemplo, coisas como tipos de texto de texto incorretos ou corrigindo um ícone que foi exportado com um preenchimento em vez de um derrame, etc.

Não estamos aceitando contribuições para novos ícones ou adicionando suporte para outras estruturas, como esbelto ou sólido . Em vez disso, incentivamos você a lançar seus próprios ícones em sua própria biblioteca e criar seus próprios pacotes para qualquer outra estrutura que você queira ver suportada.

Licença

Esta biblioteca está licenciada pelo MIT.