{"id":18470818,"url":"https://github.com/nefe/one-icon","last_synced_at":"2025-10-28T12:37:31.301Z","repository":{"id":78553237,"uuid":"167510277","full_name":"nefe/one-icon","owner":"nefe","description":null,"archived":false,"fork":false,"pushed_at":"2020-01-20T08:48:57.000Z","size":61,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-12T12:08:52.962Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nefe.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-25T08:11:09.000Z","updated_at":"2020-05-15T08:36:57.000Z","dependencies_parsed_at":"2023-03-19T11:43:39.274Z","dependency_job_id":null,"html_url":"https://github.com/nefe/one-icon","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nefe/one-icon","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nefe%2Fone-icon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nefe%2Fone-icon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nefe%2Fone-icon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nefe%2Fone-icon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nefe","download_url":"https://codeload.github.com/nefe/one-icon/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nefe%2Fone-icon/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266424025,"owners_count":23926124,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T10:14:56.967Z","updated_at":"2025-10-28T12:37:26.266Z","avatar_url":"https://github.com/nefe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## one-icon\n\none-icon 是由阿里数据技术及产品部新能源前端团队开发的辅助 ifont 使用的工具。\n\n[![npm version](https://badge.fury.io/js/one-icon.png)](https://badge.fury.io/js/one-icon)\n[![npm downloads](https://img.shields.io/npm/dt/one-icon.svg?style=flat-square)](https://www.npmjs.com/package/one-icon)\n[![Gitter](https://badges.gitter.im/jasonHzq/one-icon.svg)](https://gitter.im/jasonHzq/one-icon?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge)\n\none-icon 提供如下功能：\n\n1. 自动检测更新并一键生成项目中需要的最新 css、js 代码\n2. 采用了 Iconfont 的 font-class 和 symbol 方案，同时支持单色和多色 icon；\n3. 提供可视化展示界面，一键复制代码。\n\n### 安装\n\n下载安装 one-icon 工具:\n\nyarn:\n\n```sh\nyarn global add one-icon\n```\n\nnpm:\n\n```sh\nnpm add -g one-icon\n```\n\n安装 one-icon React 组件\n\nyarn:\n\n```sh\nyarn add one-icon\n```\n\nnpm:\n\n```sh\nnpm i -S one-icon\n```\n\n### 使用\n\n在项目根目录下建立`oneicon-config.json`文件，配置需要的项目参数：\n\n```\n// 示例代码\n{\n  \"projectList\": [\n    {\n      \"id\": \"11111\",  // Iconfont中的项目id列表\n      \"cssOutputPath\": \"src/styles/iconfont.scss\", // 输出css文件的目录\n      \"iconCode\": \"\u003ci class='iconfont icon-{fontName} {extraClasses}'\u003e\u003c/i\u003e\", // 展示界面复制Iconfont的模板，其中{fontName}表示字体类名，{extraClasses}表示样式类名，会自动替换\n      \"classNameList\": [\"cssClassName\"] // 额外添加的CSS样式类\n    },\n    {\n      \"id\": \"222\",\n      \"jsOutputPath\": \"src/styles/qbi-svg-icon.js\", // 输出js文件的目录\n      \"svgIconCode\": \"\u003csvg class='svg-icon {extraClasses}' aria-hidden='true'\u003e\u003cuse xlink:href='#icon-{fontName}'\u003e\u003c/use\u003e\u003c/svg\u003e\",  // 展示界面复制SVG的模板\n      \"svgClassNameList\": [\"svgClassName\"]  // 额外添加的SVG样式类\n    },\n    ,\n    {\n      \"id\": \"333\",\n      \"jsOutputPath\": \"src/styles/fbi-svg-icon.js\", // 输出js文件的目录\n      \"uniqueId\": \"fbi\", // 多项目svg id重合时加上的id\n      \"svgIconCode\": \"\u003csvg class='svg-icon {extraClasses}' aria-hidden='true'\u003e\u003cuse xlink:href='#icon-fbi-{fontName}'\u003e\u003c/use\u003e\u003c/svg\u003e\",  // 展示界面复制SVG的模板，需要加上uniqueId\n      \"svgClassNameList\": [\"svgClassName\"]  // 额外添加的SVG样式类\n    }\n  ]\n}\n```\n\n在终端运行`icon`开启服务，one-icon 将自动生成相关的 css、js 代码到相应的文件夹中。\n\n此时打开 127.0.0.1:3000 可以看到可视化的界面，界面上提供复制代码、自动检测、自动更新的功能。\n\n代码每隔 10 分钟检查一次是否是最新的样式代码，若不是则会自动更新，重新下载样式文件。\n\n### 常见问题\n\n- 运行 `npm run icon` 出错\n\n请仔细阅读报错信息，很有可能是配置出错；请确保你的 projectId 正确，你的路径存在。\n\n- 服务启动之后，代码并没有自动更新？\n\n由于更新代码需要获取登录授权，而自动打开的授权弹窗可能由于你的浏览器设置而被阻止；此时你需要点击展示页面的【手动更新】按钮进行更新。\n\n- 我手动更新了，项目中还是没生效？\n\n请确保项目中引入了生成的 css、js 文件，并确认项目中的代码是否需要手动刷新之后才生效。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnefe%2Fone-icon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnefe%2Fone-icon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnefe%2Fone-icon/lists"}