Icon Font Generator 开源项目教程

Icon Font Generator 开源项目教程

icon-font-generatorEasy-to-use, pre-configured cli tool to generate webfont icon kits from a bunch of .svg files项目地址:https://gitcode.com/gh_mirrors/ic/icon-font-generator

1. 项目的目录结构及介绍

Icon Font Generator 项目的目录结构如下：

icon-font-generator/
├── bin/
│   └── icon-font-generator
├── examples/
│   ├── css/
│   │   └── icons.css
│   ├── fonts/
│   │   ├── icons.ttf
│   │   ├── icons.woff
│   │   └── icons.woff2
│   ├── html/
│   │   └── index.html
│   └── svg/
│       ├── icon1.svg
│       └── icon2.svg
├── lib/
│   ├── build.js
│   ├── config.js
│   ├── index.js
│   └── utils.js
├── test/
│   ├── fixtures/
│   │   └── svg/
│   │       ├── icon1.svg
│   │       └── icon2.svg
│   └── test.js
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── package.json
├── README.md
└── yarn.lock

目录结构介绍

• bin/: 包含可执行文件 icon-font-generator。
• examples/: 包含示例文件，展示如何使用生成的图标字体。
  • css/: 生成的 CSS 文件。
  • fonts/: 生成的字体文件。
  • html/: 示例 HTML 文件。
  • svg/: 示例 SVG 图标文件。
• lib/: 包含项目的主要逻辑文件。
  • build.js: 构建逻辑。
  • config.js: 配置逻辑。
  • index.js: 入口文件。
  • utils.js: 工具函数。
• test/: 包含测试文件。
  • fixtures/: 测试用的 SVG 图标文件。
  • test.js: 测试逻辑。
• .babelrc: Babel 配置文件。
• .editorconfig: 编辑器配置文件。
• .eslintrc: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .npmignore: npm 忽略文件配置。
• .travis.yml: Travis CI 配置文件。
• LICENSE: 项目许可证。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。
• yarn.lock: Yarn 锁定文件。

2. 项目的启动文件介绍

项目的启动文件是 bin/icon-font-generator。这是一个可执行文件，用于启动图标字体生成工具。

启动文件内容

#!/usr/bin/env node

'use strict';

const iconFontGenerator = require('../lib');
const argv = require('minimist')(process.argv.slice(2));

iconFontGenerator(argv);

启动文件介绍

• #!/usr/bin/env node: 指定使用 Node.js 执行该文件。
• const iconFontGenerator = require('../lib'): 引入项目的主要逻辑文件。
• const argv = require('minimist')(process.argv.slice(2)): 解析命令行参数。
• iconFontGenerator(argv): 调用主要逻辑函数，传入解析后的参数。

3. 项目的配置文件介绍

项目的配置文件主要是 lib/config.js。该文件负责处理项目的配置逻辑。

配置文件内容

'use strict';

const path = require('path');
const fs = require('fs');
const merge = require('lodash.merge');
const defaultConfig = require('./defaultConfig');

module.exports = function getConfig(options) {
  let config = merge({}, defaultConfig, options);

  if (config.config) {
    const configPath = path.resolve(config.config);
    if (fs.existsSync(configPath)) {
      const userConfig = require(configPath);
      config = merge({}, config, userConfig);
    }
  }

  return config;
};

配置文件介绍

• const path = require('path'): 引入路径处理模块。
• `const fs = require('fs')

icon-font-generatorEasy-to-use, pre-configured cli tool to generate webfont icon kits from a bunch of .svg files项目地址:https://gitcode.com/gh_mirrors/ic/icon-font-generator