Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including grunt-webfont-svg-extractor with all npm packages installed. Try it out:

var gruntWebfontSvgExtractor = require("grunt-webfont-svg-extractor")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

grunt-webfont-svg-extractor v0.0.5

Split webfont SVG into separate SVG files


Split webfont SVG into separate SVG files

This plugins takes a webfont SVG file and it's associated CSS file and generates one SVG file per icon.

Could be used in association with the Webfont plugin to pick some icons from multiple librairies and put them in the same webfont (you can check out an example here.

Getting Started

This plugin requires Grunt.

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-webfont-svg-extractor --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:


The "webfont_extractor" task


The task will take 2 files :

  • glyphicons-halflings-regular.svg
  • bootstrap.css

And generate multiple files :

  • zoom-out.svg
  • zoom-in.svg
  • wrench.svg
  • warning-sign.svg
  • ...


In your project's Gruntfile, add a section named webfont_extractor to the data object passed into grunt.initConfig().

  webfont_svg_extractor: {
    options: {
      fontPath: "test/fixtures/glyphicons-halflings-regular.svg",
      cssPath: "test/fixtures/bootstrap.css",
      outputDir: "tmp/",
      preset: "glyphicon"



Type: String

Path to the original webfont.


Type: String

Path to the associated CSS file.


Type: String

Directory to put the generated SVG files.


Type: String Values: glyphicon or fontawesome or glyphicon_pro or undefined

Which font is is used. If none advanced options must be defined.

Advanced options

Those options are defined when the preset option has been set. You only need to use them if you want to use a font that is not in the presets.


Type: Int Default : 1000

Size of the generated SVG file. Usefull when you have cutom SVG icons that you want to merge in one font file (all font must have the same size).


Type: Regexp

Regexp to limit the list of CSS selectors (webfont-svg-extractor uses the CSS file to match the Unicode Private Use Area characters and find the associated classname) and the part of the classname used to generate the SVG filename.


Type: String Values: width or ascent

Internal usage.


In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History


  • fix glyphicon_pro configuration


  • add glyphicon_pro preset
  • add size option


Copyright (c) 2014 . Licensed under the MIT license.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free