Icon component

[asbjornu]

I really love Pico CSS and use it in all of my HTML projects these days. The only component I'm finding myself reinventing in every project is an icon component. The latest one I built has become rather versatile and allows for constructions such as these:

<button type="submit" class="icon" data-tooltip="Edit page">
  <span class="edit">Edit page</span>
</button>

<a href="edit-page">
  <span class="icon edit"></span>
  Edit page
</a>

…where, as you can see, the first example leads to the text being suppressed and only an icon showing, while the second example leads to an icon showing to the left of the Next page text.

Is a component like this something that would be interesting for Pico CSS to pick up? I'm mostly using the MIT licensed Ionicons for my projects, which should be a good match for Pico CSS, at least license-wise. I also think the icons integrate well with Pico's visual style.

In my next iteration of the icon component, I'm planning on implementing this SCSS mixin technique to have the icons be colored according to the chosen Pico CSS color theme.

Thoughts?

[ethanpil]

I have discovered https://iconify.design/ and it has been working extremely well as a component with PicoCSS. The only thing I needed to do was use the inline option from iconify when using the component tag to have the icons line up...

[dev-willis]

Another good option is IcoMoon.