Collecticons V4

[danielfdsilva]

• Ensure the new Collecticons library is ready and deployed.

Release notes below the fold

---

Collecticons Processor v4.0.0 was completely written from the ground up.
It doesn't rely on gulp and its plugins anymore, leveraging the font creation modules directly. This results in a smaller and simpler codebase, easier to maintain and test. Although the functionality is practically the same, some of the commands changed. See the migration guide below.

Changelog

• Remove gulp and gulp related dependencies
• Remove grid command as it is no longer needed with the new collecticons library
• Add programatic api to use compile and bundle commands.
• Remove support for ttf and eot fonts
• Add support fot woff2 font
• Embed the font by default instead of outputting to file
• Rename --no-placeholder to --no-sass-placeholder
• Rename --no-standalone to --no-css-class
• Sass filename no longer prefixed with _. This will have to be explicitely set with --style-name _icons, for example.
• Use Circle CI instead of travis for continuous integration
• Update dependencies
• Improve documentation
• Correctly handle situation when there are no icons in given folder (Unclear error when there are no icons #8)
• Add --experimental-font-on-catalog and --experimental-disable-styles flags.

Migration guide

⚠️Some of the default values changed. Check the README for the new values.⚠️

Default behavior

The previous default behavior ($ collecticons compile source/) included the eot, ttf, and woff and did not embed the fonts.
This can now be achieved with the following (with the exception of eot and ttf support which was dropped).

$ collecticons compile source/ --font-types woff --font-dest collecticons/font/ --style-name _icons

Gulp

Since this new version of Collecticons Processor includes a programatic API, it is no longer required to use a child process when integrating with gulp.

gulp.task('collecticons', function (done) {
  var args = [
    'node_modules/collecticons-processor/bin/collecticons.js',
    'compile',
    'app/assets/icons/collecticons/',
    '--font-embed',
    '--font-dest', 'app/assets/fonts',
    '--font-name', 'Collecticons',
    '--font-types', 'woff',
    '--style-format', 'sass',
    '--style-dest', 'app/assets/styles/core/',
    '--style-name', 'collecticons',
    '--class-name', 'collecticon',
    '--author-name', 'Development Seed',
    '--author-url', 'https://developmentseed.org/',
    '--no-preview'
  ];

  return cp.spawn('node', args, { stdio: 'inherit' })
    .on('close', done);
});

The above code can now be written as:

const { compile } = require('collecticons-processor');
gulp.task('collecticons', function () {
  return compile({
    dirPath: 'app/assets/icons/collecticons/',
    fontName: 'Collecticons',
    // fontTypes is now woff2 which is compatible with modern browsers.
    styleDest: 'app/assets/styles/core/',
    styleName: '_collecticons', // sass no longer prefixed with _
    preview: false
  });
});

Experimental features

The flags --experimental-font-on-catalog and --experimental-disable-styles were added as a first experiment to have collecticons work with styled-components. They are still being tested out and the API is likely to change. Use at your own risk

[danielfdsilva]

Fix #8

[vgeorge]

Tests are passing locally and I could generate a debug bundle successfully. Added some minor changes, mostly fixing typos.

Seems DEVELOPMENT.md isn't linked anywhere, I suggest to delete it as there are testing instructions at the README.