postcss-icon.icono

postcss-icon.icono

Icon set data for postcss-icon plugin, based on Icono

Install

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

Input

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

postcss(
  postcssIcon({
    "postcss-icon.icono": {
      prefix: 'icono-' /* 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.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: 131) result demo

areaChart, asterisk, barChart, blogger, book, bookmark, bookmarkEmpty, calendar, camera, caretDown, caretDownCircle, caretDownSquare, caretLeft, caretLeftCircle, caretLeftSquare, caretRight, caretRightCircle, caretRightSquare, caretUp, caretUpCircle, caretUpSquare, cart, chain, check, checkCircle, clock, codepen, comment, commentEmpty, creditCard, crop, cross, crossCircle, cup, delicious, display, disqus, document, downArrow, dribbble, dropper, exclamation, exclamationCircle, eye, facebook, file, filter, flag, flickr, folder, forbidden, forward, frown, gear, gplus, hamburger, headphone, heart, home, icono, imac, imacBold, image, indent, infinity, instagram, iphone, iphoneBold, keyboard, leftArrow, linkedIn, list, locationArrow, macbook, macbookBold, mail, market, meh, microphone, moon, mouse, music, next, nexus, outdent, paperClip, pause, piano, pieChart, pin, play, plus, plusCircle, power, previous, rename, reset, rewind, rightArrow, rss, ruler, search, share, signIn, signOut, sitemap, sliders, smile, stop, sun, support, sync, tag, terminal, textAlignCenter, textAlignLeft, textAlignRight, tiles, trash, twitter, upArrow, user, video, volume, volumeDecrease, volumeHigh, volumeIncrease, volumeLow, volumeMedium, volumeMute, youtube