mdi-spriter

cli tool to create a sprite from Google's material design icons

Note: mdi-spriter depends on material-design-icons (which has lots of stuff) and svg-sprite (which has phantom-js as a dependency) so the install is quite large and may take more time that usually expected for a simple cli app

Why?

You may have an app that only requires a few of the icons from Google's Material icons . But why download them manually and do all that palava? mdis was created to relieve you from the manual steps. You can now just setup a config.json file instead, and then include mdis in your build system so you can get the icons and color you want.

The downside, as noted above, is that mdis depends on some large libraries.

run

run mdis from the command line as follows:

>mdis -c config.json -o sprite

-c points to a config.json (see example below) containing a list of mdi icons you want.

-o can be set either in the config.json or from cli and specifies the output directory for the complied mdi sprite

npm run

You might also include it in your package.json build workflow like that below, which builds on the tips given by Keith Cirkel:

"scripts": {
    "build:dist": "parallelshell 'npm run build:js' 'npm run build:mdis' 'npm run build:styles' 'npm run build:css'",
    "build:mdis": "mdis -c MDISConfig.json",
    "build:styles": "stylus -u nib -u autoprefixer-stylus -w assets/index.styl -o example/index.css",
    "build:js": "browserify -t brfs dev/index.js >  dist/index.browser.js ",
    "build:css": "autoprefixer -b '> 5%' < dev/styles/main.css | cssmin | hashmark -l 8 'dist/main.#.css'"  
}

config example

You can set the destination directory and the temp directory along with the material design icons you want, and the color for each icon. Having multiple colors for the same icon hasn't yet been implemented.

{
  "dest":"assets",
  "mdi": [
    {
      "icon": "menu",
      "size": "24px",
      "fill": "white"
    },
    {
      "icon": "alarm",
      "size": "24px",
      "fill": "blue"
    },
    {
      "icon": "assessment",
      "size": "24px",
      "fill": "#ADD8E6"
    }
  ]
}