postcss-icon.cssicon

Icon set data for postcss-icon plugin, based on cssicon.space

Install

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

Input

.custom-selector {
  @icon: cssicon-close; /* 'cssicon-' is Prefix , 'close' 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: cssicon-close;
}`;
 
postcss(
  postcssIcon({
    "postcss-icon.cssicon": {
      prefix: 'cssicon-' /* 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.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

All name icons (count: 192) result demo

arrow-down, arrow-left, arrow-right, arrow-up, audio, audio-solid, battery, battery-0, battery-1, battery-3, battery-solid, battery-solid-0, battery-solid-1, battery-solid-3, bell, bell-solid, bookmark, bookmark-solid, browser, browser-solid, camera, camera-solid, card, card-solid, center-align, chat, chat-solid, check, clock, clock-h3m30, clock-h3m30-solid, clock-h9m0, clock-h9m0-solid, clock-h9m30, clock-h9m30-solid, clock-solid, close, cloud, cloud-download, cloud-download-solid, cloud-lightning, cloud-raindrop, cloud-solid, cloud-upload, cloud-upload-solid, code, download, edit, edit-solid, export, eye, eye-solid, eye-solid2, eye-solid3, flag, flag-solid, float, float-solid, focus, grin, grin-solid, grin-wink, heart, heart-solid, import, indent, justified, key, key-solid, key2, key2-solid, keyboard, keyboard-solid, laptop, laptop-solid, laugh, laugh-solid, left-align, left-double-quote, left-double-quote-solid, left-single-quote, left-single-quote-solid, link, lock, lock-solid, magnify, magnify-solid, mail, mail-solid, map, menu, minify, minify-solid, minus, mobile, mobile-solid, moon, moon-solid, more, more-solid, more-vertical, more-vertical-solid, mouse, mouse-solid, mustache, mustache-solid, navigate, navigate-solid, no-raindrop, outdent, paperclip, paragraph-direction, pensive, pensive-solid, picture, picture-solid, pilcrow, pilcrow-solid, pin, pin-solid, plus, print, print-solid, profile, profile-solid, rain, raindrop, raindrop-solid, refresh, relieved, relieved-smiley, relieved-smiley-solid, relieved-solid, remove, retweet, right-align, right-double-quote, right-double-quote-solid, right-single-quote, right-single-quote-solid, sad, sad-solid, search, search-solid, shutdown, signal, smile, smile-solid, smiley, smiley-solid, snow, stop, stop-solid, suitcase, suitcase-1, suitcase-2, suitcase-3, sun, sun-brightness, sun-horizon, sun-horizon-solid, sun-raindrop, sun-raindrop-solid, sun-solid, sunrise, sunrise-solid, sunset, sunset-solid, tablet, tablet-solid, tag, tag-solid, target, target-solid, tougue, tougue-solid, trash, trash-solid, tv, tv-solid, unamused, unamused-solid, unlock, unlock-solid, upload, upload2, watch, watch-solid, wink, wink-laugh, wink-smiley, wink-tougue