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 Edit 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.

[ricpastori]

I don’t think Pico should include or maintain a general-purpose icon set in its core stylesheet.

Icon libraries have their own substantial concerns: icon selection, licensing, bundle size, loading strategy, customization and versioning. Icons also have different accessibility requirements depending on whether they are decorative or carry meaning, which cannot be inferred from a CSS class alone.

Pico can document a good inline-SVG pattern and examples using independent tools such as Iconify. Keeping the icon source separate lets users choose the library and delivery method that fit their application.