npm 包 iconfont-maker-cli 使用教程

阅读时长 4 分钟读完

介绍

iconfont-maker-cli 是一款通过命令行方式快速生成 iconfont 的工具,它支持多种图标格式,包括 SVG、PNG、JPG 等,也支持多种字体格式,包括 TTF、EOT、WOFF、OTF 等。iconfont-maker-cli 已经发布到 npm 上,使用非常方便。

安装

使用 npm 安装 iconfont-maker-cli 最新版本:

使用

命令行工具

安装完成后,我们可以通过以下命令来使用它:

其中 options 包括以下参数:

  • -i, --input:设置输入文件的路径,可以是一个文件或者是一个目录(支持通配符)。
  • -o, --output:设置输出文件的路径,支持导出多种格式,如 ttf、eot、woff、woff2、svg、css、sass、less、stylus 等。
  • -n, --name:设置 font-family 的名称,默认是 iconfont。
  • -s, --style:设置输出的样式格式,支持 css、sass、less、stylus、json 等,默认是 css。
  • -H, --html:生成 html 文件,包括 demo 文件以及字符映射表。
  • -t, --tmpl:设置 demo 的模板文件。
  • -T, --types:设置导出的文件类型,支持所有的字体类型和 css、json、svg。
  • -h, --help:查看帮助信息。
  • -v, --version:查看版本号。

比如以下命令可以生成一个名为 iconfont.ttf 的字体文件和一个名为 iconfont.css 的样式文件:

代码 API

除了命令行工具外,iconfont-maker-cli 还提供了很多常用的 API,我们可以在代码中使用这些 API,构建自己的工具。

这里是一个简单的代码示例,使用 iconfont-maker-cli 读取 SVG 文件,生成字体和样式文件:

-- -------------------- ---- -------
----- ---- - ----------------
----- - -------------- - - ------------------------------

----- -------- --------------------- -
  --- -
    ----- ----- - -------------------- -------- ---------
    ----- ------ - -------------------- --------
    ----- ------- - -
      ----- -----------
      ------ ------- ------- ------ -------
      ------------ ---------
    --
    ----- ------ - ----- --------------------- ------- ---------
    --------------------- -------- ------------
  - ----- ----- -
    -------------------
  -
-

----------------------

总结

iconfont-maker-cli 是一款非常有用的工具,它可以让前端开发者快速生成自己的图标字体,不仅提高了前端页面的美观程度,同时也可以提高页面的性能,减少 HTTP 请求的数量。

在使用 iconfont-maker-cli 的过程中,我们需要注意一些细节,如设置好字体的名称、输出路径、输出格式等,这些都会影响到最终生成的文件。

最后,我们建议尽可能学习使用命令行工具和代码 API,这可以让我们更加灵活自由地使用 iconfont-maker-cli,满足我们更具体的需求,提高自己的前端能力。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600562eb81e8991b448e09ba

纠错
反馈