Top Pages Feature

Elements
1

The Top Pages component is incredibly handy, but there is one missing feature and that is the ability to either specify colors for an icon, if they are turned on, or at the very least have the icon use the same colors as those set for the title.

The way it is now if you have a dark background and your text is WHITE the icons are shown in BLACK, plus they do not change color when the title changes color.

This seems like a deficiency to me as I cannot see any way around it, other than to ensure the icons being used are the desired color. But that does not get you support for switching the color on hover.

2

An SVG page icon will be set to same colour as the text — so long as your SVG icon is correctly formatted.

If your SVG page icons aren’t being coloured as expected, then you might have some inline styles/attributes on the SVG that is preventing it from being styled correctly in Elements.

Hope that helps :slight_smile:

3

Aloha @ben I believe the SVG is correctly setup it has no color information in it, here is the code.

<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
 <path d="M6.414,3.857L6.417,3.857L6.417,16.602L7.719,15.168C8.206,14.631 9.038,14.591 9.575,15.079C10.111,15.566 10.152,16.398 9.664,16.934L6.075,20.887C6.047,20.918 6.017,20.948 5.986,20.976C5.742,21.198 5.427,21.317 5.103,21.317C4.778,21.317 4.464,21.198 4.22,20.976C4.188,20.948 4.158,20.918 4.13,20.887L0.541,16.934C0.054,16.398 0.094,15.566 0.631,15.079C1.168,14.591 1.999,14.631 2.487,15.168L3.789,16.602L3.789,3.857C3.79,3.134 4.378,2.546 5.101,2.546C5.825,2.546 6.413,3.134 6.414,3.857ZM13.464,5.171C12.739,5.171 12.151,4.583 12.151,3.857C12.151,3.132 12.739,2.544 13.464,2.544L22.347,2.544C23.072,2.544 23.66,3.132 23.66,3.857C23.66,4.583 23.072,5.171 22.347,5.171L13.464,5.171ZM13.464,10.553C12.739,10.553 12.151,9.965 12.151,9.239C12.151,8.514 12.739,7.926 13.464,7.926L22.347,7.926C23.072,7.926 23.66,8.514 23.66,9.239C23.66,9.965 23.072,10.553 22.347,10.553L13.464,10.553ZM13.464,15.935C12.739,15.935 12.151,15.347 12.151,14.621C12.151,13.896 12.739,13.308 13.464,13.308L22.347,13.308C23.072,13.308 23.66,13.896 23.66,14.621C23.66,15.347 23.072,15.935 22.347,15.935L13.464,15.935ZM13.464,21.317C12.739,21.317 12.151,20.729 12.151,20.003C12.151,19.278 12.739,18.69 13.464,18.69L22.347,18.69C23.072,18.69 23.66,19.278 23.66,20.003C23.66,20.729 23.072,21.317 22.347,21.317L13.464,21.317Z"/>
</svg>

If I take this exact same SVG and place it in an SVG component I can fill it with colors no problem, even if I turn off all the optimizations. So something else might be going on.

Does the Top Pages fill or stroke the SVG?

4

The issue with your SVG is that it doesn’t have a fill="currentColor" on it. The Top Pages component is setting only the text-{color} utility — this colour will be used if your SVG includes the fill="currentColor" or stroke="currentColor".

Some more info: Tailwind’s text-* utilities set the colour CSS property, which SVGs only inherit if you set fill="currentColor" on the <svg> element. Without that, the Top Pages component can’t control the icon colour.

So in short: add fill="currentColor" to your <svg> to make text-red-500 and similar classes work.

Try this version of the SVG and let me know if it works:

<svg
  class="w-6 h-6 text-black" 
  viewBox="0 0 24 24" 
  version="1.1" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  xml:space="preserve" 
  fill="currentColor"
  style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
>
  <path d="M6.414,3.857L6.417,3.857L6.417,16.602L7.719,15.168C8.206,14.631 9.038,14.591 9.575,15.079C10.111,15.566 10.152,16.398 9.664,16.934L6.075,20.887C6.047,20.918 6.017,20.948 5.986,20.976C5.742,21.198 5.427,21.317 5.103,21.317C4.778,21.317 4.464,21.198 4.22,20.976C4.188,20.948 4.158,20.918 4.13,20.887L0.541,16.934C0.054,16.398 0.094,15.566 0.631,15.079C1.168,14.591 1.999,14.631 2.487,15.168L3.789,16.602L3.789,3.857C3.79,3.134 4.378,2.546 5.101,2.546C5.825,2.546 6.413,3.134 6.414,3.857ZM13.464,5.171C12.739,5.171 12.151,4.583 12.151,3.857C12.151,3.132 12.739,2.544 13.464,2.544L22.347,2.544C23.072,2.544 23.66,3.132 23.66,3.857C23.66,4.583 23.072,5.171 22.347,5.171L13.464,5.171ZM13.464,10.553C12.739,10.553 12.151,9.965 12.151,9.239C12.151,8.514 12.739,7.926 13.464,7.926L22.347,7.926C23.072,7.926 23.66,8.514 23.66,9.239C23.66,9.965 23.072,10.553 22.347,10.553L13.464,10.553ZM13.464,15.935C12.739,15.935 12.151,15.347 12.151,14.621C12.151,13.896 12.739,13.308 13.464,13.308L22.347,13.308C23.072,13.308 23.66,13.896 23.66,14.621C23.66,15.347 23.072,15.935 22.347,15.935L13.464,15.935ZM13.464,21.317C12.739,21.317 12.151,20.729 12.151,20.003C12.151,19.278 12.739,18.69 13.464,18.69L22.347,18.69C23.072,18.69 23.66,19.278 23.66,20.003C23.66,20.729 23.072,21.317 22.347,21.317L13.464,21.317Z"/>
</svg>
5

Aloha @ben That worked perfectly.

I will modify my SVGs to always set the currentColor going forward. I had done this in the past but ran into a few where the color couldn’t be changed but I’ll try it again.

Thanks for explaining. Could you explain if there is a valid reason to add the classes that you set for width, height, and color?

6

Ah no, those don’t need to be. Accidentally added those in my example!

1 Like