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]

The new escape-svg() function introduced in Bootstrap v4.4.0 improves SVG sanitization for good.

[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]

Another good reference: Github's Octicons v2.