one-icon

1.2.3 • Public • Published

one-icon

one-icon 是由阿里数据技术及产品部新能源前端团队开发的辅助 ifont 使用的工具。

npm version npm downloads Gitter

one-icon 提供如下功能:

  1. 自动检测更新并一键生成项目中需要的最新 css、js 代码
  2. 采用了 Iconfont 的 font-class 和 symbol 方案,同时支持单色和多色 icon;
  3. 提供可视化展示界面,一键复制代码。

安装

下载安装 one-icon 工具:

yarn:

yarn global add one-icon

npm:

npm add -g one-icon

安装 one-icon React 组件

yarn:

yarn add one-icon

npm:

npm i -S one-icon

使用

在项目根目录下建立oneicon-config.json文件,配置需要的项目参数:

// 示例代码
{
  "projectList": [
    {
      "id": "11111",  // Iconfont中的项目id列表
      "cssOutputPath": "src/styles/iconfont.scss", // 输出css文件的目录
      "iconCode": "<i class='iconfont icon-{fontName} {extraClasses}'></i>", // 展示界面复制Iconfont的模板,其中{fontName}表示字体类名,{extraClasses}表示样式类名,会自动替换
      "classNameList": ["cssClassName"] // 额外添加的CSS样式类
    },
    {
      "id": "222",
      "jsOutputPath": "src/styles/qbi-svg-icon.js", // 输出js文件的目录
      "svgIconCode": "<svg class='svg-icon {extraClasses}' aria-hidden='true'><use xlink:href='#icon-{fontName}'></use></svg>",  // 展示界面复制SVG的模板
      "svgClassNameList": ["svgClassName"]  // 额外添加的SVG样式类
    },
    ,
    {
      "id": "333",
      "jsOutputPath": "src/styles/fbi-svg-icon.js", // 输出js文件的目录
      "uniqueId": "fbi", // 多项目svg id重合时加上的id
      "svgIconCode": "<svg class='svg-icon {extraClasses}' aria-hidden='true'><use xlink:href='#icon-fbi-{fontName}'></use></svg>",  // 展示界面复制SVG的模板,需要加上uniqueId
      "svgClassNameList": ["svgClassName"]  // 额外添加的SVG样式类
    }
  ]
}

在终端运行icon开启服务,one-icon 将自动生成相关的 css、js 代码到相应的文件夹中。

此时打开 127.0.0.1:3000 可以看到可视化的界面,界面上提供复制代码、自动检测、自动更新的功能。

代码每隔 10 分钟检查一次是否是最新的样式代码,若不是则会自动更新,重新下载样式文件。

常见问题

  • 运行 npm run icon 出错

请仔细阅读报错信息,很有可能是配置出错;请确保你的 projectId 正确,你的路径存在。

  • 服务启动之后,代码并没有自动更新?

由于更新代码需要获取登录授权,而自动打开的授权弹窗可能由于你的浏览器设置而被阻止;此时你需要点击展示页面的【手动更新】按钮进行更新。

  • 我手动更新了,项目中还是没生效?

请确保项目中引入了生成的 css、js 文件,并确认项目中的代码是否需要手动刷新之后才生效。

Readme

Keywords

Package Sidebar

Install

npm i one-icon

Weekly Downloads

0

Version

1.2.3

License

ISC

Unpacked Size

65 kB

Total Files

17

Last publish

Collaborators

  • hzongquan
  • wufenfen92