Skip to content

Resolve "Better SVG Usage in the Frontend"

Tim Zallmann requested to merge 36231-better-svg-usage-in-the-frontend into master

What does this MR do?

  • It adds an npm task to create a SVG Sprite with npm run svg:
    • takes all files in the /assets/images/sprite_icons folder , optimises them and builds out of it one SVG /assets/icons.svg
    • Creates a HTML Overview in /assets/sprite.symbol.html
    • Optimises all SVG Files in /assets/images/illustrations folder
  • SVG Sprite can be used by either directly writing the svg tag or the new sprite_icon helper function in rails
  • Adds svg4everybody as a Polyfill for older browsers (see below)
  • All Icons were directly provided by UX
  • Replaces the current inlined icons in the project navigation with sprite icons
  • Replaces the icons in the system comments in issues + MR's with sprite icons
  • All SVG Illustrations are not inlined anymore but simply referenced as an img tag
  • New Util Function gl.utils.imagePath to be able to reference images based on server configuration easily
  • Added Usage Documentation under /help/development/fe_guide/icons.md

Are there points in the code the reviewer needs to double check?

  • Its adding https://github.com/jonathantneal/svg4everybody, to polyfill for older IE (mainly to support IE11) + older safari. That will then inline the SVG
  • /assets/sprite.symbol.html is a temporary sprite, will be replaced in a second MR with one in the documentation section.

Screenshots

Before

chrome_2017-09-07_09-16-59

After

chrome_2017-09-07_09-46-41

(You see no difference ? Then it is working)

Illustrations

chrome_2017-09-07_12-17-23

Tested in IE 11

iexplore_2017-09-07_11-06-08

Current Sprite Sheet overview (will be integrated directly into help in another MR / Thats why help.js is there)

chrome_2017-09-08_12-37-28

Why was this MR needed?

  • SVG Sprite Creation
  • SVG Sprite Helper Function
  • Helper Specs
  • SVG Sprite Polyfill
  • Change Illustration SVG's to be simple img tags
  • Project Navigation to be using sprite_icon
  • System Icon using sprite_icon
  • Document Usage

Actual Nice Sprite Creation will be taken over to another MR, also then the replacing bit by bit will be seperate MR's.

Screenshots (if relevant)

Does this MR meet the acceptance criteria?

What are the relevant issue numbers?

Closes #36231 (closed)

Edited by Tim Zallmann

Merge request reports