Usando

Estilizando os ícones

Aqui você vai encontrar algumas possíbilidades e dicas para customizar os ícones. Mas existem tantas opções que não caberiam todas aqui.

Se existe no Tailwind, você pode tentar com rocketicons

<div>
<FaMegaportclassName="icon-rose-500" />
</div>

Definindo background

Use os utilitários do Tailwind para definir e personalizar o background dos ícones.

<div>
<FaMegaportclassName="bg-white ..." />
<FaMegaportclassName="bg-red-200 ..." />
<FaMegaportclassName="bg-orange-200 ..." />
<FaMegaportclassName="bg-lime-200 ..." />
</div>

Largura de linha

Ícones outlined podem ter a largura das linhas personalizadas usando utilitários do Tailwind.

<div>
<FaMegaportclassName="stroke-[0.2] ..." />
<FaMegaportclassName="stroke-[0.5] ..." />
<FaMegaportclassName="stroke-1 ..." />
<FaMegaportclassName="stroke-[1.5] ..." />
<FaMegaportclassName="stroke-2 ..." />
<FaMegaportclassName="stroke-[3px] ..." />
</div>

Definindo bordas

Você não deve ter problemas usando os utilitários de bordas com rocketicons.

Raio da borda (border radius) Você pode definir

o raio da borda de um ícone.

<div>
<FaMegaportclassName="border border-slate-600 ..." />
<FaMegaportclassName="rounded border border-slate-600 ..." />
<FaMegaportclassName="rounded-md border border-slate-600 ..." />
<FaMegaportclassName="rounded-lg border border-slate-600 ..." />
</div>

Bordas

Largura da borda

Você pode definir a largura da borda de um ícone.

<div>
<FaMegaportclassName="border-2 border-slate-600 ..." />
<FaMegaportclassName="border-4 border-slate-600 ..." />
<FaMegaportclassName="border-8 border-slate-600 ..." />
</div>

Bordas

Estilo da borda

Definindo estilo das bordas.

<div>
<FaMegaportclassName="border-solid border-slate-600 ..." />
<FaMegaportclassName="border-dashed border-slate-600 ..." />
<FaMegaportclassName="border-dotted border-slate-600 ..." />
<FaMegaportclassName="border-double border-slate-600 ..." />
</div>

Outline

Definindo outline. Confira todas as opções de outline.

<div>
<FaMegaportclassName="outline outline-offset-2 outline-1 ..." />
<FaMegaportclassName="outline outline-offset-2 outline-2 ..." />
<FaMegaportclassName="outline outline-offset-2 outline-4 ..." />
</div>

Ring

Definindo ring. Confira todas as opções de ring.

<div>
<FaMegaportclassName="ring-offset-2 ring ..." />
<FaMegaportclassName="ring-offset-2 ring-2 ..." />
<FaMegaportclassName="ring-offset-2 ring-4 ..." />
</div>

Efeitos

Efeitos como sombras, opacidade e mistura podem ser usados com ícones.

<div>
<FaMegaportclassName="shadow-md ..." />
<FaMegaportclassName="shadow-lg ..." />
<FaMegaportclassName="shadow-xl ..." />
<FaMegaportclassName="shadow-2xl ..." />
</div>

Animações

Animações e transições podem ser usadas com os ícones, porem essa funcionalidade está apenas disponível para React. Você pode criar suas próprias animações, veja como na documentação do Tailwind.

React Native tem algumas funcionalidades limitadas. Veja a documentação oficial do NativeWind para saber mais.

<div>
<FaMegaportclassName="animate-bounce ..." />
<FaMegaportclassName="animate-ping ..." />
<FaMegaportclassName="animate-pulse ..." />
<FaMegaportclassName="animate-spin ..." />
</div>

Transformações

Usando transformações nos ícones.

Veja a documentação oficial do NativeWind para saber conferir as compatibilidades.

<div>
<FaMegaportclassName="scale-50 ..." />
<FaMegaportclassName="rotate-45 ..." />
<FaMegaportclassName="skew-y-12 ..." />
</div>

Cursor

Definindo cursores nos ícones.

Passe o mouse sobre o ícone e veja

<div>
<FaMegaportclassName="cursor-pointer ..." />
<FaMegaportclassName="cursor-move ..." />
<FaMegaportclassName="cursor-wait ..." />
<FaMegaportclassName="cursor-grab ..." />
</div>

Filtros

Filtros e ícones.

NativeWind não suporta filtros, logo essa funcionalidade não está disponível para React Native

<div>
<FaMegaportclassName="blur ..." />
<FaMegaportclassName="brightness-50 ..." />
<FaMegaportclassName="drop-shadow-lg ..." />
<FaMegaportclassName="saturate-200 ..." />
</div>