mirror of
https://github.com/iconify/iconify.git
synced 2024-12-05 02:33:16 +00:00
Update readme
This commit is contained in:
Vjacheslav Trushkin
parent
915d747d02
commit
91ce04031b
59
README.md
59
README.md
@ -3,7 +3,7 @@
|
||||
Iconify is the most versatile icon framework.
|
||||
|
||||
- Unified icon framework that can be used with any icon library.
|
||||
- Out of the box includes 80+ icon sets with more than 70,000 icons.
|
||||
- Out of the box includes 100+ icon sets with more than 100,000 icons.
|
||||
- Embed icons in HTML with SVG framework or components for front-end frameworks.
|
||||
- Embed icons in designs with plug-ins for Figma, Sketch and Adobe XD.
|
||||
- Add icon search to your applications with Iconify Icon Finder.
|
||||
@ -18,60 +18,49 @@ This repository contains the new version, completely rewritten using modern deve
|
||||
|
||||
## Iconify monorepo
|
||||
|
||||
This repository is a big monorepo that contains several implementations of Iconify icon framework.
|
||||
This repository is a big monorepo that contains several icon components for various frameworks and several packages that are reused by all those components.
|
||||
|
||||
There are two types of Iconify implementations:
|
||||
## Iconify icon components
|
||||
|
||||
- Implementations that rely on icon packages.
|
||||
- Implementations that rely on Iconify API.
|
||||
Iconify icon components are not just yet another set of icon components. Unlike other icon components, Iconify icon components do not include icon data. They load icon data on demand from Iconify API.
|
||||
|
||||
### Implementations: without API
|
||||
|
||||
These Iconify implementations require the developer to provide icon data and expect that icon data to be included in the bundle.
|
||||
|
||||
Examples: Iconify for React, Iconify for Vue.
|
||||
|
||||
They are easy to use and do not require an internet connection to work, similar to other React/Vue components.
|
||||
|
||||
### Implementations: with API
|
||||
|
||||
Iconify is designed to be easy to use. One of the main features is the Iconify API.
|
||||
|
||||
Iconify API provides data for over 70,000 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.
|
||||
Iconify API provides data for over 100,000 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.
|
||||
|
||||
#### Why is API needed?
|
||||
|
||||
When 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.
|
||||
|
||||
Unlike icon fonts, Iconify implementations that use API do not load the entire icon set. Iconify only loads icons that are used on the current page.
|
||||
If 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.
|
||||
|
||||
Unlike icon fonts and components for various icon sets, Iconify icon components dynamically load icon data from Iconify API whenever it is needed.
|
||||
|
||||
This makes it possible to have an unlimited choice of icons!
|
||||
|
||||
Iconify API provides icon data to Iconify SVG framework and other implementations that rely on Iconify API.
|
||||
|
||||
## Available packages
|
||||
|
||||
There are several Iconify implementations included in this repository:
|
||||
There are several Iconify components included in this repository:
|
||||
|
||||
| Implementation | Usage | with API | without API |
|
||||
| -------------------------------------- | ------------- | :------: | :---------: |
|
||||
| [SVG Framework](./packages/iconify/) | HTML | + | + |
|
||||
| [React component](./packages/react/) | React | + | + |
|
||||
| [Vue 3 component](./packages/vue/) | Vue 3 | + | + |
|
||||
| [Vue 2 component](./packages/vue2/) | Vue 2 | + | + |
|
||||
| [Svelte component](./packages/svelte/) | Svelte/Sapper | + | + |
|
||||
| Implementation | Usage |
|
||||
| -------------------------------------- | ------------------------- |
|
||||
| [SVG Framework](./packages/iconify/) | HTML |
|
||||
| [React component](./packages/react/) | React, Next.js |
|
||||
| [Vue 3 component](./packages/vue/) | Vue 3 |
|
||||
| [Vue 2 component](./packages/vue2/) | Vue 2 |
|
||||
| [Svelte component](./packages/svelte/) | Svelte, SvelteKit, Sapper |
|
||||
| [Ember component](./packages/ember/) | Ember |
|
||||
|
||||
Other packages:
|
||||
|
||||
- [Iconify types](./packages/types/) - TypeScript types used by various implementations.
|
||||
- [Iconify types](./packages/types/) - TypeScript types.
|
||||
- [Iconify utils](./packages/utils/) - common files used by various Iconify projects (including tools, API, etc...).
|
||||
- [Iconify core](./packages/core/) - common files used by various implementations (code specific to components and SVG framework).
|
||||
- [Iconify core](./packages/core/) - common files used by various components.
|
||||
- [React demo](./packages/react-demo/) - demo for React component. Run `npm start` to start demo.
|
||||
- [Next.js demo](./packages/nextjs-demo/) - demo for React component with Next.js. Run `npm run build` to build it and `npm start` to start demo.
|
||||
- [Vue 3 demo](./packages/vue-demo/) - demo for Vue component. Run `npm run dev` to start demo.
|
||||
- [Vue 2 demo](./packages/vue2-demo/) - demo for Vue component. Run `npm run dev` to start demo.
|
||||
- [Svelte demo](./packages/svelte-demo/) - demo for Svelte component. Run `npm run dev` to start demo.
|
||||
- [Sapper demo](./packages/sapper-demo/) - demo for Sapper, using Svelte component on the server and in the browser. Run `npm run dev` to start the demo.
|
||||
- [Ember demo](./packages/ember-demo/) - demo for Ember component. Run `npm run start` to start demo.
|
||||
- [Browser tests](./packages/browser-tests/) - unit tests for SVG framework. Run `npm run build` to build it. Open test.html in browser (requires HTTP server).
|
||||
|
||||
### Legacy packages
|
||||
@ -81,7 +70,7 @@ Unfortunately Lerna does not support several versions of the same package. Becau
|
||||
Legacy packages:
|
||||
|
||||
- [React with API](./archive/react-with-api/) - React component with API support. It has been merged with [`react` package](./packages/react/) in newer version.
|
||||
- [React with API demo](./archive/react-demo-with-api/) - demo for legacy `react-with-api` package. Run `npm start` to start demo.
|
||||
- [React](./archive/react/) - React component without API support. Component without API support does not make sense, there are plenty of other icon components already, so this component has been archived and replaced with new component that supports Iconify API.
|
||||
|
||||
## Installation
|
||||
|
||||
@ -107,10 +96,10 @@ If you want to re-install dependencies, run `npm run clean` to clear all reposit
|
||||
|
||||
## Documentation
|
||||
|
||||
Documentation for all packages is available on [Iconify documentation website](https://docs.iconify.design/implementations/):
|
||||
Documentation for all packages is available on [Iconify documentation website](https://docs.iconify.design/icon-components/):
|
||||
|
||||
- [SVG framework documentation](https://docs.iconify.design/implementations/svg-framework/).
|
||||
- [Components documentation](https://docs.iconify.design/implementations/components/).
|
||||
- [SVG framework documentation](https://docs.iconify.design/icon-components/svg-framework/index.html).
|
||||
- [Components documentation](https://docs.iconify.design/icon-components/components/index.html).
|
||||
|
||||
## Licence
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user