natemoo-re / astro-icon

Inline and sprite-based SVGs in Astro made easy!
https://astroicon.dev
Other
990 stars 57 forks source link

Why is fill="currentColor" applied to paths automatically? #226

Open bweis opened 1 week ago

bweis commented 1 week ago

What version of astro-icon are you using?

v1.1

Astro Info

Astro                    v4.10.3
Node                     v22.2.0
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/sitemap
                         @astrojs/tailwind
                         @astrojs/react
                         astro-icon

If this issue only occurs in one browser, which browser is a problem?

Chrome, Safari

Describe the Bug

I would expect that applying something like:

<svg viewBox="0 0 24 24" aria-hidden="true">
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M12 2C6.475 2 2 6.588 2 12.253c0 4.537 2.862 8.369 6.838 9.727.5.09.687-.218.687-.487 0-.243-.013-1.05-.013-1.91C7 20.059 6.35 18.957 6.15 18.38c-.113-.295-.6-1.205-1.025-1.448-.35-.192-.85-.667-.013-.68.788-.012 1.35.744 1.538 1.051.9 1.551 2.338 1.116 2.912.846.088-.666.35-1.115.638-1.371-2.225-.256-4.55-1.14-4.55-5.062 0-1.115.387-2.038 1.025-2.756-.1-.256-.45-1.307.1-2.717 0 0 .837-.269 2.75 1.051.8-.23 1.65-.346 2.5-.346.85 0 1.7.115 2.5.346 1.912-1.333 2.75-1.05 2.75-1.05.55 1.409.2 2.46.1 2.716.637.718 1.025 1.628 1.025 2.756 0 3.934-2.337 4.806-4.562 5.062.362.32.675.936.675 1.897 0 1.371-.013 2.473-.013 2.82 0 .268.188.589.688.486a10.039 10.039 0 0 0 4.932-3.74A10.447 10.447 0 0 0 22 12.253C22 6.588 17.525 2 12 2Z"
  />
</svg>
<Icon
            is:inline
            name="social/github"
            class="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300"

would style the svg appropriately, however the color styles are not applied because somewhere in the processing of the svg the attribute fill="currentColor" was applied to the path. Is there a way to disable this? A workaround is to instead style it with text colors:

<Icon
            is:inline
            name="social/github"
            class="h-6 w-6 text-zinc-500 transition group-hover:text-zinc-600 dark:text-zinc-400 dark:group-hover:text-zinc-300"

However this is not really expected.

What's the expected result?

See above. I would expect the tailwind classes to function as they were written, not for some attributes to be magically applied.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-rex2ee?file=src%2Fpages%2Findex.astro

bweis commented 1 week ago

It appears that this might be done intentionally to standardize the coloring of SVGs via text rather than both stroke and fill.

It's sorta annoying and I'm not sure that I like it.

https://iconify.design/docs/articles/cleaning-up-icons/#palette