alabo-icon

0.0.2 • Public • Published

iconfount

iconfount是一个离线icon font生成工具,支持从多个svg文件生成一套字体以及对应的样式文件。

NPM

字体文件兼容性

  1. 桌面端浏览器:IE6+, Safari, FF, Chrome
  2. 移动端浏览器:绝大部分系统都没有问题,部分非常老的安卓系统或者某些古董浏览器可能会有问题。不支持Windows Mobile IE9。

安装

ynpm install -g iconfount or yarn global add iconfount.

第三方依赖

这些依赖是可选的,用到特定选项时才需要安装。

  1. ttfautohint: brew install ttfautohint, hintingtrue的时候需要安装
  2. fontforge: 参见安装fontforge, 图标correct_contour_directiontrue时需要安装

使用

CLI

Usage: iconfount --config file [options]

Options:
  --help        print this message and exit  [boolean]
  -c, --config  config file to read  [required]
  -t, --test    test configuration and exit  [boolean]

API

iconfount(config): buildConfig

  • config - config file to read [required]
  • buildConfig - full config for generate, include svg infos [promise]
const iconfount = require('iconfount')

iconfount('file')

输出文件

├── LICENSE.txt                       版权信息
├── README.txt                        说明文件
├── codes.json                        字符的详细定义,可用于外部工具生成样式代码
├── config.json                       调试用,请忽略
├── css
│   ├── animation.css                 调试用,动画
│   ├── zenticons-codes.css           只包含字符codepoint的css文件
│   ├── zenticons-embedded.css        区别在于WOFF内联了,规避CORS时有用
│   ├── zenticons-ie7-codes.css       IE7专用
│   ├── zenticons-ie7.css             IE7专用
│   └── zenticons.css                 完整的样式,包括font-face以及各个字符的样式
├── demo.html                         预览文件
└── font
    ├── zenticons-db0a845be8.eot      IE专用
    ├── zenticons-db0a845be8.svg      老的Safari专用
    ├── zenticons-db0a845be8.ttf
    ├── zenticons-db0a845be8.woff
    └── zenticons-db0a845be8.woff2

css目录下已经提供了两种样式选择:完整的和只包含字符定义的css。如果仍不能满足需求,可以使用codes.json 文件自己生成样式。

示例

sample目录下提供了一个示例配置。

配置文件

支持json或者js文件,js文件的话直接export一个包含配置信息的对象。

sample/目录下有一个示例配置文件,仅供参考。

doc/目录下有一些文档,对详细理解一些配置有帮助。

参数

name

type: string

required: false

default: 'iconfount'

字体名字,最好英文吧

output

type: string

required: true

输出字体、样式以及示例文件的目录,可以是相对路径或者绝对路径

hinting

type: boolean

required: false

default: false

是否使用ttfautohint对字体文件做hint,需要安装ttfautohint。 建议开启。

units_per_em

type: number

required: false

default: 1000

简单理解为单个svg图标的画板大小,detail 不清楚的话不要设置。

ascent

type: number

required: false

default: 850

从baseline到最高字符顶部的高度, detail 不清楚的话不要设置。

weight

type: number

required: false

default: 400

字体的粗细,和font-weight属性一致

start_codepoint

type: number

required: false

default: 59392, 即0xE800

最小0xE000(57344),最大0xF8FF(63743),这个区间是 Unicode的Private Use Area, 虽然planes 15 and 16也是Private Use Areas,但是我们不支持这两个区间。

glyphs_dir

type: string

required: true

存放svg文件的根目录,如果是相对路径,必须是相对当前配置文件的路径

glyphs

type: Array.<Glyph>

required: true

所有图标的定义,每个图标有如下几个属性.

glyphs.keywords

type: Array.<string>

required: false

default: []

图标的一些tag,主要是描述图标的作用.

glyphs.src

type: string

required: true

图标相对glyphs_dir的路径。

glyphs.css

type: string

required: true

图标的CSS名字,图标最终的class是${meta.css_prefix_text}${css},如果meta.css_use_suffixtrue,图标最终的class是${css}${meta.css_prefix_text}

glyphs.correct_contour_direction

type: boolean

required: false

default: false

是否使用fontforge对字符做轮廓方向修正,需要安装fontforge。 视情况开启,如果生成的字符填充位置不正常,再考虑开启。不过做好是让设计修改原图的路径方向,具体请看 doc/contour-direction.md

meta

type: Object

required: false

一些元数据

meta.author

type: string

required: false

default: ''

字体的作者

meta.license

type: string

required: false

default: ''

字体的许可协议

meta.license_url

type: string

required: false

default: ''

字体许可协议链接

meta.homepage

type: string

required: false

default: ''

字体主页

meta.css_prefix_text

type: boolean

required: false

default: 'icon-'

图标css前缀。

meta.css_use_suffix

type: boolean

required: false

default: false

如果为true, meta.css_prefix_text将被用作css后缀。

meta.columns

type: number

required: false

default: 4

示例页面中每行的列数。

meta.filename_hash

type: boolean

required: false

default: true

是否在文件名中加入随机字符串,确保每次生成的文件名都不同。

License

iconfount's code (all files) is distributed under MIT license. See LICENSE file for details.

Many thanks to the fontello project.

Dependencies (16)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i alabo-icon

    Weekly Downloads

    0

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    1.29 MB

    Total Files

    48

    Last publish

    Collaborators

    • sampsong