retyui / Postcss Icon
Licence: mit
PostCSS plugin that adds `css icons` from icon sets
Stars: ✭ 20
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Postcss Icon
Postcss Position
PostCSS plugin that adds shorthand declarations for position attributes
Stars: ✭ 26 (+30%)
Mutual labels: postcss, postcss-plugin
postcss-aspect-ratio
A PostCSS plugin to fix an element's dimensions to an aspect ratio.
Stars: ✭ 38 (+90%)
Mutual labels: postcss, postcss-plugin
postcss-define-function
PostCSS plugin for Sass-like function directive
Stars: ✭ 25 (+25%)
Mutual labels: postcss, postcss-plugin
Postcss Responsive Type
Automagical responsive typography, built on PostCSS
Stars: ✭ 363 (+1715%)
Mutual labels: postcss, postcss-plugin
postcss-clean
PostCss plugin to minify your CSS with clean-css
Stars: ✭ 41 (+105%)
Mutual labels: postcss, postcss-plugin
Postcss Easing Gradients
PostCSS plugin to create smooth linear-gradients that approximate easing functions.
Stars: ✭ 689 (+3345%)
Mutual labels: postcss, postcss-plugin
postcss-windicss
PostCSS integrations for Windi CSS
Stars: ✭ 33 (+65%)
Mutual labels: postcss, postcss-plugin
postcss-momentum-scrolling
PostCSS plugin add 'momentum' style scrolling behavior (-webkit-overflow-scrolling: touch) for elements with overflow (scroll, auto) on iOS
Stars: ✭ 69 (+245%)
Mutual labels: postcss, postcss-plugin
postcss-relaxed-unit
🍮Postcss-relaxed-unit is a postcss plugin for unit tranformation and make write css easier with custom unit.
Stars: ✭ 44 (+120%)
Mutual labels: postcss, postcss-plugin
postcss-lazyimagecss
A PostCSS plugin that generates images's CSS width & height properties automatically.
Stars: ✭ 38 (+90%)
Mutual labels: postcss, postcss-plugin
Postcss Register Custom Props
PostCSS plugin that transforms custom property registration in CSS to JS
Stars: ✭ 20 (+0%)
Mutual labels: postcss, postcss-plugin
postcss-font-pack
PostCSS plugin to simplify font declarations by validating only configured font packs are used and adding fallbacks.
Stars: ✭ 18 (-10%)
Mutual labels: postcss, postcss-plugin
Postcss Banner
PostCSS plugin to add text banner and footer to resulting file
Stars: ✭ 13 (-35%)
Mutual labels: postcss, postcss-plugin
postcss-gtk
Processes GTK+ CSS into browser CSS
Stars: ✭ 23 (+15%)
Mutual labels: postcss, postcss-plugin
postcss-typed-css-classes
PostCSS plugin that generates typed entities from CSS classes for chosen programming language.
Stars: ✭ 12 (-40%)
Mutual labels: postcss, postcss-plugin
postcss-purgecss
PostCSS plugin for purgecss
Stars: ✭ 92 (+360%)
Mutual labels: postcss, postcss-plugin
postcss-prefixwrap
A PostCSS plugin that is used to wrap css styles with a css selector to constrain their affect on parent elements in a page.
Stars: ✭ 54 (+170%)
Mutual labels: postcss, postcss-plugin
postcss-sort-media-queries
PostCSS plugin for combine and sort CSS media queries with mobile first or desktop first methods.
Stars: ✭ 118 (+490%)
Mutual labels: postcss, postcss-plugin
Postcss Sprites
Generate sprites from stylesheets.
Stars: ✭ 402 (+1910%)
Mutual labels: postcss, postcss-plugin
postcss-icon
PostCSS plugin that adds css icons
from Icon sets
Now you do not need to connect the entire style library for css icons.
Ison 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
- postcss-icon.joshnh (count icons : 24) result demo
Install for postcss
# the plugin
yarn add postcss-icon
# and the icon set you need
yarn add postcss-icon.material-design
yarn add postcss-icon.font-awesome-v4
yarn add postcss-icon.cssicon
yarn add postcss-icon.icono
yarn add postcss-icon.rosa
yarn add postcss-icon.airpwn
yarn add postcss-icon.stiffi
yarn add postcss-icon.joshnh
Input:
.icon.bad-name {
@icon: 404-not-found-name;
}
.icon {
color: gold;
@icon: prefix-name;
}
Output:
@font-face {
/* */
} /* added if you use font icon set */
.icon.bad-name {
/* @icon: 404-not-found-name */
}
.icon::after {
content: "";
/* ... */
}
/* after before i span */
.icon {
color: #000;
width: 20px;
heigth: 20px;
/* ... */
color: gold;
}
more examples)
Usage (const { resolve } = require("path");
const postcss = require("postcss");
const postcssIcon = require("postcss-icon");
const fontSetOptions = {
inline: ["woff2"],
path: resolve(__dirname, "./public/assets/fonts/"), // folder to save all font files. Required absolute path!
formats: ["woff2", "woff" /*, "ttf", "svg", "eot"*/],
filename: "[css-name]-[set-name].[hash:4].[ext]",
url({ cssFile, fontName, hash }) {
// function help fix url resolve
// const urlWithQueryHash = `../fonts/${fontName}?v=${hash.substr(0, 5)}`;
// const exmapleResolveUrl = `../fonts/${fontName}`;
return fontName;
}
};
// example for all icon Set
postcss(
postcssIcon({
"postcss-icon.material-design": {
...fontSetOptions,
prefix: "md-"
},
"postcss-icon.font-awesome-v4": {
...fontSetOptions,
prefix: "fa-"
},
"postcss-icon.cssicon": { prefix: "cssicon-" },
"postcss-icon.icono": { prefix: "icono-" },
"postcss-icon.rosa": { prefix: "rose-" },
"postcss-icon.airpwn": { prefix: "airpwn-" },
"postcss-icon.stiffi": { prefix: "stiffi-" },
"postcss-icon.joshnh": { prefix: "joshnh-" }
})
);
Options
Formats Support table (2018-1-15):
Type | Support |
---|---|
woff2 | 87.58% |
woff | 96.09% |
ttf | 96.47% |
svg | 15.75% |
eot | 2.67% |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].