style extension lib based on svgtofont.
svgtofont やその他 iconfont generator 系のライブラリから出力されるCSSに対し汎用的な CSS Vars及び mixin を追加するヘルパー
Step 1.
import iconfontHelper from 'iconfont-helper';Step 2.
// 上記に何らかのアイコンフォント生成処理があるとする
// ...
await iconfontHelper({
src: path.resolve(process.cwd(), dist, fontName + '.css'), // 既にビルド済のアイコンフォントのCSS場所
dist: path.resolve(process.cwd(), dist), // ヘルパーCSSの出力先
// 以下はオプション（それぞれデフォルト値）
fontName: "iconfont", // フォント名（font-familyに使用）
fileName: "iconfont-helper", // ヘルパーCSSのファイル名
classNamePrefix: "iconfont", // 変数のプレフィックス
});:root {
--{{prefix}}-{{iconName}}: {{code}}
...
}
@mixin {{fontName}}-base-style {
display: inline-block;
font-family: '{{fontName}}';
font-weight: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}アイコン名、ポジション（before, after）を引数に取り、基本スタイル、@content とともに出力
Step 1.
@import 'path/to/dist/_{{filename}}.css';Step 2.
// e.g.
.foo-style::before {
content: var(--{{prefix}}-arrow);
}Step 1.
@use 'path/to/dist/_{{filename}}.scss';Step 2.
// e.g.
@include icon('arrow');
// or
@include icon('arrow', 'after') {
color: #333;
...
};*Required plugins
yarn add -D postcss postcss-mixins postcss-map-get postcss-simple-varsStep 1.
/* When using postcss-import */
@import 'path/to/dist/_{{filename}}.postcss';Step 2.
/* e.g. */
@mixin icon arrow;
/* or */
@mixin icon arrow, after {
color: #333;
...
};