SVG Icons

[Justin Obara]

I haven’t heard any disagreement for the use of SVG icons so I’ve created a
JIRA for the task. https://issues.fluidproject.org/browse/FLUID-6142

Thanks
Justin

On February 23, 2017 at 3:41:30 PM, Justin Obara (obara.justin at gmail.com)
wrote:



While working on some updates to the preferences framework, I encountered
the potential need for additional icons. Unfortunately this isn’t a trivial
task in our current setup, so I started exploring SVG icons as an
alternative.

I’ve written up a brief wiki page on some exploration into SVG icons ( Research
SVG Icons <https://wiki.fluidproject.org/display/fluid/Research+SVG+Icons> ),
and created a repo <https://github.com/jobara/svg-icon-spike> with some of
the explorations implemented.

In short, they aren’t a perfect solution yet. However, they may be good
enough to switch off of font icons for. The primary pain point we have with
font icons is around creating and maintaining the fonts. This is simplified
with SVG icons, but comes with some browser support issues. Firefox 51
currently has the best support for making use of external SVGs, but the
“modern” browsers we support all have enough basic support for us to make
use of monochrome SVG icons that can be styled for our contrast themes. The
main outlier is IE 11, which requires a polyfill to properly run. The
recommended polyfill is svg4everybody
<https://github.com/jonathantneal/svg4everybody>  which seems to do the
trick and is less that 2KB minified. However, we’d have to run it on every
page that used an SVG icon.

I propose that we attempt to upgrade Infusion to SVG icons and if all goes
well, to upgrade other sites and repos opportunistically.

For complex SVGs that are used as images, logos, and etc., I suggest we
keep those as image references or inline SVGs if they require contrast
styling.

Please let me know if you have further questions and I’d be interested in
hearing your comments and thoughts.

Thanks
Justin
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20170307/56efe2a4/attachment.html>