0.2.8

Usando

Como Usar Cores

Utilitários para controlar a cor dos ícones.

<div>
<RcRocketIconclassName="icon-amber-500" />
</div>
Classes
Propriedades
 
icon-inherit
color: inherit
icon-current
color: currentColor
icon-transparent
color: transparent
icon-black
color: rgb(0 0 0)
icon-white
color: rgb(255 255 255)
icon-slate-50
color: rgb(248 250 252)
icon-slate-100
color: rgb(241 245 249)
icon-slate-200
color: rgb(226 232 240)
icon-slate-300
color: rgb(203 213 225)
icon-slate-400
color: rgb(148 163 184)
icon-slate-500
color: rgb(100 116 139)
icon-slate-600
color: rgb(71 85 105)
icon-slate-700
color: rgb(51 65 85)
icon-slate-800
color: rgb(30 41 59)
icon-slate-900
color: rgb(15 23 42)
icon-slate-950
color: rgb(2 6 23)
icon-gray-50
color: rgb(249 250 251)
icon-gray-100
color: rgb(243 244 246)
icon-gray-200
color: rgb(229 231 235)
icon-gray-300
color: rgb(209 213 219)
icon-gray-400
color: rgb(156 163 175)
icon-gray-500
color: rgb(107 114 128)
icon-gray-600
color: rgb(75 85 99)
icon-gray-700
color: rgb(55 65 81)
icon-gray-800
color: rgb(31 41 55)
icon-gray-900
color: rgb(17 24 39)
icon-gray-950
color: rgb(3 7 18)
icon-zinc-50
color: rgb(250 250 250)
icon-zinc-100
color: rgb(244 244 245)
icon-zinc-200
color: rgb(228 228 231)
icon-zinc-300
color: rgb(212 212 216)
icon-zinc-400
color: rgb(161 161 170)
icon-zinc-500
color: rgb(113 113 122)
icon-zinc-600
color: rgb(82 82 91)
icon-zinc-700
color: rgb(63 63 70)
icon-zinc-800
color: rgb(39 39 42)
icon-zinc-900
color: rgb(24 24 27)
icon-zinc-950
color: rgb(9 9 11)
icon-neutral-50
color: rgb(250 250 250)
icon-neutral-100
color: rgb(245 245 245)
icon-neutral-200
color: rgb(229 229 229)
icon-neutral-300
color: rgb(212 212 212)
icon-neutral-400
color: rgb(163 163 163)
icon-neutral-500
color: rgb(115 115 115)
icon-neutral-600
color: rgb(82 82 82)
icon-neutral-700
color: rgb(64 64 64)
icon-neutral-800
color: rgb(38 38 38)
icon-neutral-900
color: rgb(23 23 23)
icon-neutral-950
color: rgb(10 10 10)
icon-stone-50
color: rgb(250 250 249)
icon-stone-100
color: rgb(245 245 244)
icon-stone-200
color: rgb(231 229 228)
icon-stone-300
color: rgb(214 211 209)
icon-stone-400
color: rgb(168 162 158)
icon-stone-500
color: rgb(120 113 108)
icon-stone-600
color: rgb(87 83 78)
icon-stone-700
color: rgb(68 64 60)
icon-stone-800
color: rgb(41 37 36)
icon-stone-900
color: rgb(28 25 23)
icon-stone-950
color: rgb(12 10 9)
icon-red-50
color: rgb(254 242 242)
icon-red-100
color: rgb(254 226 226)
icon-red-200
color: rgb(254 202 202)
icon-red-300
color: rgb(252 165 165)
icon-red-400
color: rgb(248 113 113)
icon-red-500
color: rgb(239 68 68)
icon-red-600
color: rgb(220 38 38)
icon-red-700
color: rgb(185 28 28)
icon-red-800
color: rgb(153 27 27)
icon-red-900
color: rgb(127 29 29)
icon-red-950
color: rgb(69 10 10)
icon-orange-50
color: rgb(255 247 237)
icon-orange-100
color: rgb(255 237 213)
icon-orange-200
color: rgb(254 215 170)
icon-orange-300
color: rgb(253 186 116)
icon-orange-400
color: rgb(251 146 60)
icon-orange-500
color: rgb(249 115 22)
icon-orange-600
color: rgb(234 88 12)
icon-orange-700
color: rgb(194 65 12)
icon-orange-800
color: rgb(154 52 18)
icon-orange-900
color: rgb(124 45 18)
icon-orange-950
color: rgb(67 20 7)
icon-amber-50
color: rgb(255 251 235)
icon-amber-100
color: rgb(254 243 199)
icon-amber-200
color: rgb(253 230 138)
icon-amber-300
color: rgb(252 211 77)
icon-amber-400
color: rgb(251 191 36)
icon-amber-500
color: rgb(245 158 11)
icon-amber-600
color: rgb(217 119 6)
icon-amber-700
color: rgb(180 83 9)
icon-amber-800
color: rgb(146 64 14)
icon-amber-900
color: rgb(120 53 15)
icon-amber-950
color: rgb(69 26 3)
icon-yellow-50
color: rgb(254 252 232)
icon-yellow-100
color: rgb(254 249 195)
icon-yellow-200
color: rgb(254 240 138)
icon-yellow-300
color: rgb(253 224 71)
icon-yellow-400
color: rgb(250 204 21)
icon-yellow-500
color: rgb(234 179 8)
icon-yellow-600
color: rgb(202 138 4)
icon-yellow-700
color: rgb(161 98 7)
icon-yellow-800
color: rgb(133 77 14)
icon-yellow-900
color: rgb(113 63 18)
icon-yellow-950
color: rgb(66 32 6)
icon-lime-50
color: rgb(247 254 231)
icon-lime-100
color: rgb(236 252 203)
icon-lime-200
color: rgb(217 249 157)
icon-lime-300
color: rgb(190 242 100)
icon-lime-400
color: rgb(163 230 53)
icon-lime-500
color: rgb(132 204 22)
icon-lime-600
color: rgb(101 163 13)
icon-lime-700
color: rgb(77 124 15)
icon-lime-800
color: rgb(63 98 18)
icon-lime-900
color: rgb(54 83 20)
icon-lime-950
color: rgb(26 46 5)
icon-green-50
color: rgb(240 253 244)
icon-green-100
color: rgb(220 252 231)
icon-green-200
color: rgb(187 247 208)
icon-green-300
color: rgb(134 239 172)
icon-green-400
color: rgb(74 222 128)
icon-green-500
color: rgb(34 197 94)
icon-green-600
color: rgb(22 163 74)
icon-green-700
color: rgb(21 128 61)
icon-green-800
color: rgb(22 101 52)
icon-green-900
color: rgb(20 83 45)
icon-green-950
color: rgb(5 46 22)
icon-emerald-50
color: rgb(236 253 245)
icon-emerald-100
color: rgb(209 250 229)
icon-emerald-200
color: rgb(167 243 208)
icon-emerald-300
color: rgb(110 231 183)
icon-emerald-400
color: rgb(52 211 153)
icon-emerald-500
color: rgb(16 185 129)
icon-emerald-600
color: rgb(5 150 105)
icon-emerald-700
color: rgb(4 120 87)
icon-emerald-800
color: rgb(6 95 70)
icon-emerald-900
color: rgb(6 78 59)
icon-emerald-950
color: rgb(2 44 34)
icon-teal-50
color: rgb(240 253 250)
icon-teal-100
color: rgb(204 251 241)
icon-teal-200
color: rgb(153 246 228)
icon-teal-300
color: rgb(94 234 212)
icon-teal-400
color: rgb(45 212 191)
icon-teal-500
color: rgb(20 184 166)
icon-teal-600
color: rgb(13 148 136)
icon-teal-700
color: rgb(15 118 110)
icon-teal-800
color: rgb(17 94 89)
icon-teal-900
color: rgb(19 78 74)
icon-teal-950
color: rgb(4 47 46)
icon-cyan-50
color: rgb(236 254 255)
icon-cyan-100
color: rgb(207 250 254)
icon-cyan-200
color: rgb(165 243 252)
icon-cyan-300
color: rgb(103 232 249)
icon-cyan-400
color: rgb(34 211 238)
icon-cyan-500
color: rgb(6 182 212)
icon-cyan-600
color: rgb(8 145 178)
icon-cyan-700
color: rgb(14 116 144)
icon-cyan-800
color: rgb(21 94 117)
icon-cyan-900
color: rgb(22 78 99)
icon-cyan-950
color: rgb(8 51 68)
icon-sky-50
color: rgb(240 249 255)
icon-sky-100
color: rgb(224 242 254)
icon-sky-200
color: rgb(186 230 253)
icon-sky-300
color: rgb(125 211 252)
icon-sky-400
color: rgb(56 189 248)
icon-sky-500
color: rgb(14 165 233)
icon-sky-600
color: rgb(2 132 199)
icon-sky-700
color: rgb(3 105 161)
icon-sky-800
color: rgb(7 89 133)
icon-sky-900
color: rgb(12 74 110)
icon-sky-950
color: rgb(8 47 73)
icon-blue-50
color: rgb(239 246 255)
icon-blue-100
color: rgb(219 234 254)
icon-blue-200
color: rgb(191 219 254)
icon-blue-300
color: rgb(147 197 253)
icon-blue-400
color: rgb(96 165 250)
icon-blue-500
color: rgb(59 130 246)
icon-blue-600
color: rgb(37 99 235)
icon-blue-700
color: rgb(29 78 216)
icon-blue-800
color: rgb(30 64 175)
icon-blue-900
color: rgb(30 58 138)
icon-blue-950
color: rgb(23 37 84)
icon-indigo-50
color: rgb(238 242 255)
icon-indigo-100
color: rgb(224 231 255)
icon-indigo-200
color: rgb(199 210 254)
icon-indigo-300
color: rgb(165 180 252)
icon-indigo-400
color: rgb(129 140 248)
icon-indigo-500
color: rgb(99 102 241)
icon-indigo-600
color: rgb(79 70 229)
icon-indigo-700
color: rgb(67 56 202)
icon-indigo-800
color: rgb(55 48 163)
icon-indigo-900
color: rgb(49 46 129)
icon-indigo-950
color: rgb(30 27 75)
icon-violet-50
color: rgb(245 243 255)
icon-violet-100
color: rgb(237 233 254)
icon-violet-200
color: rgb(221 214 254)
icon-violet-300
color: rgb(196 181 253)
icon-violet-400
color: rgb(167 139 250)
icon-violet-500
color: rgb(139 92 246)
icon-violet-600
color: rgb(124 58 237)
icon-violet-700
color: rgb(109 40 217)
icon-violet-800
color: rgb(91 33 182)
icon-violet-900
color: rgb(76 29 149)
icon-violet-950
color: rgb(46 16 101)
icon-purple-50
color: rgb(250 245 255)
icon-purple-100
color: rgb(243 232 255)
icon-purple-200
color: rgb(233 213 255)
icon-purple-300
color: rgb(216 180 254)
icon-purple-400
color: rgb(192 132 252)
icon-purple-500
color: rgb(168 85 247)
icon-purple-600
color: rgb(147 51 234)
icon-purple-700
color: rgb(126 34 206)
icon-purple-800
color: rgb(107 33 168)
icon-purple-900
color: rgb(88 28 135)
icon-purple-950
color: rgb(59 7 100)
icon-fuchsia-50
color: rgb(253 244 255)
icon-fuchsia-100
color: rgb(250 232 255)
icon-fuchsia-200
color: rgb(245 208 254)
icon-fuchsia-300
color: rgb(240 171 252)
icon-fuchsia-400
color: rgb(232 121 249)
icon-fuchsia-500
color: rgb(217 70 239)
icon-fuchsia-600
color: rgb(192 38 211)
icon-fuchsia-700
color: rgb(162 28 175)
icon-fuchsia-800
color: rgb(134 25 143)
icon-fuchsia-900
color: rgb(112 26 117)
icon-fuchsia-950
color: rgb(74 4 78)
icon-pink-50
color: rgb(253 242 248)
icon-pink-100
color: rgb(252 231 243)
icon-pink-200
color: rgb(251 207 232)
icon-pink-300
color: rgb(249 168 212)
icon-pink-400
color: rgb(244 114 182)
icon-pink-500
color: rgb(236 72 153)
icon-pink-600
color: rgb(219 39 119)
icon-pink-700
color: rgb(190 24 93)
icon-pink-800
color: rgb(157 23 77)
icon-pink-900
color: rgb(131 24 67)
icon-pink-950
color: rgb(80 7 36)
icon-rose-50
color: rgb(255 241 242)
icon-rose-100
color: rgb(255 228 230)
icon-rose-200
color: rgb(254 205 211)
icon-rose-300
color: rgb(253 164 175)
icon-rose-400
color: rgb(251 113 133)
icon-rose-500
color: rgb(244 63 94)
icon-rose-600
color: rgb(225 29 72)
icon-rose-700
color: rgb(190 18 60)
icon-rose-800
color: rgb(159 18 57)
icon-rose-900
color: rgb(136 19 55)
icon-rose-950
color: rgb(76 5 25)

