{"id":13457534,"url":"https://github.com/iconify/iconify","last_synced_at":"2025-05-13T15:02:01.277Z","repository":{"id":38033236,"uuid":"82819844","full_name":"iconify/iconify","owner":"iconify","description":"Universal icon framework. One syntax for FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji and many other open source icon sets (over 150 icon sets and 200k icons). SVG framework, React, Vue and Svelte components!","archived":false,"fork":false,"pushed_at":"2025-04-10T12:58:31.000Z","size":17564,"stargazers_count":5091,"open_issues_count":14,"forks_count":149,"subscribers_count":22,"default_branch":"main","last_synced_at":"2025-04-18T02:46:43.529Z","etag":null,"topics":["emoji","glyph-fonts","icons","svg","svg-framework","vector-icons"],"latest_commit_sha":null,"homepage":"https://iconify.design/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iconify.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"license.txt","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},"funding":{"open_collective":"iconify","github":["cyberalien"]}},"created_at":"2017-02-22T15:23:59.000Z","updated_at":"2025-04-17T09:59:49.000Z","dependencies_parsed_at":"2024-05-10T16:24:59.180Z","dependency_job_id":"f2f1c209-0835-42ec-8b4d-eb83b195b084","html_url":"https://github.com/iconify/iconify","commit_stats":{"total_commits":934,"total_committers":24,"mean_commits":"38.916666666666664","dds":"0.14775160599571735","last_synced_commit":"2274c033b49c01a50dc89b490b89d803d19d95dc"},"previous_names":["simplesvg/simple-svg"],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iconify%2Ficonify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iconify%2Ficonify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iconify%2Ficonify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iconify%2Ficonify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iconify","download_url":"https://codeload.github.com/iconify/iconify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250330403,"owners_count":21412977,"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":["emoji","glyph-fonts","icons","svg","svg-framework","vector-icons"],"created_at":"2024-07-31T09:00:29.094Z","updated_at":"2025-04-22T21:44:05.777Z","avatar_url":"https://github.com/iconify.png","language":"TypeScript","readme":"Iconify is the most versatile icon framework.\n\n-   Unified icon framework that can be used with any icon library.\n-   Out of the box includes 150+ icon sets with more than 200,000 icons.\n-   Embed icons in HTML with Iconify Icon web component or components for front-end frameworks.\n-   Embed icons in designs with plug-ins for Figma, Sketch and Adobe XD.\n-   Add icon search to your applications with Iconify Icon Finder.\n\nFor more information visit [https://iconify.design/](https://iconify.design/).\n\n## Iconify parts\n\nThere are several parts of project, some are in this repository, some are in other repositories.\n\nWhat is included in this repository?\n\n-   Directory `packages` contains main reusable packages: types, utilities, reusable functions used by various components.\n-   Directory `iconify-icon` contains `iconify-icon` web component that renders icons. It also contains wrappers for various frameworks that cannot handle web components.\n-   Directory `components` contains older version of icon components that are native to various frameworks, which do not use web component.\n-   Directory `plugins` contains plugins for various frameworks, which generate icons.\n\nOther repositories you might want to look at:\n\n-   Data for all icons is available in [`iconify/icon-sets`](https://github.com/iconify/icon-sets) repository.\n-   Tools for parsing icons and generating icon sets are available in [`iconify/tools`](https://github.com/iconify/tools) repository.\n\n## Iconify icon components\n\nMain packages in this repository are various icon components.\n\nWhy are those icon components needed? Iconify icon components are not just yet another set of icon components. Unlike other icon components, Iconify icon components do not include icon data. Instead, icon data is loaded on demand from Iconify API.\n\nIconify API provides data for over 200,000 open source icons! API is hosted on publicly available servers, spread out geographically to make sure visitors from all over the world have the fastest possible connection with redundancies in place to make sure it is always online.\n\n#### Why is API needed?\n\nWhen you use an icon font, each visitor loads an entire font, even if your page only uses a few icons. This is a major downside of using icon fonts. That limits developers to one or two fonts or icon sets.\n\nIf you are using typical icon set that is not a font, you still need to bundle all icons used in your application, even ones that visitor does not need.\n\nUnlike icon fonts and components for various icon sets, Iconify icon components dynamically load icon data from Iconify API whenever it is needed.\n\nThis makes it possible to have an unlimited choice of icons!\n\n## Packages in this repository\n\nThere are several types of packages, split in their own directories.\n\n### Main packages\n\nDirectory `packages` contains main packages that are reusable by all other packages in this repository as well as third party components.\n\nMain packages:\n\n-   [Iconify types](./packages/types/) - TypeScript types.\n-   [Iconify utils](./packages/utils/) - common files used by various Iconify projects (including tools, API, etc...).\n-   [Iconify core](./packages/core/) - common files used by icon components and plugins.\n-   [API redundancy](./packages/api-redundancy/) - library for managing redundancies for loading data from API: handling timeouts, rotating hosts. It provides fallback for loading icons if main API host is unreachable.\n\n### Web component\n\nDirectory `iconify-icon` contains `iconify-icon` web component and wrappers for various frameworks.\n\n| Package                                  | Usage      |\n| ---------------------------------------- | ---------- |\n| [Web component](./iconify-icon/icon/)    | Everywhere |\n| [React wrapper](./iconify-icon/react/)   | React      |\n| [SolidJS wrapper](./iconify-icon/solid/) | SolidJS    |\n\nFrameworks that are confirmed to work with web components without custom wrappers:\n\n-   Svelte.\n-   Lit.\n-   Ember.\n-   Vue 2 and Vue 3, but requires custom config when used in Nuxt (see below).\n-   React, but with small differences, such as using `class` instead of `className`. Wrapper fixes it and provides types.\n\n#### Demo\n\nDirectory `iconify-icon-demo` contains demo packages that show usage of `iconify-icon` web component.\n\n-   [React demo](./iconify-icon-demo/react-demo/) - demo using web component with React. Run `npm run dev` to start demo.\n-   [Next.js demo](./iconify-icon-demo/nextjs-demo/) - demo for web component with Next.js. Run `npm run dev` to start demo.\n-   [Svelte demo with Vite](./iconify-icon-demo/svelte-demo/) - demo for web component with Svelte using Vite. Run `npm run dev` to start demo.\n-   [SvelteKit demo](./iconify-icon-demo/sveltekit-demo/) - demo for web component with SvelteKit. Run `npm run dev` to start the demo.\n-   [Vue 3 demo](./iconify-icon-demo/vue-demo/) - demo for web component with Vue 3. Run `npm run dev` to start demo.\n-   [Nuxt 3 demo](./iconify-icon-demo/nuxt3-demo/) - demo for web component with Nuxt 3. Run `npm run dev` to start demo. Requires custom config, see below.\n-   [SolidJS demo](./iconify-icon-demo/solid-demo/) - demo using web component with SolidJS. Run `npm run dev` to start demo.\n\n#### Nuxt 3 usage\n\nWhen using web component with Nuxt 3, you need to tell Nuxt that `iconify-icon` is a custom element. Otherwise it will show few warnings in dev mode.\n\nExample `nuxt.config.ts`:\n\n```ts\nexport default defineNuxtConfig({\n\tvue: {\n\t\tcompilerOptions: {\n\t\t\tisCustomElement: (tag) =\u003e tag === 'iconify-icon',\n\t\t},\n\t},\n});\n```\n\nThis configuration change is not needed when using Vue with `@vitejs/plugin-vue`.\n\n### Iconify icon components\n\nDirectory `components` contains native components for several frameworks:\n\n| Package                                  | Usage  |\n| ---------------------------------------- | ------ |\n| [React component](./components/react/)   | React  |\n| [Vue component](./components/vue/)       | Vue    |\n| [Svelte component](./components/svelte/) | Svelte |\n\n#### Deprecation notice\n\nComponents in directory `components` are slowly phased out in favor of `iconify-icon` web component. Components are still maintained and supported, but it is better to switch to web component.\n\nFunctionality is identical, but web component has some advantages:\n\n-   No framework specific shenanigans. Events and attributes are supported for all frameworks.\n-   Works better with SSR (icon is rendered only in browser, but because icon is contained in shadow DOM, it does not cause hydration problems).\n-   Better interoperability. All parts of applicaiton reuse same web component, even if those parts are written in different frameworks.\n\nDeprecation status:\n\n-   SVG Framework: can be replaced with `iconify-icon`.\n-   React component: can be replaced with `iconify-icon` using `@iconify-icon/react` wrapper.\n-   Svelte component: can be replaced with `iconify-icon`, does not require Svelte specific wrapper.\n-   Vue 3 component: can be replaced with `iconify-icon`, does not require Vue specific wrapper.\n-   Vue 2 component: can be replaced with `iconify-icon`, does not require Vue specific wrapper. Make sure you are not using Webpack older than version 5.\n-   Ember component: can be replaced with `iconify-icon`, does not require Ember specific wrapper.\n\nTo import web component, just import it once in your script, as per [`iconify-icon` README file](./iconify-icon/icon/README.md).\n\n#### Demo\n\nDirectory `components-demo` contains demo packages that show usage of icon components.\n\n-   [React demo](./components-demo/react-demo/) - demo for React component. Run `npm run dev` to start demo.\n-   [Next.js demo](./components-demo/nextjs-demo/) - demo for React component with Next.js. Run `npm run dev` to start demo.\n-   [Vue demo](./components-demo/vue-demo/) - demo for Vue component. Run `npm run dev` to start demo.\n-   [Nuxt demo](./components-demo/nuxt3-demo/) - demo for Vue component with Nuxt. Run `npm run dev` to start demo.\n-   [Svelte demo with Vite](./components-demo/svelte-demo-vite/) - demo for Svelte component using Vite. Run `npm run dev` to start demo.\n-   [SvelteKit demo](./components-demo/sveltekit-demo/) - demo for SvelteKit, using Svelte component on the server and in the browser. Run `npm run dev` to start the demo.\n\n### Plugins\n\nDirectory `plugins` contains plugins.\n\n| Package                                    | Usage        |\n| ------------------------------------------ | ------------ |\n| [Tailwind CSS plugin](./plugins/tailwind/) | Tailwind CSS |\n\n#### Demo\n\nDirectory `plugins-demo` contains demo packages that show usage of plugins.\n\n-   [Tailwind demo](./plugins-demo/tailwind-demo/) - demo for Tailwind CSS plugin. Run `npm run build` to build demo, open `src/index.html` in browser to see result.\n\n## Installation, debugging and contributing\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md).\n\n## Sponsors\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/sponsors/cyberalien\"\u003e\n    \u003cimg src='https://cyberalien.github.io/static/sponsors.svg'/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Documentation\n\nDocumentation for all packages is available on [Iconify documentation website](https://iconify.design/docs/):\n\n-   [Types documentation](https://iconify.design/docs/types/).\n-   [Utilities documentation](https://iconify.design/docs/libraries/utils/).\n-   [Icon components documentation](https://iconify.design/docs/icon-components/).\n-   [Tailwind CSS plugin documentation](https://iconify.design/docs/usage/css/tailwind/).\n\n## Licence\n\nIconify is licensed under MIT license.\n\n`SPDX-License-Identifier: MIT`\n\nSome packages of this monorepo in previous versions were dual-licensed under Apache 2.0 and GPL 2.0 licence, which was messy and confusing. This was later changed to MIT for simplicity.\n\nThis licence does not apply to icons. Icons are released under different licences, see each icon set for details.\nIcons available by default are all licensed under various open-source licences.\n\n© 2020-PRESENT Vjacheslav Trushkin\n","funding_links":["https://opencollective.com/iconify","https://github.com/sponsors/cyberalien"],"categories":["Others","TypeScript","SVG Icon","Vue 相关","Other"],"sub_categories":["Frameworks"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficonify%2Ficonify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ficonify%2Ficonify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficonify%2Ficonify/lists"}