postcss-icon.joshnh

Icon set data for postcss-icon plugin, based on joshnh/Pure-CSS-Icons

Install

npm install -D postcss-icon.joshnh postcss-icon
# or
yarn add -D postcss-icon.joshnh postcss-icon

Input

.custom-selector {
  @icon: joshnh-pause; /* 'joshnh-' is Prefix , 'pause' is name Icon*/
  color: gold;
  /* ... your css code */
}

Output

.custom-selector::after{
  content: '';
  /* ... */
}
/* after before i span if needed */
.custom-selector{
  color: #000;
  width: 20px;
  heigth: 20px;
  /* ... */
  color: gold;
  /* ... your css code */
}

Use (more examples)

const     postcss = require('postcss');
const postcssIcon = require('postcss-icon');

const CSS = `
.custom-selector {
  @icon: joshnh-pause;
}`;

postcss(
  postcssIcon({
    "postcss-icon.joshnh": {
      prefix: 'joshnh-' /* required when using multiple Icon data sets */
    },
    "postcss-icon.OtherSetName": { /* Options */ }
  })
).process(CSS).then(({css, messages}) => {
  console.log(css);
  messages
    .filter(i => i.type === "warning")
    .map(e => console.log(e.toString()));
});

Other icon 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

All name icons (count: 24) result demo

add, batEmpty, batFull, calendar, chart, clock, comment, contacts, cross, eject, flag, folder, heart, home, mail, newDoc, next, pause, play, prev, stop, subtract, tick, user