Repository to manage all SVG Assets for GitLab. Creates SVG Sprites out of Icons and optimises SVG based Illustrations.
You need to have
node installed. On a Mac you can install both with
brew install yarn
On first time, or after updating from master, use
yarn install to install the latest dependencies.
yarn run svg - Runs all tasks that are available, if you want to release a new version just run this task
All output is saved to the
dist folder, from where it is also taken from our main applications.
Adding icons or illustrations
Create a new branch in your local copy from
gitlab-svgs. Make sure that you have the latest master first.
Make sure that your dependencies are up to date by running
Export the icons or illustrations you created as SVGs
- Place icons in the
sprite_iconsfolder, see instructions below on how to properly export an icon.
- Place illustrations in the
- Place icons in the
After adding the new svgs, you need to execute the following commands, so that you can verify your changes locally at http://localhost:3333/# This will optimize all illustrations and combine the icons into one fileyarn run svg# Starts a local server to preview your changesyarn run dev
If you are happy with the new/changed SVG, commit and push all changes (including the ones to the
distfolder) and create an MR.
Assign the merge request to a maintainer of the
gitlab-svgproject. You can find the maintainers on the GitLab project overview page.
Exporting icons from Sketch
Confirm that your icon is designed at 14px by 14px and is centered within a 16px by 16px artboard.
Make sure your icon has been designed using
#000000as the only fill color.
Double check there are no masks applied to your icon and that you’ve used combined shapes when necessary.
Make sure there is no background color applied to the Artboard.
Once exported, view the .svg file and make sure you don't see
</mask>or any other fill except for
<path fill="#000">in the file. Otherwise, we cannot change the color of the icon. An exception for this is brand icons for companies or products, which may have specific color requirements. These icons should be named starting with
The application for previewing is based on NUXT and is located in the folder
You can run it locally through
yarn run dev then it will available under
yarn run generate you can generate the static output to the
Publishing a new version
Every time a file is added, deleted, modified or renamed within the
and the change is merged into master, we automatically publish a new minor version of the package.
GitLab is an open source project and we are very happy to accept community contributions. Please refer to CONTRIBUTING.md for details.