I am using flowbite-react in my react project. I am using the Sidebar component. I am able to style the text of each button in the sidebar using regular tailwind classes, but I can't figure out how to style the icons. No classes work.
Here is the sidebar code:
<Sidebar>
<Sidebar.Items>
<Sidebar.ItemGroup>
<Link to='/dashboard'>
<Sidebar.Item
icon={AiOutlineHome}
className='text-sm text-stone-800'
style={{ color: '#000' }}
>
Home
</Sidebar.Item>
</Link>
<Link to='/dashboard/item'>
<Sidebar.Item
icon={HiOutlineTemplate}
className='text-sm text-stone-800'
>
Templates
</Sidebar.Item>
</Link>
<Link to='/dashboard/orders'>
<Sidebar.Item
icon={MdOutlineShoppingCart}
label='3'
className='text-sm text-stone-800'
>
Orders
</Sidebar.Item>
</Link>
<Link to='/dashboard/customers'>
<Sidebar.Item icon={BsPeople} className='text-sm text-stone-800'>
Customers
</Sidebar.Item>
</Link>
</Sidebar.ItemGroup>
<Sidebar.ItemGroup>
<Link to='/dashboard/library'>
<Sidebar.Item
icon={BsBookmarkHeart}
className='text-sm text-stone-800'
>
Library
</Sidebar.Item>
</Link>
<Link to='/settings'>
<Sidebar.Item icon={BsGear} className='text-sm text-stone-800'>
Settings
</Sidebar.Item>
</Link>
<Link to='/dashboard/item/digital' className='w-full mt-2'>
<button className='w-full text-stone-800 text-sm bg-gray-200 rounded-md p-1 flex items-center justify-center'>
New +
</button>
</Link>
</Sidebar.ItemGroup>
</Sidebar.Items>
{!currentUser?.stripeOnboard && !currentUser?.bankAdded && (
<Sidebar.CTA>
<div className='mb-3 flex items-center'>
<Badge color='failure'>Payouts disabled</Badge>
</div>
<div className='mb-3 text-sm text-stone-800 dark:text-gray-400'>
You need to add a payout option in settings before you can submit a
template.
</div>
<Link
className='text-sm text-stone-800 underline hover:text-cyan-800 dark:text-gray-400 dark:hover:text-gray-300'
to='/settings'
>
Settings
</Link>
</Sidebar.CTA>
)}
</Sidebar>
I want to make the icons for each sidebar item smaller and I want to be able to change the color.