npm

Need private packages and team management tools?Check out npm Orgs. »

@gitlab/svgs

1.80.0 • Public • Published

Gitlab SVG's

Repository to manage all SVG Assets for GitLab. Creates SVG Sprites out of Icons and optimises SVG based Illustrations.

SVG Online Viewer - http://gitlab-org.gitlab.io/gitlab-svgs/

Requirements

You need to have yarn and 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.

Commands

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 yarn install

  • Export the icons or illustrations you created as SVGs

  • Make sure SVGO Compressor Sketch plugin is installed (it will compress the SVG automatically) or use SVGO to optimize the SVG after you export.

  • 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 file 
    yarn run svg
    # Starts a local server to preview your changes 
    yarn run dev
  • If you are happy with the new/changed SVG, commit and push all changes (including the ones to the dist folder) and create an MR.

  • Assign the merge request to a maintainer of the gitlab-svg project. You can find the maintainers on the GitLab project overview page.

Exporting icons from Sketch

  1. Confirm that your icon is designed at 14px by 14px and is centered within a 16px by 16px artboard.

  2. Make sure your icon has been designed using #000000 as the only fill color.

  3. Double check there are no masks applied to your icon and that you’ve used combined shapes when necessary.

    icon-guidelines-no-masks-combined-shapes

  4. Make sure there is no background color applied to the Artboard.

    icon-guidelines-no-background

  5. 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 brand-, e.g brand-slack.svg.

Preview Application

The application for previewing is based on NUXT and is located in the folder svgpreviewer.

You can run it locally through yarn run dev then it will available under http://localhost:3333/.

With yarn run generate you can generate the static output to the public folder.

Publishing a new version

Every time a file is added, deleted, modified or renamed within the sprite_icons / illustrations folders and the change is merged into master, we automatically publish a new minor version of the package.

Contributing

GitLab is an open source project and we are very happy to accept community contributions. Please refer to CONTRIBUTING.md for details.

Keywords

none

install

npm i @gitlab/svgs

Downloadsweekly downloads

27,773

version

1.80.0

license

MIT

homepage

gitlab.com

repository

Gitgitlab

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability