iconfont-bot

是什么

iconfont-bot是一个命令行工具。自动下载iconfont.cn的图标，生成React、Vue、jQuery等主流框架的组件，并生成npm包，自动发布到npm。 简化iconfont的使用步骤，提升了开发效率。

特性

• 图标按需加载
• 支持主流的前端UI框架
  • React
  • Vue
  • jQuery
• 自动化
  • 自动登录iconfont
  • 自动下载指定的项目
  • 自动生成对应的npm包
• 使用简单
  • 使用npm管理版本

安装

$ npm install iconfont-bot

运行

命令格式

$ iconfont-bot [options] <project-id>

下面是一个例子，该命令表示使用[email protected]登录iconfont，下载项目id为12345的图标到本地，生成React框架的包。

$ npx iconfont-bot -u [email protected] -p ***** -s xxxxx --package react 12345

也可以直接使用 iconfont.cn 的 cookie 跳过 GitHub 登录：

$ npx iconfont-bot -c "your_egg_sess_cookie_value" --package react 12345

获取 cookie 的方法：在浏览器登录 iconfont.cn 后，从开发者工具 → Application → Cookies 中复制 EGG_SESS_ICONFONT 的值。

命令执行成功后会在run目录下生成对应的包

$ tree run/iconfont-cn-projects/12345/packages -L 1
run/iconfont-cn-projects/12345/packages
├── icons-jquery
├── icons-react
└── icons-svg

3 directories, 0 files

命令参数

project-id是一个必填参数。

选项列表

|选项名称|说明|默认值|描述| |:----|:----|:----|:----| |-c, --cookie|EGG_SESS_ICONFONT cookie|-|直接指定 iconfont.cn 的 cookie，跳过 GitHub 登录。环境变量：EGG_SESS_ICONFONT| |-u, --github-username|GitHub用户名|-|如果没有填写而且没有登录，会提示用户输入用户名。环境变量：GITHUB_LOGIN| |-p, --github-password|GitHub密码|-|如果没有填写而且没有登录，或者密码错误，会提示用户重新输入密码。环境变量: GITHUB_PASSWORD| |-s, --github-otp-secret|Github OTP秘钥|-|如果没有填写或者秘钥错误会提示用户重新输入。环境变量：GITHUB_OTP_SECRET| |-m, --max-login-retries|最大登录重试次数|3|登录失败后的最多重试几次| |-o, --run-dir|输出目录| |框架包的输出目录| |--project-dir|project目录|{projectId}|在RUN_DIR指定project目录| |-d, --package|指定构建的框架包。可选值: ["all", "icons-jquery", "icons-react", "icons-svg"]|all|在RUN_DIR指定project目录| |--npm-package-scope|package scope（可选）|@ic-bot-{projectId}|指定package scope| |--npm-token|发布时必填|@ic-bot-{projectId}|指定npm token| |--headless|puppeteer无头模式|false|登录时，是否显示puppeteer运行的浏览器界面| |--devtools|每打开一个tab，自动打开浏览器的开发者工具|false|puppeteer为每个tab自动打开开发者工具，如果改选项为true，那么--headless选项将字段设置为false|

环境变量

可以通过命令行或者.env文件注入环境变量。下面是支持的环境变量。

|名称|说明| |:----|:----| |EGG_SESS_ICONFONT|iconfont.cn 的 EGG_SESS_ICONFONT cookie（跳过 GitHub 登录）| |GITHUB_LOGIN|GitHub账号| |GITHUB_PASSWORD|GitHub密码| |GITHUB_OTP_SECRET|GitHub otp秘钥| |NPM_TOKEN|NPM token|

使用组件

以React为例。

1. 安装或手动拷贝 icons-react 到项目

npm install @ic-bot-819439/icons-react

2. 仅引入需要的图标（支持 tree-shaking）

// 引入单个
import IconDemo from '@ic-bot-819439/icons-react/IconDemo';
// 引入多个
import { IconDemo, Icon2, Icon3 } from '@ic-bot-819439/icons-react';

export default function() {
  return (
    <IconDemo />
    <Icon2 />
    <Icon3 />
  );
}

3. 使用样式控制图标显示（可选）

/*控制图标尺寸及颜色*/
[data-icon-bot="icon1"] {
  font-size: 40px;
  color: red;
}
/*控制图标旋转*/
[data-icon-bot="icon1"] > svg {
  transform: rotate(90deg);
}
/*让图标像loading转动*/
[data-icon-bot="icon1"] > svg {
  -webkit-animation: loadingCircle 1s infinite linear;
  animation: loadingCircle 1s infinite linear;
}

@-webkit-keyframes loadingCircle {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loadingCircle {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}