postcss-icon.rosa v1.0.1

postcss-icon.rosa

Icon set data for postcss-icon plugin, based on CSS Icons, a pen by Rosa

Install

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

Input

.custom-selector {
  @icon: rose-power; /* 'rose-' is Prefix , 'power' 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: rose-power;
}`;

postcss(
  postcssIcon({
    "postcss-icon.rosa": {
      prefix: 'rose-' /* 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.airpwn (count icons : 39) result demo
• postcss-icon.stiffi (count icons : 34) result demo
• postcss-icon.joshnh (count icons : 24) result demo

All name icons (count: 78) result demo

alert, backvideo, barchart, battery, bin, browser, calendar, calendarnumber, camera, chart, clipboard, clock, cloud, copy, crop, cross, cup, cursor, desktop, down, downarrow, download, earphones, envelope, envelopeoutline, eye, file, flagsquare, flagtriangle, folder, forwardvideo, hamburger, house, laptop, leftarrow, lightbulb, lock, magnify, magnifyminus, magnifyplus, map, message, microphone, music, pausevideo, pencil, phone, pie, pin, playvideo, plus, power, rain, refresh, rightarrow, signalfull, signalone, signaltwo, speaker, speakermute, stop, stopvideo, tag, tennis, tick, timer, toggle, tree, umberella, unlocked, up, uparrow, upload, user, volumedown, volumeup, warning, wifi