Gulp polimerize css

Gulp plugin that generates an <iron-iconset-svg> given a group of .svg icon files.

Usage

Install it with npm

npm install gulp-polymer-iconset

In your gulpfile.js:

var polymerIconset = require('gulp-polymer-iconset'),
    rename = require('gulp-rename');

gulp.task('styles', function(){
  return gulp.src('app/icons/**/*')
    .pipe(polymerIconset({
        iconSetName: 'my-icons',
        iconSize: 18,
        iconId: function (file) {
            return 'my-icons' + ':' + path.basename(file.path, '.svg');
        },
    }))
    .pipe(gulp.dest('app/iconsets'));
});

It results in:

<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html">

<iron-iconset-svg name="my-icons" size="18">
  <svg>
    <defs>
        
<!-- my-icons:icon-01 -->
<g id="my-icons:icon-01">
  <polygon points="..."/>
  <path d="..."/>
</g>
<!-- my-icons:icon-01 -->

<!-- my-icons:icon-02 -->
<g id="my-icons:icon-02">
  <path d="..."/>
</g>

    </defs>
  </svg>
</iron-iconset-svg>

Options

• iconSetName (String)
• iconSize (String)
• iconId (String|Function): if function, takes the file corresponding to the icon, and should return a String