0.2.8
  • Docs
  • Primeiros Passos
  • Icones
Selecione
GitHub
    Playground
  • Primeiros Passos
    • Instalação
    • Configuração
    • Customização
    • Contribuindo
  • Usando os ícones
    • Adicionando Ícones
    • Cores
    • Modo Escuro
    • Design Responsivo
    • Atalhos
    • Dimensionando Ícones
    • Hover, Focus e Outros Estados
    • Estilização
  • Icons
    • rocketicons
    • Ant Design Icons
    • BoxIcons
    • Bootstrap Icons
    • css.gg
  • Roadmap

BoxIcons

https://github.com/atisawd/boxicons

MITMIT

1.634 Ícones

Copyright © 2024 rocketclimb

DiscordGitHub

solid capsule

TS
ESM
CommonJS
Saiba mais...
default
icon-7xl
icon-6xl
icon-5xl
icon-4xl
icon-3xl
icon-2xl
icon-xl
icon-lg
icon-base
icon-sm
icon-xs
... ver mais
Saiba mais...
default
icon-slate-700
icon-gray-300
icon-zinc
icon-neutral-600
icon-stone
icon-red-800
icon-orange-300
icon-amber-900
icon-yellow
icon-lime-200
icon-green-600
icon-emerald-200
icon-teal-500
icon-cyan-600
icon-sky
icon-blue-400
icon-indigo-700
icon-purple-600
icon-fuchsia-800
icon-pink-600
icon-rose-300
... ver mais
Saiba mais...
default
stroke-1
stroke-2
stroke-[0.5]
stroke-[1.5]
stroke-[3]
stroke-[3.375]
stroke-[0.375rem]
stroke-[3px]
... ver mais
Saiba mais...
default
icon-yellow-2xl
icon-yellow icon-2xl
icon-purple-600-sm
icon-purple-600 icon-sm
... ver mais
Saiba mais...
Saiba mais...
Saiba mais...
default
animate-bounce
animate-ping
animate-pulse
animate-spin
... saiba mais
Saiba mais...
Tags
filled

Importe o ícone do pacote rocketicons

Posicione o componente onde você precisar

Tamanhos

Eles podem ser alterados ou criados conforme sua necessidade. Utilitários Tailwind como tamanho, altura e largura também estão disponíveis.

Cores

Use para escolher as cores dos ícones. Veja a documentação de cores do Tailwind para saber mais.

Largura de linha

Ícones oulined podem ter a largura da linha personalizada

Atalhos

Utilitários podem ser combinados alterando o tamanho e a cor do ícone ao mesmo tempo. Use no formato icon-{cor}-{tamanho}.

Modo escuro

Usando Tailwind (e NativeWind no React-native), a variante de modo escuro pode ser utilizada para definir uma aparência diferente quando esse modo estiver ativado.

Hover, Focus, and Outros estados

O suporte na web e total, porém NativeWind tem algumas limitações, descritas na documentação oficial. Saiba mais sobre estados.

Animações

As animações do Tailwind funcionam com os ícones. Você pode criar suas próprias animações.

Mais estilos

Além do utilitários icons-*, você tem disponível tudo o que o Tailwind oferece, permitindo que você chegue a praticamente qualquer resultado.