Impossible to change color of certain icons

[t1u1]

Consider for example this icon
https://github.com/tailwindlabs/heroicons/blob/01c786b0353c7e51b86bc903a329e81d7578333d/src/20/solid/arrow-top-right-on-square.svg?short_path=f4fb63a

This has a fill set on each path as well as a fill:none on the svg, which makes it impossible to override from outside the element.

See this https://play.tailwindcss.com/OtvqH20Tyb for an example. In the working version, I removed the fill attribute from the SVG and now it is picks up the fill style from the fill-primary class.

[Robin Malfait]

Hey!

This is because you are looking at the src files, the publish icons will use currentColor.

• heroicons package example: https://unpkg.com/heroicons@2.1.3/20/solid/arrow-top-right-on-square.svg
• @heroicons/react package example: https://unpkg.com/browse/@heroicons/react@2.1.3/20/solid/ArrowTopRightOnSquareIcon.js
• @heroicons/vue package example: https://unpkg.com/browse/@heroicons/vue@2.1.3/20/solid/ArrowTopRightOnSquareIcon.js

Even if you copy the SVG directly from the website you should get the correct SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
  <path fill-rule="evenodd" d="M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Z" clip-rule="evenodd" />
  <path fill-rule="evenodd" d="M6.194 12.753a.75.75 0 0 0 1.06.053L16.5 4.44v2.81a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.553l-9.056 8.194a.75.75 0 0 0-.053 1.06Z" clip-rule="evenodd" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="size-5">
  <path fillRule="evenodd" d="M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Z" clipRule="evenodd" />
  <path fillRule="evenodd" d="M6.194 12.753a.75.75 0 0 0 1.06.053L16.5 4.44v2.81a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.553l-9.056 8.194a.75.75 0 0 0-.053 1.06Z" clipRule="evenodd" />
</svg>

Hope this helps!