postcss-icon.airpwn
v1.0.1postcss-icon.airpwn
Icon set data for postcss-icon plugin, based on css icon set, a pen by airpwn
Install
npm install -D postcss-icon.airpwn postcss-icon
# or
yarn add -D postcss-icon.airpwn postcss-icon
Input
.custom-selector {
@icon: airpwn-heart; /* 'airpwn-' is Prefix , 'heart' 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: airpwn-heart;
}`;
postcss(
postcssIcon({
"postcss-icon.airpwn": {
prefix: 'airpwn-' /* 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.stiffi (count icons : 34) result demo
- postcss-icon.joshnh (count icons : 24) result demo
All name icons (count: 39) result demo
akku
, arrowdown
, arrowleft
, arrowright
, arrowup
, back
, box
, browser
, calendar
, cam
, clock
, cloud
, comment
, doc
, download
, heart
, iphone
, key
, link
, macbook
, mail
, marker
, next
, no
, pause
, phone
, play
, points
, profil
, search
, share
, stop
, stripes
, trash
, upload
, video
, wheels
, yes
, youtube