{"id":19136937,"url":"https://github.com/singcl/iconfont-cn","last_synced_at":"2026-04-19T07:33:39.198Z","repository":{"id":57160428,"uuid":"428548851","full_name":"singcl/iconfont-cn","owner":"singcl","description":"在Vue2.x中使用自定义的iconfont Icon","archived":false,"fork":false,"pushed_at":"2022-02-25T03:29:13.000Z","size":66,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-25T15:29:40.474Z","etag":null,"topics":["icon","iconfont","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/singcl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-11-16T06:52:22.000Z","updated_at":"2021-11-16T07:37:07.000Z","dependencies_parsed_at":"2022-08-26T08:20:20.278Z","dependency_job_id":null,"html_url":"https://github.com/singcl/iconfont-cn","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/singcl/iconfont-cn","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/singcl%2Ficonfont-cn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/singcl%2Ficonfont-cn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/singcl%2Ficonfont-cn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/singcl%2Ficonfont-cn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/singcl","download_url":"https://codeload.github.com/singcl/iconfont-cn/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/singcl%2Ficonfont-cn/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31998938,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","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":["icon","iconfont","vuejs2"],"created_at":"2024-11-09T06:35:55.323Z","updated_at":"2026-04-19T07:33:39.177Z","avatar_url":"https://github.com/singcl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://app.travis-ci.com/singcl/iconfont-cn.svg?branch=master)](https://app.travis-ci.com/singcl/iconfont-cn)\n[![](https://img.shields.io/bundlephobia/min/@singcl/iconfont-cn)](https://www.npmjs.com/package/@singcl/iconfont-cn)\n[![](https://img.shields.io/npm/v/@singcl/iconfont-cn)](https://www.npmjs.com/package/@singcl/iconfont-cn)\n![GitHub package.json dependency version (dev dep on branch)](https://img.shields.io/github/package-json/dependency-version/singcl/iconfont-cn/dev/rollup)\n[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/singcl/iconfont-cn)\n## @singcl/iconfont-cn\n\n在`vue2.x`项目中可以使用自定义的 iconfont 图标库。\n\n### Motivation\n\n业务需要自定义一批 ICON 在多个系统间共用，多个系统有的是 React 开发的，有的时候 Vue 开发的。React 可以直接使用@antd/icons; 而 Vue2.x 的项目大多没有多没有引入 antd UI，基于此，我从[ant-design-vue](https://github.com/vueComponent/ant-design-vue/)单独提取出`createFromIconfontCN`这个功能组件。\n\n### 使用简介\n\n#### 1. 安装\n\n```\nnpm i @singcl/iconfont-cn -S\n```\n\n#### 2. API\n\n| 参数      | 说明                                                                                | 类型                                      | 默认值       |\n| --------- | ----------------------------------------------------------------------------------- | ----------------------------------------- | ------------ |\n| type      | 图标类型。遵循图标的命名规范                                                        | `string`                                  | -            |\n| style     | 设置图标的样式，例如 `fontSize` 和 `color`                                          | `CSSProperties`                           | -            |\n| theme     | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标 `'filled', 'outlined'` | `'filled', 'outlined'`                    | `'outlined'` |\n| spin      | 是否有旋转动画                                                                      | `boolean`                                 | `false`      |\n| rotate    | 图标旋转角度（1.4.0 后新增，IE9 无效）                                              | `number`                                  | -            |\n| component | 控制如何渲染图标，通常是一个渲染根标签为 `svg` 的 Vue 组件，会使 type 属性失效      | `ComponentType\u003cCustomIconComponentProps\u003e` | -            |\n\n#### 3. 使用\n\n```js\nimport Icon from \"@singcl/iconfont-cn\";\n\nconst MyIcon = Icon.createFromIconfontCN({\n  scriptUrl: [\"//at.alicdn.com/t/font_1643719_bh60dvbkfv.js\"],\n});\nVue.component(\"my-icon\", MyIcon);\n```\n\n```jsx\n\u003cmy-icon type=\"iconnew1\" style=\"font-size: 30px\"\u003e\u003c/my-icon\u003e\n```\n\n当然 UMD 模式也是支持的，`examples`中的示例就是浏览器直接使用。\n\n![](https://img.shields.io/github/package-json/v/singcl/iconfont-cn)\n![npm](https://img.shields.io/npm/dw/@singcl/iconfont-cn)\n[![install size](https://packagephobia.com/badge?p=@singcl/iconfont-cn)](https://packagephobia.com/result?p=@singcl/iconfont-cn)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsingcl%2Ficonfont-cn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsingcl%2Ficonfont-cn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsingcl%2Ficonfont-cn/lists"}