postcss-icon

postcss-icon

PostCSS plugin that adds css icons from Icon sets

Now you do not need to connect the entire style library for css icons.

Ison sets:

Font icons:

• postcss-icon.material-design (count icons : 932) result demo
• postcss-icon.font-awesome-v4 (count icons : 786) result demo

Css only icons:

• postcss-icon.cssicon (count icons : 192) result demo
• postcss-icon.icono (count icons : 131) result demo
• postcss-icon.rosa (count icons : 78) result demo
• postcss-icon.airpwn (count icons : 39) result demo
• postcss-icon.stiffi (count icons : 34) result demo
• postcss-icon.joshnh (count icons : 24) result demo

Install for postcss

# the plugin
npm install --save-dev postcss-icon

# and the icon set you need
npm install --save-dev postcss-icon.material-design
npm install --save-dev postcss-icon.font-awesome-v4
npm install --save-dev postcss-icon.cssicon
npm install --save-dev postcss-icon.icono
npm install --save-dev postcss-icon.rosa
npm install --save-dev postcss-icon.airpwn
npm install --save-dev postcss-icon.stiffi
npm install --save-dev postcss-icon.joshnh

Input:

.icon.bad-name{
  @icon: 404-not-found-name;
}
.icon{
  color: gold;
  @icon: prefix-name;
}

Output:

@font-face { /*  */ } /* added if you use font icon set */

.icon.bad-name{
  /* @icon: 404-not-found-name */
}
.icon::after{
  content: '';
  /* ... */
}
/* after  before  i  span */
.icon{
  color: #000;
  width: 20px;
  heigth: 20px;
  /* ... */
  color: gold;
}

Usage (more examples)

const { resolve } = require('path');
const postcss     = require('postcss');
const postcssIcon = require('postcss-icon');

const fontSetOptions = {
  inline: ["woff2"],
  path: resolve(__dirname, "./public/assets/fonts/"), // folder to save all font files. Required absolute path!
  formats: ["woff2", "woff" /*, "ttf", "svg", "eot"*/],
  filename: "[css-name]-[set-name].[hash:4].[ext]",
  url({ cssFile, fontName, hash }) { // function help fix url resolve
    // const urlWithQueryHash = `../fonts/${fontName}?v=${hash.substr(0, 5)}`;
    // const exmapleResolveUrl = `../fonts/${fontName}`;
    return fontName;
  }
};
// example for all icon Set
postcss(
  postcssIcon({
    "postcss-icon.material-design": {
      ...fontSetOptions,
      prefix: 'md-'
    },
    "postcss-icon.font-awesome-v4": {
      ...fontSetOptions,
      prefix: 'fa-'
    },
    "postcss-icon.cssicon": { prefix: 'cssicon-' },
    "postcss-icon.icono": { prefix: 'icono-' },
    "postcss-icon.rosa": { prefix: 'rose-' },
    "postcss-icon.airpwn": { prefix: 'airpwn-' },
    "postcss-icon.stiffi": { prefix: 'stiffi-' },
    "postcss-icon.joshnh": { prefix: 'joshnh-' }
  })
);

Options

Formats Support table (2018-1-15):

Type	Support
woff2	78.53%
woff	94.36%
ttf	94.73%
svg	25.36%
eot	3.41%