1.1.0 • Published 7 years ago

zent-icon v1.1.0

Weekly downloads
3
License
MIT
Repository
github
Last release
7 years ago

zent-icon

语义化的图标库。

部分图标分为实心和描线两个版本,用-o(字母)来区分,比如shop(实心)和shop-o(描线)。

命名规则:icon名字-[variant(变体)]-[描线与否(o)]

有两种使用方式:

  1. React组件形式:<Icon type="shop" />
  2. CSS形式:<i class="zenticon zenticon-shop"></i>

如果只使用CSS形式,只需要项目中引入zent-icon的样式即可,不需要引入React。

API

参数说明类型默认值备选值
type图标类型string''''
className自定义额外类名string''''

注意:zent-icon不支持自定义prefix,因为icon的class和字体名字有关系的。

开发

zent-icon的大部分文件都是工具生成的,主要依赖以下命令:

  • sketchtool安装请看这里
  • iconfount安装请看这里
  • jq安装: brew install jq

工具生成的文件包括:

  • assets/_zenticon-codes.scss
  • assets/_fontface.scss
  • assets/LICENSE.txt
  • examples/01-grid.js

请不要直接修改这些文件,发布时会被覆盖的!

如果生成的icon font字符和sketch文件有差异,两个办法:

  1. 给对应字符加上correct_contour_direction: true,这个方法只能解决部分图标填充不正确的问题
  2. 如果第一个方法没用,找sketch文件的作者修改图标,一般都可以用不同的画图方式解决。

生成过程

所有脚本都在scripts目录下,都是shell脚本,主要步骤如下:

  1. 从sketch文件中提取所有图标的svg
  2. iconfount从svg文件生成字体文件
  3. 上传字体文件到CDN,并生成对应url的样式文件
  4. 根据iconfount的输出生成示例文件01-grid.js
1.1.0

7 years ago

1.1.0-beta5

7 years ago

1.1.0-beta4

7 years ago

1.1.0-beta1

7 years ago

1.0.12

7 years ago

1.0.11

7 years ago

1.0.10

7 years ago

1.0.9

7 years ago

1.0.8

7 years ago

1.0.8-beta2

7 years ago

1.0.8-beta1

7 years ago

1.0.7

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago