Recommended tailwind styling?

[silveltman]

First of all, awesome plugin!

I'm like using tailwind but am not sure which way is best to style the icons. Something like below?

---
import { Icon } from 'astro-icon';
---

<style lang="css">
    [astro-icon] {
        @apply text-blue
        /* OR */
        @apply text-blue
    }
    [astro-icon="annotation"] {
        @apply text-red
        /* OR */
        @apply text-red
    }
</style>

<Icon name="adjustment" /> <!-- will be blue -->
<Icon name="annotation" /> <!-- will be red -->

If so, might be useful to take up in the README.

I think it will be a great addition to add a 'class' prop. Would make things a lot easier when using tailwind and protentially cleaner in some cases when using regular styles.

[JulianCataldo]

Hello,

I use it like this, it works for me:

<Icon name="system-uicons:trash" size={'1em'} class="salut" />

👇🏻

<svg viewBox="0 0 21 21" width="1em" height="1em" astro-icon="system-uicons:trash" class="salut astro-M4RLHIZ3">
...
</svg>

[stramel]

It sounds like the documentation of styling the Astro-Icons could be improved to include documentation about the exposed class property.

[zoxon]

Ignore astro-icon styles and use fill

<Icon name="menu" class="fill-blue-500 w-5 h-5" />

or use this styles

[astro-icon] {
  fill: currentColor;
}