astro-icon icon indicating copy to clipboard operation
astro-icon copied to clipboard

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

Open bweis opened this issue 8 months ago • 1 comments

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 avatar Jun 20 '24 23:06 bweis