Resolve "Better SVG Usage in the Frontend"
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
- takes all files in the
- 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
After
(You see no difference ? Then it is working)
Illustrations
Tested in IE 11
Current Sprite Sheet overview (will be integrated directly into help in another MR / Thats why help.js is there)
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?
-
Changelog entry added, if necessary -
Documentation created/updated -
API support added - Tests
-
Added for this feature/bug -
All builds are passing
-
- Review
-
Has been reviewed by UX -
Has been reviewed by Frontend -
Has been reviewed by Backend -
Has been reviewed by Database
-
-
Conform by the merge request performance guides -
Conform by the style guides -
Branch has no merge conflicts with master
(if it does - rebase it please) -
Squashed related commits together
What are the relevant issue numbers?
Closes #36231 (closed)
Edited by Tim Zallmann