• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

bcherny/savant: A designer-friendly way to generate icon fonts from a folder of ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

bcherny/savant

开源软件地址:

https://github.com/bcherny/savant

开源编程语言:

JavaScript 87.6%

开源软件介绍:

savant

A designer-friendly way to generate icon fonts from a folder of SVG icons

npm

installation

# with npm:
npm install -g savant

# or, with bower:
bower install savant

usage

Put your SVG icons in a folder, give them dash-cased names, and prefix them with the unicode charcode you want assigned to them.

For example, let's say you have 3 icons in a folder called "src" (0061 is the unicode character for the letter a, 0062 is b, and 0063 is, you guessed it, c):

Run savant -i src -o dist, which generates a dist/ folder for you, containing your new web-friendly icon font:

  • my-font.eot, my-font.svg, my-font.ttf, and my-font.woff is your icon font, in 4 formats for compatibility with every major browser
  • my-font.css and my-font.scss is the stylesheet for your font, in 2 formats depending on how you want to consume it
  • my-font-spec.html is a spec file and my-font-spec.png is a screenshot of it, with every icon in your font neatly laid out for you (hover over an icon to see its CSS class):

CLI usage

savant --in [input_dir] --out [output_dir] --name [font_name] --prefix [prefix]

# eg.
savant --in src/ --out dist/ --name my-font --prefix abc

# basic usage
savant -i src -o dist

in and out are required, while name and prefix are optional

Programmatic usage

savant#compile returns a promise:

#!/usr/bin/env node

require('savant')
.compile({
  input_dir: './src',
  output_dir: './dist'
})
.then(function () {
  console.log('success!')
})
.catch(function (err) {
  console.log('error!', err)
})
.finally(function () {
  console.log('done!')
})

q&a

How does savant know what to name my font?

If you pass a name in via the CLI or programmatic interface, savant will use that. If you run the savant command from a folder that contains a package.json, and that package.json has a name field, savant will fall back to that. Otherwise, savant will fall back to the name of the folder that you ran the savant command from.

How does savant know how to prefix my font's CSS classes?

If you pass a prefix in via the CLI or programmatic interface, savant will use that. Otherwise, savant will compute a prefix based on your font name (eg. "my-awesome-font" will become "maf")

todo

  • tests

based on

https://github.com/bcherny/svg-font-create




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap