Icons

[fredjens]

How should we handle icons?

Goal: Super easy to use, but flexible styling.

Options:

• Inline seperate SVG's
  pros: only loading the icons beeing used / cons: needs to be done in the template.
• Inline SVG's in hidden div and use href:xlink to load the SVG
  pros: able to set fill: color / cons: all icons are loaded on page load.
• SVG as background image
  pros: not external dependencies, only loads the SVG's beeing used / cons: not able to set fill: color
• Using an icon font
  pros: simple to use, can set color: color / cons: not semantic correct (should probably be avoided)...

Any thoughts/preferences on this?

[elisabethirgens]

Any thoughts/preferences on this?

YES!!! So much. 👉 We should use inline SVG in one form or another.

Might be more work upfront to set up, but I really really really think we should invest it that now for a more future friendly flexible fab solution.

Why not use SVG as background image

Boring… We want to be able to style icons with CSS.

Why not use icon fonts?

It’s a hack. SVG is superior.

• Death to Icon Fonts
• Inline SVG vs Icon Fonts CAGEMATCH
• GitHub: Delivering Octicons with SVG