nfroidure/gulp-iconfont

[SAMPLE] Generate css for icons using postCSS

Closed this issue · 1 comments

Hey, uh, it's not properly an issue, but I've managed to easily use postcss to generate a sample css for glyphs:

import postcss from 'postcss';

import fs from 'fs';

export default (glyphs) => {

  let stylesheet = postcss.root();

  glyphs.forEach((glyph) => {

    let rule = postcss.rule({
      selector: `.icon-${glyph.name}`
    });

    let decl = postcss.decl({
      prop: 'content',
      value: `\\${glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase()}`
    });

    stylesheet.append(rule.append(decl));
  });

  fs.writeFileSync('dist/icons.css', stylesheet.toResult().css);
};

It's really easy to implement using gulp for the css glob/dest as well. I saw the example on the repo, and thought to use PostCSS to make it a bit easier. It's also really easy to create a gulp/postcss plugin with it. What do you think?

Feel free to PR the README if you wish to provide a link to such plugin.