{"id":13406493,"url":"https://github.com/bytedance/IconPark","last_synced_at":"2025-03-14T11:30:27.530Z","repository":{"id":37329397,"uuid":"282828123","full_name":"bytedance/IconPark","owner":"bytedance","description":"🍎Transform an SVG icon into multiple themes, and generate React icons，Vue icons，svg icons","archived":false,"fork":false,"pushed_at":"2023-02-24T07:46:02.000Z","size":12916,"stargazers_count":8562,"open_issues_count":738,"forks_count":510,"subscribers_count":57,"default_branch":"master","last_synced_at":"2025-03-13T07:41:39.396Z","etag":null,"topics":["fill","icon","icon-components","icons","multiple-themes","stroke","svg","svg-icon","vue-component","vue-next","vue3"],"latest_commit_sha":null,"homepage":"http://iconpark.bytedance.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bytedance.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.en-US.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-07-27T07:42:16.000Z","updated_at":"2025-03-13T06:04:12.000Z","dependencies_parsed_at":"2024-01-03T02:42:45.926Z","dependency_job_id":null,"html_url":"https://github.com/bytedance/IconPark","commit_stats":{"total_commits":131,"total_committers":16,"mean_commits":8.1875,"dds":"0.48091603053435117","last_synced_commit":"8dc132da4c85671ba6a5962c87aa2bdafbf158e9"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytedance%2FIconPark","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytedance%2FIconPark/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytedance%2FIconPark/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytedance%2FIconPark/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bytedance","download_url":"https://codeload.github.com/bytedance/IconPark/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243569005,"owners_count":20312344,"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":["fill","icon","icon-components","icons","multiple-themes","stroke","svg","svg-icon","vue-component","vue-next","vue3"],"created_at":"2024-07-30T19:02:31.762Z","updated_at":"2025-03-14T11:30:27.509Z","avatar_url":"https://github.com/bytedance.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","15. 字体图标 ( Font Icon )","📦 Legacy \u0026 Inactive Projects","General"],"sub_categories":["13.20 视差滚动(Parallax Scrolling)"],"readme":"# [IconPark](http://iconpark.bytedance.com/official)\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"http://iconpark.bytedance.com/official\"\u003e\n    \u003cimg src=\"https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/logo.svg\" alt=\"IconPark Logo\" width=\"384\" height=\"96\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\nEnglish | [简体中文](README.zh-CN.md)\n\n## Introduction\n\nIconPark gives access to more than 2000 high-quality icons, and introduces an interface for customizing your icons.\nInstead of using various SVG source files to achieve different themes, we implement a technology transforming attributes of a single SVG source file into multiple themes. Besides, we provide cross-platform components, including [`react-icons`](./packages/react/README.md), [`vue-icons`](./packages/vue/README.md) and [`svg-icons`](./packages/vue/README.md).\nSo whether you are a designer or a developer, you can use them in your designs or your projects for free.\n\n\n\u003cimg src=\"https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/icon-dance.gif\"\u003e\u003c/img\u003e\n\n### Packages\n#### Generate Cross-platform Components\n\nFind packages in `packages` folder. NPM packages make it painless to import icon components to your project.\n\n| Name | Github link | NPM link |\n| ------- | --- | --- |\n| React Icons | [React Component](./packages/react/README.md)  | [@icon-park/react](https://www.npmjs.com/package/@icon-park/react) |\n| Vue2 Icons | [Vue Component for old Vue2.0](./packages/vue/README.md) | [@icon-park/vue](https://www.npmjs.com/package/@icon-park/vue) |\n| Vue3 Icons | [Vue Component for Vue3.0](./packages/vue-next/README.md) | [@icon-park/vue-next](https://www.npmjs.com/package/@icon-park/vue-next) |\n| SVG Icons | [Pure SVG String](./packages/svg/README.md)| [@icon-park/svg](https://www.npmjs.com/package/@icon-park/svg) |\n#### Multiple themes\n\nBasic coloring can be done by setting two attributes on the node: fill and stroke. Fill sets the color inside the object while stroke sets the color of the line drawn around the object. By changing this two attributes, you can transform a single SVG icon into different themes, including: `outline`, `filled`, `two-tone`, `multi-color`. Take the icon named `camera` for example:\n\nSource file: ![](https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/camera.svg)\n\nAfter Transforming:\n\n| React icons | Preview | Theme |\n| ---- | --- | --- |\n| ```\u003cCamera theme=\"outline\" size=\"32\" fill=\"#000000\"/\u003e``` | \u003cimg src=\"https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/camera_outline.png\" width=\"100\"\u003e\u003c/img\u003e | Outline theme |\n| ```\u003cCamera theme=\"filled\" size=\"32\" fill=\"#333\"/\u003e``` | \u003cimg src=\"https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/camera_filled.png\" width=\"100\"\u003e\u003c/img\u003e | Filled theme |\n| ```\u003cCamera theme=\"two-tone\" size=\"32\" fill={['#333' ,'#2F88FF']}/\u003e``` | \u003cimg src=\"https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/camera_two-tone.png\" width=\"100\"\u003e\u003c/img\u003e | Two-tone theme |\n| ```\u003cCamera theme=\"multi-color\" size=\"32\" fill={['#333' ,'#2F88FF' ,'#FFF' ,'#43CCF8']}/\u003e``` | \u003cimg src=\"https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/camera_multi-color.png\" width=\"100\"\u003e\u003c/img\u003e | Multi-color theme |\n\n#### Embed IconPark in your project \nIf you need to use additional information such as icon name, author, category, label and creation time, you can use the `icons.json` file located in the root directory of each NPM.\n\n### Website\n#### Customization\nHere is the website of [IconPark](http://iconpark.bytedance.com/official). Each icon is hand-coded within a 48x48 grid, using SVG stroke giving the maximum flexibility on styling. You can adjust the color, size, `stroke-width`, `stroke-linejoin`, `stroke-linecap` and other attributes to meet your needs.\n\n\u003cimg src=\"https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/screenshot.png\" alt=\"Screenshot of customization\"\u003e\u003c/img\u003e\n\n\n#### Convenient Online Tools\n\n\u003e You can use them in Figma, Sketch, Photoshop, PPT, etc.\n\n  - Copy SVG\n  - Copy React Icon Component\n  - Copy Vue Icon Component\n  - Download PNG\n  - Download SVG\n    \n\u003cimg src=\"https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/icon-tool.png\" alt=\"Icon Tools\" width=\"200px\"\u003e\u003c/img\u003e   \n\n### Changelog\n[CHANGELOG.en-US](CHANGELOG.en-US.md) | [CHANGELOG.简体中文](CHANGELOG.zh-CN.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytedance%2FIconPark","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbytedance%2FIconPark","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytedance%2FIconPark/lists"}