Icon utilities
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
config
gulpfile.js
lib
.eslintrc.json
.gitignore
LICENSE
README.md
package-lock.json
package.json

README.md

Visual Studio icon utilities

A collection of image manipulation gulp tasks for Visual Studio icons.

How to use

Prerequisites

  • Your favorite CLI tool (Windows Command Prompt, PowerShell, Terminal, etc.)
  • Download and install latest Node
    https://nodejs.org/en/
  • Download and install latest Git
    https://git-scm.com/
  • Install Gulp globally
    npm install -g gulp
  1. Clone the repo
    git clone https://devdiv-design.visualstudio.com/DevDiv%20Design/_git/iconutil

  2. Install dependencies
    npm install

  3. Put icon files (*.svg or *.png) you want to process in .\input folder

  4. Check .\config.json and see if you want to change anything

  5. Run a task

Tasks

Clean folder

gulp clean
This task deletes the default output folder output and all contents inside it.

gulp clean-input
This task deletes all contents in the default input folder input.

Group files into folders by name

gulp group-files This task groups loose files with the same basename, then puts them into subfolders.
To use this task, drop loose files in the default input folder input. Sorted folders will still be in the input folder.
Default filename matching and trimming patterns are in .\config.json.

Minify svg

gulp svgmin OR gulp
This task minifies *.svg format files. This is the default task.
Alternative to this GUI - svgo-gui

Compress png

gulp pngmin
This task compresses *.png format files. By default it keeps bit depth and color type.
Options are in .\config.json\pngSpecs.pngminOptions.
Alternative to this GUI - PNGOUTWin

Convert svg to png by scale

gulp svg-to-png-scale
This task converts *.svg to *.png by scale. Default scale is 1 ==> 16x16 at 1x.
Options are in .\config.json\pngSpecs.

Convert svg to png by size

gulp svg-to-png-size
This task converts *.svg to *.png by specified width and height.
Default dimension is 16x16. Options are in .\config.json\pngSpecs.

Hide specified paths in svg

gulp svg-hide-paths
This task hides specified paths in svg by applying CSS rule: display: none;.
Default paths to hide are #outline and #iconFg. Options are in .\config.json\svgPathsToHide.

Invert colors in svg by a formula

gulp svg-invert-colors
This task inverts all colors by inverting the lightness (L in HSL color space).
The formula is: L' = 1 - L. Hue and Saturation are kept.

Convert light theme svgs to dark theme

gulp svg-dark-theme-palette
This task converts light theme *.svg files to dark theme, using a predefined color palette.
The default palette is for Visual Studio and Visual Studio Code. The palette is in .\config.json\vsclientIconPalette.

Make svg grayscale

gulp svg-grayscale
This task makes *.svg files grayscale by changing the saturation (S in HSL color space) to 0. Hue and Lightness are kept.

Render an icon list with given data and template

gulp render-icon-list
This task uses lodash to render a basic list of icons and description. Put the html template _icon-list.html and data file icon-list.json under input folder. The generated html file will be in output folder.

Fluent icon utilities (experimental)

Prerequisites:

  • SVG icons need to be produced using Fluent icon template in Adobe Illustrator.
  • Graphic styles, grouping and opacity styles need to be strictly applied according to production guidelines (TBD).
  • SVG filename needs to follow convention.
  • SVG needs to have <title>Icon{Theme}{IconName}</title> block.
  • Example svg files TBD

Reorganize style block

gulp fluent-clean
This task searches css classes used in svg, then recreate <style> block according to premade definitions in config/svgFluentStyles.json. Generated files will be in output\svgs\clean folder.

Convert light theme icons to dark theme

gulp fluent-light-to-dark
This task swaps light color classes to dark using map defined in config/svgFluentStyles.json. After classes are swapped, the <style> block also gets recreated with dark theme classes. Generated files will be in output\svgs\dark folder.

Convert dark theme icons to light theme

gulp fluent-light-to-dark
Similar to fluent-light-to-dark but the opposite way. Generated files will be in output\svgs\light folder.

Convert dark theme icons to white (for color background)

gulp fluent-dark-to-white
This task replaces all color classes to white class. Shadow classes will be preserved.

Convert svg format icons to xaml

gulp fluent-svg-to-xaml
This task converts svg format icons to xaml format.

Prerequisites:

  • svgs are created with Illustrator template
  • svgs need to have <style> block, not inline style or presentation style