Skip to content

Latest commit

 

History

History
225 lines (153 loc) · 3.96 KB

README.zh-CN.md

File metadata and controls

225 lines (153 loc) · 3.96 KB
Raw

postcss-iconfont

基于PostCSS 处理多个SVG文件生成 SVG/TTF/EOT/WOFF/WOFF2 字体图标

npm GitHub license

postcss-iconfont 是基于 gulp-iconfont 进行封装, 在 postcss 或 webpack 的构建环境下，能更方便地把 svg 文件转换为 webfont。

安装

安装依赖 postcss-iconfont:

npm install postcss-iconfont --save-dev

用法

Node

在script中使用 iconfont ：

var postcss = require('postcss');
var iconfont = require('postcss-iconfont');

var options = {
    outputPath: './dist/fonts/'
};

postcss([iconfont(options)])
    .process(css)
    .then(function(result) {
        fs.writeFileSync('./dist/style.css', result.css);
    });

Webpack

在 webpack.config.js 中使用 iconfont ：

Webpack 1.x

postcss: function () {
    return [
        ...
        iconfont({
            outputPath: './dist/fonts/'
        })
        ...
    ];
}

Webpack 2.x

plugins: [
    new webpack.LoaderOptionsPlugin({
        options: {
            ...
            postcss: [
                ...
                iconfont({
                    outputPath: './dist/fonts/'
                })
            ]
        }
    }),
...
]

Options

basePath

根目录位置，通常用于 font-face 中 url 是绝对路径情况

类型: String

默认值: ./

stylesheetPath

样式文件所在的目录路径

类型：String

默认值：process.cwd()

outputPath

生成的字体文件存放目录路径

类型：String

默认值：``

publishPath

字体文件的发布路径

类型：String

默认值：``

formats

生成的字体格式，详细查看 gulp-iconfont 的formats

类型：String

默认值：['svg', 'ttf', 'eot', 'woff']

hooks

回调钩子

类型：Object

默认值：{}

hooks.onUpdateRule

更改CSS规则后触发的回调

类型：function

默认值：null

options.*

gulp-iconfont 的配置也能使用:

  • options.fontName （配置无效，这个值在样式中 font-family 中获取）
  • options.autohint
  • options.fontWeight
  • options.fontStyle
  • options.fixedWidth
  • options.centerHorizontally
  • options.normalize
  • options.fontHeight
  • options.round
  • options.descent
  • options.metadata
  • options.startUnicode
  • options.prependUnicode
  • options.timestamp

制作 SVG 文件

See: https://github.com/nfroidure/gulp-iconfont#preparing-svgs

例子

└┬ demo/
 ├─┬ css/
 │ └─ style.css
 ├── fonts/
 └─┬ svg/
   ├─ arrow-up-left.svg
   └─ arrow-up-right.svg

style.css

// before
@font-face {
  font-family: 'iconfont';
  src: url('./fonts/*.svg');
  font-weight: normal;
  font-style: normal;
}
// after
@font-face {
  font-family: 'iconfont';
  src:  url('fonts/iconfont.eot');
  src:  url('fonts/iconfont.eot#iefix') format('embedded-opentype'),
    url('fonts/iconfont.ttf') format('truetype'),
    url('fonts/iconfont.woff') format('woff'),
    url('fonts/iconfont.svg?#iconfont') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="iconfont-"], [class*=" iconfont-"] {
  font-family: 'iconfont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.iconfont-arrow-up-left:before {
  content: "\EA01";
}
.iconfont-arrow-up-right:before {
  content: "\EA02";
}