Hey, thanks @kaspth! 😊 Yeah, I saw that. It's an inconsistency in the icon sizes that I need to fix in a separate pass across all icons. On the list!
😌 Ahhhh, went through and fixed the icons.
Longer explanation…
I typically use Heroicons, storing them in ERB files. They come with a default Tailwind size class:
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 4H3V18H1V4ZM5 4H17V6H5V4ZM5 9H19V11H5V9ZM5 14H15V16H5V14Z" fill="currentColor"/>
</svg>
But I sometimes need to override that size, which means hard-coding the change for all. So recently on another project, I realized this would be better, using strict locals with defaults:
<%# locals: (size: "size-5", other: "") -%>
<svg viewBox="0 0 20 20" width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg" class="<%= class_names(size, other) %>">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 4H3V18H1V4ZM5 4H17V6H5V4ZM5 9H19V11H5V9ZM5 14H15V16H5V14Z" fill="currentColor"/>
</svg>
Now I can override the size class, plus add other Tailwind classes for color styling, etc. Using a simple icon helper method, I can then call something this in the view:
<%= icon "heroicons/2.1.5/solid/lock-closed", size: "size-5", other: "text-slate-500" %>
Log in to reply to this topic.
Log in