Icon system using SVG

[ffoodd]

• Get icons from Solaris REST API endpoint
• Run SVGO
• Build SVG sprite
• Generate docs for Solaris:
  • each icon a page, like Bootstrap Icons?
  • a full page list (with search…) like in https://design.orange.com/
• document usage: mention IcoMoon for custom sprite
• find our way for embedded icons (close, alerts, buttons and forms, social networks, carousel, burger…).

There's tons of resources below.

[ffoodd]

And FWIW, the main goal of those inlined SVGs are to totally replace existing icon-font.

I guess inlined SVGs are not the best fit — will need some work, but SVG fragment identifiers are pretty decently supported.

Sara Soueidan wrote a post on 24ways and there's a good post and demo on Broken links.

Also if progressive enhancement is still a thing for Boosted, SVG sprite could be all black by default and enhanced using CSS masks to color it. This is done in sseeeedd, based on Noah Blon's post on CodePen.

[ffoodd]

Another resource: https://ishadeed.com/article/using-svg-icons/

[ffoodd]

Well, that's a pretty good one: Bootstrap released their own icons system :

• Bootstrap icons website
• Bootstrap Icons reposotiry

So I guess it's a good inspiration :D

And maybe should we have a dedicated Solaris Icons repository, based on this one…

[ffoodd]

The Solaris Icon system now has its own REST API endpoint. So I guess we can script something to get those icons, now :)

[ffoodd]

If we keep going with icon-font, Bootstrap Icons (PR #515) went with Fantasticon to generate them.

[philparry]

Interesting issue, which relates to anohter activity GDL is currently working on. We are migrating the solaris icons database into Master Media Digital Assets Management (DAM) platform. This platform is run by brand, and will make diffrent icon file formats more accessible via an API.

I suggest we link this project to this DAM activity - let'sdiscuss during an upcoming sprint planning meeting