{"id":13418845,"url":"https://github.com/07akioni/xicons","last_synced_at":"2025-04-14T02:58:06.670Z","repository":{"id":36972907,"uuid":"309047031","full_name":"07akioni/xicons","owner":"07akioni","description":"SVG Vue/React components integrated from fluentui-system-icons, ionicons, ant-design-icons, material-design-icons, Font-Awesome, tabler-icons and carbon icons. (Vue3, Vue2, React, SVG)","archived":false,"fork":false,"pushed_at":"2024-12-20T04:03:04.000Z","size":711,"stargazers_count":1367,"open_issues_count":51,"forks_count":58,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-14T02:57:51.631Z","etag":null,"topics":["icons","react","vue"],"latest_commit_sha":null,"homepage":"https://www.xicons.org/","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/07akioni.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.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":"2020-11-01T07:43:51.000Z","updated_at":"2025-04-12T20:08:22.000Z","dependencies_parsed_at":"2025-01-26T14:00:23.279Z","dependency_job_id":"9b0712f3-8d64-41c0-841f-a97880d3427f","html_url":"https://github.com/07akioni/xicons","commit_stats":{"total_commits":150,"total_committers":6,"mean_commits":25.0,"dds":0.07333333333333336,"last_synced_commit":"4c2af83c69028a7294fa0f705e6bd8373a1095b3"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/07akioni%2Fxicons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/07akioni%2Fxicons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/07akioni%2Fxicons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/07akioni%2Fxicons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/07akioni","download_url":"https://codeload.github.com/07akioni/xicons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248813786,"owners_count":21165632,"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","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":["icons","react","vue"],"created_at":"2024-07-30T22:01:07.820Z","updated_at":"2025-04-14T02:58:06.634Z","avatar_url":"https://github.com/07akioni.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","List"],"sub_categories":["Related To NaiveUI"],"readme":"# xicons [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nEnglish · [中文](https://github.com/07akioni/xicons/blob/main/README.zh-CN.md)\n\nInclude `vicons`(vue3), `ricons`(react), `sicons`(svg) \u0026 `v2icons`(vue2).\n\nSVG Vue/React components integrated from [`fluentui-system-icons`](https://github.com/microsoft/fluentui-system-icons), [`ionicons`](https://github.com/ionic-team/ionicons), [`ant-design-icons`](https://github.com/ant-design/ant-design-icons), [`material-design-icons`](https://github.com/google/material-design-icons), [`Font-Awesome`](https://github.com/FortAwesome/Font-Awesome), [`tabler-icons`](https://github.com/tabler/tabler-icons) and [`carbon`](https://github.com/carbon-design-system/carbon/tree/main/packages/icons).\n\nUtil icon component for customizing color \u0026 size is also provided.\n\n## Icons Preview \u0026 Search\n\nhttps://www.xicons.org\n\n## Changelog\n\n- `0.13.0` Fix vue3 icon memory leaking issue.\n\n## Installation\n\n### Icons Installation\n\n```bash\n# Install packages on your demand\n# For react\nnpm i -D @ricons/fluent\nnpm i -D @ricons/ionicons4\nnpm i -D @ricons/ionicons5\nnpm i -D @ricons/antd\nnpm i -D @ricons/material\nnpm i -D @ricons/fa # font awesome\nnpm i -D @ricons/tabler\nnpm i -D @ricons/carbon\n# For vue3\nnpm i -D @vicons/fluent\nnpm i -D @vicons/ionicons4\nnpm i -D @vicons/ionicons5\nnpm i -D @vicons/antd\nnpm i -D @vicons/material\nnpm i -D @vicons/fa # font awesome\nnpm i -D @vicons/tabler\nnpm i -D @vicons/carbon\n# For vue2\nnpm i -D @v2icons/fluent\nnpm i -D @v2icons/ionicons4\nnpm i -D @v2icons/ionicons5\nnpm i -D @v2icons/antd\nnpm i -D @v2icons/material\nnpm i -D @v2icons/fa # font awesome\nnpm i -D @v2icons/tabler\nnpm i -D @v2icons/carbon\n# For SVG file\nnpm i -D @sicons/fluent\nnpm i -D @sicons/ionicons4\nnpm i -D @sicons/ionicons5\nnpm i -D @sicons/antd\nnpm i -D @sicons/material\nnpm i -D @sicons/fa # font awesome\nnpm i -D @sicons/tabler\nnpm i -D @sicons/carbon\n```\n\n### Icon Utils Installation\n\nIcon utils provide a icon wrapper component for customizing color \u0026 size of the inner SVG icon.\n\n```bash\nnpm i -D @ricons/utils  # react\nnpm i -D @vicons/utils  # vue3\nnpm i -D @v2icons/utils # vue2\n```\n\n## Usage\n\n### For Vue3\n\n[vue3 demo](https://codesandbox.io/s/vicons-demo-sfzk9?file=/src/App.vue)\n\n```html\n\u003cscript\u003e\n  import { Money16Regular } from '@vicons/fluent'\n  // or\n  import Money16Regular from '@vicons/fluent/Money16Regular'\n\n  // You can directly use the SVG component\n  // or wrap it in an Icon component from @vicons/utils\n\n  import { Icon } from '@vicons/utils'\n\n  export default {\n    components: {\n      Icon,\n      Money16Regular\n    }\n  }\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cIcon\u003e\n    \u003cMoney16Regular /\u003e\n  \u003c/Icon\u003e\n\u003c/template\u003e\n```\n\n#### Q \u0026 A\n\n- (Vue3) How to create a function that accepts an icon component as input in TypeScript?\n\n```ts\nimport type { Component } from 'vue'\n\nfunction f(iconComponent: Component) {\n  // ...\n}\n```\n\n### For React\n\n[react demo](https://codesandbox.io/s/ricons-demo-05dug?file=/src/App.tsx)\n\n```tsx\nimport { Money16Regular } from '@ricons/fluent'\n// or\nimport Money16Regular from '@ricons/fluent/Money16Regular'\n\n// You can directly use the SVG component\n// or wrap it in an Icon component from @ricons/utils\nimport { Icon } from '@ricons/utils'\n\nfunction App() {\n  return (\n    \u003cIcon\u003e\n      \u003cMoney16Regular /\u003e\n    \u003c/Icon\u003e\n  )\n}\n```\n\n### For Vue2\n\n[vue2 demo](https://codesandbox.io/s/v2icons-demo-xoeme?file=/src/App.vue)\n\n```html\n\u003cscript\u003e\n  import { Money16Regular } from '@v2icons/fluent'\n  // or\n  import Money16Regular from '@v2icons/fluent/Money16Regular'\n\n  // You can directly use the SVG component\n  // or wrap it in an Icon component from @v2icons/utils\n\n  import { Icon } from '@v2icons/utils'\n\n  export default {\n    components: {\n      Icon,\n      Money16Regular\n    }\n  }\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cIcon\u003e\n    \u003cMoney16Regular /\u003e\n  \u003c/Icon\u003e\n\u003c/template\u003e\n```\n\n### For SVG\n\n```html\n\u003cimg src=\"@sicons/fluent/Money16Regular.svg\" /\u003e\n```\n\n## Utils API\n\n### Icon API\n\nAn icon component (in `@vicons/utils`, `@ricons/utils`, `@v2icons/utils`) is provided for customizing color \u0026 size of the inner SVG icon.\n\n| prop  | type               | default | description            |\n| ----- | ------------------ | ------- | ---------------------- |\n| size  | `string \\| number` | -       | Size of the icon.      |\n| color | `string`           | -       | Color of the icon.     |\n| tag   | `string`           | `span`  | Tag to be rendered as. |\n\nFor example:\n\n```tsx\nimport { Icon } from '@ricons/utils' // react\nimport { Icon } from '@vicons/utils' // vue3\nimport { Icon } from '@v2icons/utils' // vue2\n\n// render it\n;\u003cIcon color=\"green\" size=\"48\"\u003e\n  \u003cSomeIcon /\u003e\n\u003c/Icon\u003e\n```\n\n### IconConfigProvider API\n\nIconConfigProvider will affect all the descendant Icons' default prop value.\n\n| prop  | type               | default | description            |\n| ----- | ------------------ | ------- | ---------------------- |\n| size  | `string \\| number` | -       | Size of the icon.      |\n| color | `string`           | -       | Color of the icon.     |\n| tag   | `string`           | `span`  | Tag to be rendered as. |\n\nFor example:\n\n```tsx\nimport { IconConfigProvider, Icon } from '@ricons/utils'  // react\nimport { IconConfigProvider, Icon } from '@vicons/utils'  // vue3\nimport { IconConfigProvider, Icon } from '@v2icons/utils' // vue2\n\n// render it\n;\u003cIconConfigProvider color=\"green\" size=\"48\"\u003e\n  \u003cApp\u003e\n    \u003cIcon\u003e\n      \u003cSomeIcon /\u003e\n    \u003c/Icon\u003e\n  \u003cApp/\u003e\n\u003c/IconConfigProvider\u003e\n```\n\n## Common Issues\n\n### `too many open files`\n\nThis is because the count of opened files exceeds the limit of operation system.\n\nUse `ulimit -n` to check the limit.\n\nYou can only increase the limit or import icons by path:\n\n```js\nimport Money16Regular from '@ricons/fluent/Money16Regular'\n```\n\n## Icon Utils Packages\n\n| package        | version                                                                                                        | description                     |\n| -------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------- |\n| @ricons/utils  | [![npm version](https://badge.fury.io/js/%40ricons%2Futils.svg)](https://badge.fury.io/js/%40ricons%2Futils)   | Util icon components for react. |\n| @vicons/utils  | [![npm version](https://badge.fury.io/js/%40vicons%2Futils.svg)](https://badge.fury.io/js/%40vicons%2Futils)   | Util icon components for vue3.  |\n| @v2icons/utils | [![npm version](https://badge.fury.io/js/%40v2icons%2Futils.svg)](https://badge.fury.io/js/%40v2icons%2Futils) | Util icon components for vue2.  |\n\n## Icon Packages\n\n### Vue3\n\n| package           | version                                                                                                              |\n| ----------------- | -------------------------------------------------------------------------------------------------------------------- |\n| @vicons/fluent    | [![npm version](https://badge.fury.io/js/%40vicons%2Ffluent.svg)](https://badge.fury.io/js/%40vicons%2Ffluent)       |\n| @vicons/ionicons4 | [![npm version](https://badge.fury.io/js/%40vicons%2Fionicons4.svg)](https://badge.fury.io/js/%40vicons%2Fionicons4) |\n| @vicons/ionicons5 | [![npm version](https://badge.fury.io/js/%40vicons%2Fionicons5.svg)](https://badge.fury.io/js/%40vicons%2Fionicons5) |\n| @vicons/antd      | [![npm version](https://badge.fury.io/js/%40vicons%2Fantd.svg)](https://badge.fury.io/js/%40vicons%2Fantd)           |\n| @vicons/material  | [![npm version](https://badge.fury.io/js/%40vicons%2Fmaterial.svg)](https://badge.fury.io/js/%40vicons%2Fmaterial)   |\n| @vicons/fa        | [![npm version](https://badge.fury.io/js/%40vicons%2Ffa.svg)](https://badge.fury.io/js/%40vicons%2Ffa)               |\n| @vicons/tabler    | [![npm version](https://badge.fury.io/js/%40vicons%2Ftabler.svg)](https://badge.fury.io/js/%40vicons%2Ftabler)       |\n| @vicons/carbon    | [![npm version](https://badge.fury.io/js/%40vicons%2Fcarbon.svg)](https://badge.fury.io/js/%40vicons%2Fcarbon)       |\n\n### React\n\n| package           | version                                                                                                              |\n| ----------------- | -------------------------------------------------------------------------------------------------------------------- |\n| @ricons/fluent    | [![npm version](https://badge.fury.io/js/%40ricons%2Ffluent.svg)](https://badge.fury.io/js/%40ricons%2Ffluent)       |\n| @ricons/ionicons4 | [![npm version](https://badge.fury.io/js/%40ricons%2Fionicons4.svg)](https://badge.fury.io/js/%40ricons%2Fionicons4) |\n| @ricons/ionicons5 | [![npm version](https://badge.fury.io/js/%40ricons%2Fionicons5.svg)](https://badge.fury.io/js/%40ricons%2Fionicons5) |\n| @ricons/antd      | [![npm version](https://badge.fury.io/js/%40ricons%2Fantd.svg)](https://badge.fury.io/js/%40ricons%2Fantd)           |\n| @ricons/material  | [![npm version](https://badge.fury.io/js/%40ricons%2Fmaterial.svg)](https://badge.fury.io/js/%40ricons%2Fmaterial)   |\n| @ricons/fa        | [![npm version](https://badge.fury.io/js/%40ricons%2Ffa.svg)](https://badge.fury.io/js/%40ricons%2Ffa)               |\n| @ricons/tabler    | [![npm version](https://badge.fury.io/js/%40ricons%2Ftabler.svg)](https://badge.fury.io/js/%40ricons%2Ftabler)       |\n| @ricons/carbon    | [![npm version](https://badge.fury.io/js/%40ricons%2Fcarbon.svg)](https://badge.fury.io/js/%40ricons%2Fcarbon)       |\n\n### Vue2\n\n| package            | version                                                                                                                |\n| ------------------ | ---------------------------------------------------------------------------------------------------------------------- |\n| @v2icons/fluent    | [![npm version](https://badge.fury.io/js/%40v2icons%2Ffluent.svg)](https://badge.fury.io/js/%40v2icons%2Ffluent)       |\n| @v2icons/ionicons4 | [![npm version](https://badge.fury.io/js/%40v2icons%2Fionicons4.svg)](https://badge.fury.io/js/%40v2icons%2Fionicons4) |\n| @v2icons/ionicons5 | [![npm version](https://badge.fury.io/js/%40v2icons%2Fionicons5.svg)](https://badge.fury.io/js/%40v2icons%2Fionicons5) |\n| @v2icons/antd      | [![npm version](https://badge.fury.io/js/%40v2icons%2Fantd.svg)](https://badge.fury.io/js/%40v2icons%2Fantd)           |\n| @v2icons/material  | [![npm version](https://badge.fury.io/js/%40v2icons%2Fmaterial.svg)](https://badge.fury.io/js/%40v2icons%2Fmaterial)   |\n| @v2icons/fa        | [![npm version](https://badge.fury.io/js/%40v2icons%2Ffa.svg)](https://badge.fury.io/js/%40v2icons%2Ffa)               |\n| @v2icons/tabler    | [![npm version](https://badge.fury.io/js/%40v2icons%2Ftabler.svg)](https://badge.fury.io/js/%40v2icons%2Ftabler)       |\n| @v2icons/carbon    | [![npm version](https://badge.fury.io/js/%40v2icons%2Fcarbon.svg)](https://badge.fury.io/js/%40v2icons%2Fcarbon)       |\n\n### SVG\n\n| package           | version                                                                                                              |\n| ----------------- | -------------------------------------------------------------------------------------------------------------------- |\n| @sicons/fluent    | [![npm version](https://badge.fury.io/js/%40sicons%2Ffluent.svg)](https://badge.fury.io/js/%40sicons%2Ffluent)       |\n| @sicons/ionicons4 | [![npm version](https://badge.fury.io/js/%40sicons%2Fionicons4.svg)](https://badge.fury.io/js/%40sicons%2Fionicons4) |\n| @sicons/ionicons5 | [![npm version](https://badge.fury.io/js/%40sicons%2Fionicons5.svg)](https://badge.fury.io/js/%40sicons%2Fionicons5) |\n| @sicons/antd      | [![npm version](https://badge.fury.io/js/%40sicons%2Fantd.svg)](https://badge.fury.io/js/%40sicons%2Fantd)           |\n| @sicons/material  | [![npm version](https://badge.fury.io/js/%40sicons%2Fmaterial.svg)](https://badge.fury.io/js/%40sicons%2Fmaterial)   |\n| @sicons/fa        | [![npm version](https://badge.fury.io/js/%40sicons%2Ffa.svg)](https://badge.fury.io/js/%40sicons%2Ffa)               |\n| @sicons/tabler    | [![npm version](https://badge.fury.io/js/%40sicons%2Ftabler.svg)](https://badge.fury.io/js/%40sicons%2Ftabler)       |\n| @sicons/carbon    | [![npm version](https://badge.fury.io/js/%40sicons%2Fcarbon.svg)](https://badge.fury.io/js/%40sicons%2Fcarbon)       |\n\n## Credit\n\n| Icon Set                                                                      | License                                                                             |\n| ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |\n| [`ant-design-icons`](https://github.com/ant-design/ant-design-icons)          | [MIT](https://opensource.org/licenses/MIT)                                          |\n| [`fluentui-system-icons`](https://github.com/microsoft/fluentui-system-icons) | [MIT](https://opensource.org/licenses/MIT)                                          |\n| [`Font-Awesome`](https://github.com/FortAwesome/Font-Awesome)                 | [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)                   |\n| [`ionicons`](https://github.com/ionic-team/ionicons)                          | [MIT](https://opensource.org/licenses/MIT)                                          |\n| [`material-design-icons`](https://github.com/google/material-design-icons)    | [Apache 2](https://github.com/google/material-design-icons/blob/master/LICENSE)     |\n| [`tabler-icons`](https://github.com/tabler/tabler-icons)                      | [MIT](https://opensource.org/licenses/MIT)                                          |\n| [`carbon`](https://github.com/carbon-design-system/carbon)                    | [Apache 2](https://github.com/carbon-design-system/carbon/tree/main/packages/icons) |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F07akioni%2Fxicons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F07akioni%2Fxicons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F07akioni%2Fxicons/lists"}