grunt-iconpack

Package SVG icons as an SVG sprite.

grunt-iconpack

Package SVG icons as an SVG sprite. Support for webfonts is planned.

Getting Started

This plugin requires Grunt ~0.4.5

If you haven't used Gruntbefore, be sure to check out the Getting Startedguide, as it explains how to create a Gruntfileas 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-iconpack --save-dev

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

grunt.loadNpmTasks('grunt-iconpack');

The "iconpack" task

Overview

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

grunt.initConfig({
  iconpack: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      // Target-specific options and configuration go here.
    },
  },
});

Options

options.loadPaths

Type: ArrayDefault value: false

An array of directory paths in which to search for source files. For each srcpath defined in the normal Grunt files config, load paths are searched (in array order) for matching files. Once a match is found, successive load paths for that srcare skipped.

This makes it easy to combine icon sets without having to write out the paths for each icon individually. The srcproperty can hold an array of filenames, and the loadPathsoption will load preferentially from the first path, then the second, and so on.

When using this option, the srcfiles can contain any normal Grunt globbing patterns which will be expanded under each load path, loadPathsvalues can themselves contain glob patterns.

options.svgPrefix

Type: StringDefault value: ''

Add a prefix to the beginning of <symbol>ids. Useful as a namespace to avoid id attribute collisions. Example value: 'icon-'.

options.removeTitleElement

Type: BooleanDefault value: true

By default, SVG <title>elements are removed. Change this option to falseto keep them.

Other Configuration

In addition to the loadPathsoption, this module allows you to leave off extensions in srcfile paths. If absent, .svgwill automatically be appended.

Usage Examples

Build an SVG sprite from a single set of source files

In this example, the normal Grunt files array is used to build an SVG sprite from a single set of source SVGs.

grunt.initConfig({
  iconpack: {
    basic_example: {
      files: [{
        expand: true,
        cwd: 'assets/icons/src',
        src: [
          'menu.svg',
          'search.svg',
          'chevron-*.svg',
        ],
        dest: 'assets/icons/sprite.svg'
      }]
    }
  },
});

Build an SVG sprite from several SVG sources

In this example, two sets of SVGs from different sources (here, a Bower component and some local files) are combined into one sprite.

The loadPathsoption allows conditional loading of icons from several sets. In this example, if menu.svgis present in both load paths, the one found first (in this case, in assets/icons/src) will be used instead of any menu.svgprovided by the Bower component.

Note that file extensions can be left off for source files; they will be appended automatically if absent.

grunt.initConfig({
  iconpack: {
    using_load_paths: {
      options: {
        loadPaths: [
          'assets/icons/src/**',
          'bower_components/some-icon-set/svg/**'
        ]
      },
      files: [{
        src: [
          'menu',
          'search',
          'chevron-*',
        ],
        dest: 'assets/icons/sprite.svg'
      }]
    }
  },
});

Load icon definitions from an external file

The following example doesn’t demonstrate any unique functionality but it does show what is made possible by features such as the loadPathsoption.

grunt.initConfig({
  iconpack: {
    build_svg_sprite: {
      options: {
        loadPaths: [
          'assets/icons/src/**',
          'bower_components/some-icon-set/svg/**'
        ]
      },
      files: [{
        src: grunt.file.readJSON('assets/icons.json'),
        dest: 'assets/icons/sprite.svg'
      }]
    }
  },
});

icons.jsonmight look like this:

[
  "menu",
  "search",
  "chevron-*"
]

This makes it easy to change which icons will be built into a sprite once loadPathsare defined.

Contributing

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: just run the following command in the project root:

grunt

Release History

(Nothing yet)

HomePage

https://github.com/ry5n/grunt-iconpack

Repository

https://github.com/ry5n/grunt-iconpack


上一篇:grunt-jskeleton
下一篇:grunt-badass

相关推荐

官方社区

扫码加入 JavaScript 社区