postcss-icon

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:

• 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
npm install --save-dev postcss-icon

# and the icon set you need
npm install --save-dev postcss-icon.cssicon postcss-icon.icono postcss-icon.rosa
npm install --save-dev postcss-icon.airpwn postcss-icon.stiffi postcss-icon.joshnh

Input:

.icon.bad-name{
	@icon: 404-not-found-name;
}

.icon{
	color: gold;
	@icon: prefix-name;
}

Output:

.icon.bad-name{
	/* @icon: 404-not-found-name */
}

.icon::after{
	content: '';
	/* ... */
}
/* after  before  i  span */
.icon{
	color: #000;
	width: 20px;
	heigth: 20px;
	/* ... */
	color: gold;
}

Usage

const postcss     = require('postcss');
const postcssIcon = require('postcss-icon');

// postcss(require('postcss-icon')(iconSetDataList))
// exemple all icon Set
postcss(
	postcssIcon(
		{ prefix: 'cssicon-',	data: require('postcss-icon.cssicon') },
		{ prefix: 'icono-',	data: require('postcss-icon.icono') },
		{ prefix: 'rose-',	data: require('postcss-icon.rosa') },
		{ prefix: 'airpwn-',	data: require('postcss-icon.airpwn') },
		{ prefix: 'stiffi-',	data: require('postcss-icon.stiffi') },
		{ prefix: 'joshnh-',	data: require('postcss-icon.joshnh') }
	)
);

// example custom data set
postcss([
	postcssIcon({
		prefix: "custom-",
		data: {
			iconName: [
				".extend {color: gold; /* ... all styles */}",
				".extend::after, .extend::before {position: absolute; /* ... all styles */}",
				".extend i, {color: gold; /* all styles */}"
			],
			pen: [".extend { /* ... */}" /* , ... */]
		}
	})
]);

Work algorithm