Fluentui: Adding support for SVG Fabric icon set

Created on 16 Nov 2017  路  3Comments  路  Source: microsoft/fluentui

I'm sure this may have been a point of discussion before today, but I was wondering it would be possible to include SVG support for the Fabric icon set, rather than just the icon font itself.

There are discrepancies between the way browser handle and render icon fonts. As a resut of this, I see a number of errors and reported bugs across Office products that mention il-aligned icons. This is often a browser-specific or OS-and-browser-combination-specific bug that, combined, translates into hours of dev resources wasted on fixing small problems - which would (hopefully) be avoided with the use of SVG.

Examples of this are existing today if you do a side-by-side comparison of button components from dev.office.com/fabric in Chrome vs Firefox (on Mac OS)

Whilst these discrepancies could be fixed with browser-specific stlying _(who doesn't love a good -moz or -webkit prefix?!)_ there is always this:

screen shot 2017-11-16 at 14 58 52
The SVG box is the size of the SVG.

If support for both was desired, with icon font being the default, maybe it would be possible to include a suffix to the code to introduce SVG icons into the work - something that can be chosen on a workload or component basis:

iconName: 'AddFriend' vs iconName: 'AddFriend-svg'

Deciding how this should be implemented is outside of my remit. It's just some feedback for consideration that I think will free up some dev resources in the long term and add that little extra polish to the finish of the products produced.

:)

Discussion 馃檵

Most helpful comment

+1 for SVG support.

@Jahnp Who is the central icons team? Many of the icons I'm getting from designers now (officeui/) are being output as SVGs a la @ms/oimages-svgs.

All 3 comments

@dzearing @micahgodbolt @joschect Any opinions on how this should be handled / whether we want to use SVG over icon fonts?

Sorry for the delay @mattcoxonline. While we'd like to support this at some point in the future, as far as I know the central icons team does not have plans to support static SVGs for these icons--which means Fabric won't either. So, I'm going to go ahead and close this for now--but happy to revisit if that changes.

+1 for SVG support.

@Jahnp Who is the central icons team? Many of the icons I'm getting from designers now (officeui/) are being output as SVGs a la @ms/oimages-svgs.

Was this page helpful?
0 / 5 - 0 ratings