Uso básico

Definindo a cor dos ícones

Utilize os utiliários icon-{color} para controlar a cor do ícone.

Paleta de cores padrão

Os ícones estão disponívels em toda a paleta de cor padrão do Tailwind, usando as configurações de cores do tema.
Siga a documentação oficial para customizar cores e adicionar sua prórpia paleta.

  • slate
    slate
    slate-50
    slate-100
    slate-200
    slate-300
    slate-400
    slate-500
    slate-600
    slate-700
    slate-800
    slate-900
    slate-950
  • gray
    gray
    gray-50
    gray-100
    gray-200
    gray-300
    gray-400
    gray-500
    gray-600
    gray-700
    gray-800
    gray-900
    gray-950
  • zinc
    zinc
    zinc-50
    zinc-100
    zinc-200
    zinc-300
    zinc-400
    zinc-500
    zinc-600
    zinc-700
    zinc-800
    zinc-900
    zinc-950
  • neutral
    neutral
    neutral-50
    neutral-100
    neutral-200
    neutral-300
    neutral-400
    neutral-500
    neutral-600
    neutral-700
    neutral-800
    neutral-900
    neutral-950
  • stone
    stone
    stone-50
    stone-100
    stone-200
    stone-300
    stone-400
    stone-500
    stone-600
    stone-700
    stone-800
    stone-900
    stone-950
  • red
    red
    red-50
    red-100
    red-200
    red-300
    red-400
    red-500
    red-600
    red-700
    red-800
    red-900
    red-950
  • orange
    orange
    orange-50
    orange-100
    orange-200
    orange-300
    orange-400
    orange-500
    orange-600
    orange-700
    orange-800
    orange-900
    orange-950
  • amber
    amber
    amber-50
    amber-100
    amber-200
    amber-300
    amber-400
    amber-500
    amber-600
    amber-700
    amber-800
    amber-900
    amber-950
  • yellow
    yellow
    yellow-50
    yellow-100
    yellow-200
    yellow-300
    yellow-400
    yellow-500
    yellow-600
    yellow-700
    yellow-800
    yellow-900
    yellow-950
  • lime
    lime
    lime-50
    lime-100
    lime-200
    lime-300
    lime-400
    lime-500
    lime-600
    lime-700
    lime-800
    lime-900
    lime-950
  • green
    green
    green-50
    green-100
    green-200
    green-300
    green-400
    green-500
    green-600
    green-700
    green-800
    green-900
    green-950
  • emerald
    emerald
    emerald-50
    emerald-100
    emerald-200
    emerald-300
    emerald-400
    emerald-500
    emerald-600
    emerald-700
    emerald-800
    emerald-900
    emerald-950
  • teal
    teal
    teal-50
    teal-100
    teal-200
    teal-300
    teal-400
    teal-500
    teal-600
    teal-700
    teal-800
    teal-900
    teal-950
  • cyan
    cyan
    cyan-50
    cyan-100
    cyan-200
    cyan-300
    cyan-400
    cyan-500
    cyan-600
    cyan-700
    cyan-800
    cyan-900
    cyan-950
  • sky
    sky
    sky-50
    sky-100
    sky-200
    sky-300
    sky-400
    sky-500
    sky-600
    sky-700
    sky-800
    sky-900
    sky-950
  • blue
    blue
    blue-50
    blue-100
    blue-200
    blue-300
    blue-400
    blue-500
    blue-600
    blue-700
    blue-800
    blue-900
    blue-950
  • indigo
    indigo
    indigo-50
    indigo-100
    indigo-200
    indigo-300
    indigo-400
    indigo-500
    indigo-600
    indigo-700
    indigo-800
    indigo-900
    indigo-950
  • violet
    violet
    violet-50
    violet-100
    violet-200
    violet-300
    violet-400
    violet-500
    violet-600
    violet-700
    violet-800
    violet-900
    violet-950
  • purple
    purple
    purple-50
    purple-100
    purple-200
    purple-300
    purple-400
    purple-500
    purple-600
    purple-700
    purple-800
    purple-900
    purple-950
  • fuchsia
    fuchsia
    fuchsia-50
    fuchsia-100
    fuchsia-200
    fuchsia-300
    fuchsia-400
    fuchsia-500
    fuchsia-600
    fuchsia-700
    fuchsia-800
    fuchsia-900
    fuchsia-950
  • pink
    pink
    pink-50
    pink-100
    pink-200
    pink-300
    pink-400
    pink-500
    pink-600
    pink-700
    pink-800
    pink-900
    pink-950
  • rose
    rose
    rose-50
    rose-100
    rose-200
    rose-300
    rose-400
    rose-500
    rose-600
    rose-700
    rose-800
    rose-900
    rose-950