Circles not being filled by currentColor and rendered as none

[pablohaller]

Hey there!

I'm using Firefox right now.

I've been using the local way of showing an icon (creating a file, and then use filename to get it) because I wasn't being able to use animated Icons from Iconify and this was the best workaround.

Now I'm facing a new issue where circles are not being filled, can't see them, and svg fill renders as none.

I'll leave both codes here.

Thanks in advance!

index.astro:

 <li class="text-center flex flex-col items-center">
        <Icon name="linkedin" class="h-10 w-10" />
        <span>LinkedIn</span>
 </li>

linkedin.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="4" cy="4" r="2" fill-opacity="0"><animate fill="freeze" attributeName="fill-opacity" dur="0.4s" values="0;1"/></circle><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="4"><path stroke-dasharray="12" stroke-dashoffset="12" d="M4 10V20"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.2s" values="12;0"/></path><path stroke-dasharray="12" stroke-dashoffset="12" d="M10 10V20"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.5s" dur="0.2s" values="12;0"/></path><path stroke-dasharray="24" stroke-dashoffset="24" d="M10 15C10 12.2386 12.2386 10 15 10C17.7614 10 20 12.2386 20 15V20"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.7s" dur="0.5s" values="24;0"/></path></g></svg>

[FDiskas]

Try replacing actual colors with currentColor and use SVG optimization tool ❤️

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="4" cy="4" r="2" fill="currentColor">
    <animate fill="freeze" attributeName="fill-opacity" dur="0.4s" values="0;1" />
  </circle>
  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="4">
    <path stroke-dasharray="12" stroke-dashoffset="12" d="M4 10v10">
      <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.2s" values="12;0" />
    </path>
    <path stroke-dasharray="12" stroke-dashoffset="12" d="M10 10v10">
      <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.5s" dur="0.2s" values="12;0" />
    </path>
    <path stroke-dasharray="24" stroke-dashoffset="24" d="M10 15a5 5 0 0 1 10 0v5">
      <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.7s" dur="0.5s" values="24;0" />
    </path>
  </g>
</svg>

or svgo node tool it is already available as a dependency in astro-icon

https://github.com/natemoo-re/astro-icon/blob/4c28f275f0b9721203494f3047bda262c706c5ca/packages/core/package.json#L41

yarn svgo --config ./svgo.icons.config.cjs -f ./src/icons -o ./src/icons

[natemoo-re]

fill-opacity="0" will cause your circle to render as fully transparent. That might be your issue.

[natemoo-re]

If you're still having trouble after upgrading to Astro Icon v1 please open a new issue!