Impossible to change color of certain icons
t1u1 opened this issue · comments
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.
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!