We are using SVG Icons in GitLab with a SVG Sprite, due to this the icons are only loaded once and then referenced through an ID. The sprite SVG is located under
/assets/icons.svg. Our goal is to replace one by one all inline SVG Icons (as those currently bloat the HTML) and also all Font Awesome usages.
Usage in HAML/Rails
To use a sprite Icon in HAML or Rails we use a specific helper function :
sprite_icon(icon_name, size: nil, css_class: '')
icon_name Use the icon_name that you can find in the SVG Sprite (Overview is available here`).
size (optional) Use one of the following sizes : 16,24,32,48,72 (this will be translated into a
css_class (optional) If you want to add additional css classes
= sprite_icon('issues', size: 72, css_class: 'icon-danger')
Output from example above
<svg class="s72 icon-danger"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons.svg#issues"></use></svg>
Usage in Vue
We have a special Vue component for our sprite icons in
Sample usage :
name Name of the Icon in the SVG Sprite (Overview is available here`).
size (optional) Number value for the size which is then mapped to a specific CSS class (Available Sizes: 8,12,16,18,24,32,48,72 are mapped to
sXX css classes)
css-classes (optional) Additional CSS Classes to add to the svg tag.
Usage in HTML/JS
Please use the following function inside JS to render an icon :
Adding a new icon to the sprite
All Icons and Illustrations are managed in the gitlab-svgs repository which is added as a dev-dependency.
To upgrade to a new SVG Sprite version run
yarn upgrade @gitlab-org/gitlab-svgs and then run
yarn run svg. This task will copy the svg sprite and all illustrations in the correct folders. The updated files should be tracked in Git as those are referenced.
Please use from now on for any SVG based illustrations simple
img tags to show an illustration by simply using either
image_path helpers. Please use the class
svg-content around it to ensure nice rendering. The illustrations are also organised in the gitlab-svgs repository (as they are then automatically optimised).
= image_tag 'illustrations/merge_requests.svg'