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%

Changelog

8.0.0

• Update babel to latest version
• Update dependencies
• Add postcss@7
• Drop support node@6.x.x
• Reduce package size