mirror of
https://github.com/iconify/iconify.git
synced 2024-07-27 00:00:23 +00:00
chore: update readme files and license years
This commit is contained in:
Vjacheslav Trushkin
parent
e77a0c5ed1
commit
f03056cc8c
16
README.md
16
README.md
@ -54,8 +54,8 @@ Main packages:
|
||||
|
||||
- [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 icon components.
|
||||
- [API redundancy](./packages/api-redundancy/) - library for managing redundancies for loading data from API: handling timeouts, rotating hosts.
|
||||
- [Iconify core](./packages/core/) - common files used by icon components and plugins.
|
||||
- [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.
|
||||
|
||||
### Web component
|
||||
|
||||
@ -186,10 +186,12 @@ See [CONTRIBUTING.md](./CONTRIBUTING.md).
|
||||
|
||||
## Documentation
|
||||
|
||||
Documentation for all packages is available on [Iconify documentation website](https://docs.iconify.design/icon-components/):
|
||||
Documentation for all packages is available on [Iconify documentation website](https://iconify.design/docs/):
|
||||
|
||||
- [SVG framework documentation](https://docs.iconify.design/icon-components/svg-framework/index.html).
|
||||
- [Components documentation](https://docs.iconify.design/icon-components/components/index.html).
|
||||
- [Types documentation](https://iconify.design/docs/types/).
|
||||
- [Utilities documentation](https://iconify.design/docs/libraries/utils/).
|
||||
- [Icon components documentation](https://iconify.design/docs/icon-components/).
|
||||
- [Tailwind CSS plugin documentation](https://iconify.design/docs/usage/css/tailwind/).
|
||||
|
||||
## Licence
|
||||
|
||||
@ -200,6 +202,6 @@ Iconify is licensed under MIT license.
|
||||
Some 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.
|
||||
|
||||
This licence does not apply to icons. Icons are released under different licences, see each icon set for details.
|
||||
Icons available by default are all licensed under some kind of open-source or free licence.
|
||||
Icons available by default are all licensed under various open-source licences.
|
||||
|
||||
© 2020 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
© 2020-PRESENT Vjacheslav Trushkin
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
Copyright (c) 2021-PRESENT Vjacheslav Trushkin
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@ -11,13 +11,13 @@ Iconify icon component is nothing like that. Component does not include any icon
|
||||
|
||||
That means:
|
||||
|
||||
- One syntax for over 100,000 icons from 100+ icon sets.
|
||||
- One syntax for over 150,000 icons from 100+ icon sets.
|
||||
- Renders SVG. Many components simply render icon fonts, which look ugly. Iconify renders pixel perfect SVG.
|
||||
- Loads icons on demand. No need to bundle icons, component will automatically load icon data for icons that you use from Iconify API.
|
||||
|
||||
For more information about Iconify project visit [https://iconify.design/](https://iconify.design/).
|
||||
|
||||
For extended documentation visit [Iconify for Ember documentation](https://docs.iconify.design/icon-components/ember/).
|
||||
For extended documentation visit [Iconify for Ember documentation](https://iconify.design/docs/icon-components/ember/).
|
||||
|
||||
## Installation
|
||||
|
||||
@ -41,19 +41,13 @@ Install `@iconify/ember` then use `IconifyIcon` component in template with icon
|
||||
<IconifyIcon @icon='mdi-light:home' />
|
||||
```
|
||||
|
||||
Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over 100,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
|
||||
Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over 150,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
|
||||
|
||||
## Offline Usage
|
||||
## Offline usage
|
||||
|
||||
Retrieving icon data from Iconify API requires visitor to be online. What if you want to use component offline or on local network?
|
||||
This icon component is designed to be used with Iconify API, loading icon data on demand instead of bundling it.
|
||||
|
||||
If you want to use icon component without relying on public Iconify API, there are several options:
|
||||
|
||||
1. You can import icon data from Iconify Icons packages.
|
||||
2. You can create custom icon bundles (more efficient, but requires more coding).
|
||||
3. You can host your own Iconify API instead of relying on third party service.
|
||||
|
||||
See [Iconify for Ember offline use documentation](https://docs.iconify.design/icon-components/ember/offline.html) or [Iconify API documentation](https://docs.iconify.design/sources/api/).
|
||||
If you want to use icons without Iconify API, [there are many other options available](https://iconify.design/docs/usage/).
|
||||
|
||||
## Icon Names
|
||||
|
||||
@ -68,7 +62,7 @@ It has 3 parts, separated by ":":
|
||||
- prefix is name of icon set.
|
||||
- name is name of icon.
|
||||
|
||||
See [Iconify for Ember icon names documentation](https://docs.iconify.design/icon-components/ember/icon-name.html) for more detailed explanation.
|
||||
See [Iconify for Ember icon names documentation](https://iconify.design/docs/icon-components/ember/icon-name.html) for more detailed explanation.
|
||||
|
||||
## Using icon data
|
||||
|
||||
@ -88,9 +82,9 @@ export default class IconDemoComponent extends Component {
|
||||
}
|
||||
```
|
||||
|
||||
See [icon packages documentation](https://docs.iconify.design/sources/npm/) for more details.
|
||||
See [icon packages documentation](https://iconify.design/docs/icons/) for more details.
|
||||
|
||||
### Inline
|
||||
### Vertical alignment
|
||||
|
||||
Icons have 2 modes: inline and block. Difference between modes is `vertical-align` that is added to inline icons.
|
||||
|
||||
@ -252,7 +246,7 @@ Rotating 16x24 icon by 90 degrees results in:
|
||||
- CSS transformation keeps 16x24 bounding box, which might cause the icon to overlap text around it.
|
||||
- Icon transformation changes bounding box to 24x16, rotating content inside an icon.
|
||||
|
||||
See [icon transformations documentation](https://docs.iconify.design/icon-components/ember/transform.html) for more details.
|
||||
See [icon transformations documentation](https://iconify.design/docs/icon-components/ember/transform.html) for more details.
|
||||
|
||||
#### Flipping an icon
|
||||
|
||||
@ -317,12 +311,12 @@ What is the purpose of `onLoad`? To let you know when Icon component renders an
|
||||
|
||||
## Full documentation
|
||||
|
||||
For extended documentation visit [Iconify for Ember documentation](https://docs.iconify.design/icon-components/ember/).
|
||||
For extended documentation visit [Iconify for Ember documentation](https://iconify.design/docs/icon-components/ember/).
|
||||
|
||||
## License
|
||||
|
||||
Ember component is released with MIT license.
|
||||
|
||||
© 2021 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
© 2021-PRESENT Vjacheslav Trushkin
|
||||
|
||||
See [Iconify icon sets page](https://icon-sets.iconify.design/) for list of collections and their licenses.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2019 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
Copyright (c) 2019-PRESENT Vjacheslav Trushkin
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@ -11,13 +11,13 @@ Iconify icon component is nothing like that. Component does not include any icon
|
||||
|
||||
That means:
|
||||
|
||||
- One syntax for over 100,000 icons from 100+ icon sets.
|
||||
- One syntax for over 150,000 icons from 100+ icon sets.
|
||||
- Renders SVG. Many components simply render icon fonts, which look ugly. Iconify renders pixel perfect SVG.
|
||||
- Loads icons on demand. No need to bundle icons, component will automatically load icon data for icons that you use from Iconify API.
|
||||
|
||||
For more information about Iconify project visit [https://iconify.design/](https://iconify.design/).
|
||||
|
||||
For extended documentation visit [Iconify for React documentation](https://docs.iconify.design/icon-components/react/).
|
||||
For extended documentation visit [Iconify for React documentation](https://iconify.design/docs/icon-components/react/).
|
||||
|
||||
## Installation
|
||||
|
||||
@ -47,19 +47,13 @@ Then use `Icon` component with icon name or data as "icon" parameter:
|
||||
<Icon icon="mdi-light:home" />
|
||||
```
|
||||
|
||||
Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over 100,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
|
||||
Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over 150,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
|
||||
|
||||
## Offline Usage
|
||||
## Offline usage
|
||||
|
||||
Retrieving icon data from Iconify API requires visitor to be online. What if you want to use component offline or on local network?
|
||||
This icon component is designed to be used with Iconify API, loading icon data on demand instead of bundling it.
|
||||
|
||||
If you want to use icon component without relying on public Iconify API, there are several options:
|
||||
|
||||
1. You can import icon data from Iconify Icons packages.
|
||||
2. You can create custom icon bundles (more efficient, but requires more coding).
|
||||
3. You can host your own Iconify API instead of relying on third party service.
|
||||
|
||||
See [Iconify for React offline use documentation](https://docs.iconify.design/icon-components/react/offline.html) or [Iconify API documentation](https://docs.iconify.design/sources/api/).
|
||||
If you want to use icons without Iconify API, [there are many other options available](https://iconify.design/docs/usage/).
|
||||
|
||||
## Icon Names
|
||||
|
||||
@ -74,7 +68,7 @@ It has 3 parts, separated by ":":
|
||||
- prefix is name of icon set.
|
||||
- name is name of icon.
|
||||
|
||||
See [Iconify for React icon names documentation](https://docs.iconify.design/icon-components/react/icon-name.html) for more detailed explanation.
|
||||
See [Iconify for React icon names documentation](https://iconify.design/docs/icon-components/react/icon-name.html) for more detailed explanation.
|
||||
|
||||
## Using icon data
|
||||
|
||||
@ -89,7 +83,7 @@ function renderHomeIcon() {
|
||||
}
|
||||
```
|
||||
|
||||
See [icon packages documentation](https://docs.iconify.design/sources/npm/) for more details.
|
||||
See [icon packages documentation](https://iconify.design/docs/icons/) for more details.
|
||||
|
||||
### Next.js notice
|
||||
|
||||
@ -109,9 +103,9 @@ import home from '@iconify/icons-mdi-light/home';
|
||||
|
||||
All icons are available as ES modules for modern bundler and as CommonJS modules for outdated bundlers. ES modules use format `@iconify-icons/{prefix}`, CommonJS modules use `@iconify/icons-{prefix}`.
|
||||
|
||||
For more details, see [icon packages documentation](https://docs.iconify.design/sources/npm/).
|
||||
For more details, see [icon packages documentation](https://iconify.design/docs/icons/).
|
||||
|
||||
## Inline icon
|
||||
## Vertical alignment
|
||||
|
||||
Icons have 2 modes: inline and block. Difference between modes is `vertical-align` that is added to inline icons.
|
||||
|
||||
@ -301,7 +295,7 @@ Rotating 16x24 icon by 90 degrees results in:
|
||||
- CSS transformation keeps 16x24 bounding box, which might cause the icon to overlap text around it.
|
||||
- Icon transformation changes bounding box to 24x16, rotating content inside an icon.
|
||||
|
||||
See [icon transformations documentation](https://docs.iconify.design/icon-components/react/transform.html) for more details.
|
||||
See [icon transformations documentation](https://iconify.design/docs/icon-components/react/transform.html) for more details.
|
||||
|
||||
#### Flipping an icon
|
||||
|
||||
@ -366,12 +360,12 @@ What is the purpose of `onLoad`? To let you know when Icon component renders an
|
||||
|
||||
## Full documentation
|
||||
|
||||
For extended documentation visit [Iconify for React documentation](https://docs.iconify.design/icon-components/react/).
|
||||
For extended documentation visit [Iconify for React documentation](https://iconify.design/docs/icon-components/react/).
|
||||
|
||||
## License
|
||||
|
||||
React component is released with MIT license.
|
||||
|
||||
© 2019 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
© 2019-PRESENT Vjacheslav Trushkin
|
||||
|
||||
See [Iconify icon sets page](https://icon-sets.iconify.design/) for list of collections and their licenses.
|
||||
|
||||
@ -11,13 +11,13 @@ Iconify icon component is nothing like that. Component does not include any icon
|
||||
|
||||
That means:
|
||||
|
||||
- One syntax for over 100,000 icons from 100+ icon sets.
|
||||
- One syntax for over 150,000 icons from 100+ icon sets.
|
||||
- Renders SVG. Many components simply render icon fonts, which look ugly. Iconify renders pixel perfect SVG.
|
||||
- Loads icons on demand. No need to bundle icons, component will automatically load icon data for icons that you use from Iconify API.
|
||||
|
||||
For more information about Iconify project visit [https://iconify.design/](https://iconify.design/).
|
||||
|
||||
For extended documentation visit [Iconify for Svelte documentation](https://docs.iconify.design/icon-components/svelte/).
|
||||
For extended documentation visit [Iconify for Svelte documentation](https://iconify.design/docs/icon-components/svelte/).
|
||||
|
||||
## Installation
|
||||
|
||||
@ -47,19 +47,22 @@ Then use component with icon data as "icon" parameter:
|
||||
<Icon icon="mdi-light:home" />
|
||||
```
|
||||
|
||||
Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over 100,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
|
||||
Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over 150,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
|
||||
|
||||
## Offline Usage
|
||||
## Offline usage
|
||||
|
||||
Retrieving icon data from Iconify API requires visitor to be online. What if you want to use component offline or on local network?
|
||||
This icon component is designed to be used with Iconify API, loading icon data on demand instead of bundling it.
|
||||
|
||||
If you want to use icon component without relying on public Iconify API, there are several options:
|
||||
If you want to use icons without Iconify API, [there are many other options available](https://iconify.design/docs/usage/).
|
||||
|
||||
1. You can import icon data from Iconify Icons packages.
|
||||
2. You can create custom icon bundles (more efficient, but requires more coding).
|
||||
3. You can host your own Iconify API instead of relying on third party service.
|
||||
## Web component
|
||||
|
||||
See [Iconify for Svelte offline use documentation](https://docs.iconify.design/icon-components/svelte/offline.html) or [Iconify API documentation](https://docs.iconify.design/sources/api/).
|
||||
If you are experiencing issues with SSR hydration, there is an alternative solution available: [Iconify Icon web component](https://iconify.design/docs/iconify-icon/).
|
||||
|
||||
Web component is preferred to this component if:
|
||||
|
||||
- Your page is performing slowly. Web component separates icon rendering in shadow DOM, improving performance.
|
||||
- You are experiencing CSS conflicts.
|
||||
|
||||
## Icon Names
|
||||
|
||||
@ -74,7 +77,7 @@ It has 3 parts, separated by ":":
|
||||
- prefix is name of icon set.
|
||||
- name is name of icon.
|
||||
|
||||
See [Iconify for Svelte icon names documentation](https://docs.iconify.design/icon-components/svelte/icon-name.html) for more detailed explanation.
|
||||
See [Iconify for Svelte icon names documentation](https://iconify.design/docs/icon-components/svelte/icon-name.html) for more detailed explanation.
|
||||
|
||||
## Using icon data
|
||||
|
||||
@ -89,7 +92,7 @@ function renderHomeIcon() {
|
||||
}
|
||||
```
|
||||
|
||||
See [icon packages documentation](https://docs.iconify.design/sources/npm/) for more details.
|
||||
See [icon packages documentation](https://iconify.design/docs/icons/) for more details.
|
||||
|
||||
### ES / CommonJS packages
|
||||
|
||||
@ -109,9 +112,9 @@ import home from '@iconify/icons-mdi-light/home';
|
||||
|
||||
All icons are available as ES modules for modern bundler and as CommonJS modules for outdated bundlers. ES modules use format `@iconify-icons/{prefix}`, CommonJS modules use `@iconify/icons-{prefix}`.
|
||||
|
||||
For more details, see [icon packages documentation](https://docs.iconify.design/sources/npm/).
|
||||
For more details, see [icon packages documentation](https://iconify.design/docs/icons/).
|
||||
|
||||
## Inline icon
|
||||
## Vertical alignment
|
||||
|
||||
Icons have 2 modes: inline and block. Difference between modes is `vertical-align` that is added to inline icons.
|
||||
|
||||
@ -291,7 +294,7 @@ Rotating 16x24 icon by 90 degrees results in:
|
||||
- CSS transformation keeps 16x24 bounding box, which might cause the icon to overlap text around it.
|
||||
- Icon transformation changes bounding box to 24x16, rotating content inside an icon.
|
||||
|
||||
See [icon transformations documentation](https://docs.iconify.design/icon-components/svelte/transform.html) for more details.
|
||||
See [icon transformations documentation](https://iconify.design/docs/icon-components/svelte/transform.html) for more details.
|
||||
|
||||
#### Flipping an icon
|
||||
|
||||
@ -401,12 +404,12 @@ Instead of using `<Icon />`, you must use `<svelte:component />` to make sure co
|
||||
|
||||
## Full documentation
|
||||
|
||||
For extended documentation visit [Iconify for Svelte documentation](https://docs.iconify.design/icon-components/svelte/).
|
||||
For extended documentation visit [Iconify for Svelte documentation](https://iconify.design/docs/icon-components/svelte/).
|
||||
|
||||
## License
|
||||
|
||||
The Svelte component is released with MIT license.
|
||||
|
||||
© 2020 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
© 2020-PRESENT Vjacheslav Trushkin
|
||||
|
||||
See [Iconify icon sets page](https://icon-sets.iconify.design/) for list of collections and their licenses.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
Copyright (c) 2020-PRESENT Vjacheslav Trushkin
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@ -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 100+ icon sets with more than 100,000 icons.
|
||||
- Out of the box includes 100+ icon sets with more than 150,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.
|
||||
@ -53,20 +53,27 @@ or this:
|
||||
|
||||
|
||||
|
||||
That is it. Change `data-icon` value to the name of the icon you want to use. There are over 100,000 premade icons to choose from, including FontAwesome, Material Design Icons, Tabler Icons, Box Icons, Unicons, Bootstrap Icons and even several emoji sets.
|
||||
That is it. Change `data-icon` value to the name of the icon you want to use. There are over 150,000 premade icons to choose from, including FontAwesome, Material Design Icons, Tabler Icons, Box Icons, Unicons, Bootstrap Icons and even several emoji sets.
|
||||
|
||||
Do you want to make your own icon sets? Everything you need is [available on GitHub](https://github.com/iconify): tools for creating custom icon sets, Iconify API application and documentation to help you.
|
||||
|
||||
## Web component
|
||||
|
||||
SVG framework was designed a while ago, when browsers had poor support for web components.
|
||||
|
||||
However, this is no longer an issue. All modern browsers support web components.
|
||||
|
||||
A newer replacement for SVG framework is available: [Iconify Icon web component](https://iconify.design/docs/iconify-icon/). Consider switching to it.
|
||||
|
||||
## Full documentation
|
||||
|
||||
Below is a shortened version of documentation.
|
||||
|
||||
Full documentation is available on Iconify website:
|
||||
Full documentation is available on [Iconify website](https://iconify.design/docs/):
|
||||
|
||||
- [SVG framework documentation](https://docs.iconify.design/icon-components/svg-framework/).
|
||||
- [Iconify API documentation](https://docs.iconify.design/api/).
|
||||
- [Creating icon bundles](https://docs.iconify.design/icon-components/bundles/).
|
||||
- [Iconify Tools documentation](https://docs.iconify.design/tools/tools2/).
|
||||
- [SVG framework documentation](https://iconify.design/docs/icon-components/svg-framework/).
|
||||
- [Iconify API documentation](https://iconify.design/docs/api/).
|
||||
- [Iconify Tools documentation](https://iconify.design/docs/libraries/tools/).
|
||||
|
||||
## How does it work?
|
||||
|
||||
@ -80,7 +87,17 @@ Iconify SVG framework finds those placeholders and uses the following logic to p
|
||||
|
||||
This is done in a fraction of a second. Iconify SVG framework watches DOM for changes, so whenever you add new placeholders, it immediately replaces them with `SVG`, making it easy to use with dynamic content, such as AJAX forms.
|
||||
|
||||
### Inline mode
|
||||
## Offline usage
|
||||
|
||||
SVG framework is designed to be used with Iconify API, loading icon data on demand instead of bundling it.
|
||||
|
||||
If you want to use icons without Iconify API, [there are many other options available](https://iconify.design/docs/usage/).
|
||||
|
||||
## Attributes
|
||||
|
||||
There are optional attributes to customise icon appearance.
|
||||
|
||||
### Vertical alignment
|
||||
|
||||
Code examples above use different class names: the first example uses "iconify", the second example uses "iconify-inline".
|
||||
|
||||
@ -139,38 +156,9 @@ Relying on a third party service is often not an option. Many companies and deve
|
||||
|
||||
Iconify API and icon sets are all [available on GitHub](https://github.com/iconify), making it easy to host API on your own server.
|
||||
|
||||
For more details see [Iconify API documentation](https://docs.iconify.design/api/).
|
||||
For more details see [Iconify API documentation](https://iconify.design/docs/api/).
|
||||
|
||||
You can also create custom Iconify API to serve your own icons. For more details see [hosting custom icons in Iconify documentation](https://docs.iconify.design/api/hosting.html).
|
||||
|
||||
### Using Iconify offline
|
||||
|
||||
While the default method of retrieving icons is to retrieve them from API, there are other options. Iconify SVG framework is designed to be as flexible as possible.
|
||||
|
||||
Easiest option to serve icons without API is by creating icon bundles.
|
||||
|
||||
Icon bundles are small scripts that you can load after Iconify SVG framework or bundle it together in one file.
|
||||
|
||||
For more details see [icon bundles in Iconify documentation](https://docs.iconify.design/icon-components/bundles/).
|
||||
|
||||
Another option is to import icons and bundle them with Iconify, similar to React and Vue components. Example:
|
||||
|
||||
```js
|
||||
// Installation: npm install --save-dev @iconify/iconify
|
||||
import Iconify from '@iconify/iconify/offline';
|
||||
// Installation: npm install --save-dev @iconify/icons-dashicons
|
||||
import adminUsers from '@iconify/icons-dashicons/admin-users';
|
||||
|
||||
// Unlike React and Vue components, in SVG framework each icon added with addIcon() name must have a
|
||||
// prefix and a name. In this example prefix is "dashicons" and name is "admin-users".
|
||||
Iconify.addIcon('dashicons:admin-users', adminUsers);
|
||||
```
|
||||
|
||||
```html
|
||||
<span class="iconify" data-icon="dashicons:admin-users"></span>
|
||||
```
|
||||
|
||||
See [Iconify for React](https://docs.iconify.design/icon-components/react/) documentation for more details.
|
||||
You can also create custom Iconify API to serve your own icons. For more details see [hosting custom icons in Iconify documentation](https://iconify.design/docs/api/hosting.html).
|
||||
|
||||
## Color
|
||||
|
||||
@ -280,7 +268,7 @@ Samples:
|
||||
|
||||
## Available icons
|
||||
|
||||
There are over 100,000 icons to choose from.
|
||||
There are over 150,000 icons to choose from.
|
||||
|
||||
General collections (monotone icons):
|
||||
|
||||
@ -325,4 +313,4 @@ Previous versions of this package were dual-licensed under Apache 2.0 and GPL 2.
|
||||
This license does not apply to icons. Icons are released under different licenses, see each icon set for details.
|
||||
Icons available by default are all licensed under some kind of open-source or free license.
|
||||
|
||||
© 2019 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
© 2019-PRESENT Vjacheslav Trushkin
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2019 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
Copyright (c) 2019-PRESENT Vjacheslav Trushkin
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@ -11,13 +11,13 @@ Iconify icon component is nothing like that. Component does not include any icon
|
||||
|
||||
That means:
|
||||
|
||||
- One syntax for over 100,000 icons from 100+ icon sets.
|
||||
- One syntax for over 150,000 icons from 100+ icon sets.
|
||||
- Renders SVG. Many components simply render icon fonts, which look ugly. Iconify renders pixel perfect SVG.
|
||||
- Loads icons on demand. No need to bundle icons, component will automatically load icon data for icons that you use from Iconify API.
|
||||
|
||||
For more information about Iconify project visit [https://iconify.design/](https://iconify.design/).
|
||||
|
||||
For extended documentation visit [Iconify for Vue documentation](https://docs.iconify.design/icon-components/vue/).
|
||||
For extended documentation visit [Iconify for Vue documentation](https://iconify.design/docs/icon-components/vue/).
|
||||
|
||||
## Installation
|
||||
|
||||
@ -39,7 +39,7 @@ This component is not backwards compatible with Vue 2.
|
||||
|
||||
If you are using Vue 2, you need to install `@iconify/vue2` component. It is almost identical to this component, but for Vue 2.
|
||||
|
||||
See [Iconify for Vue 2 documentation](https://docs.iconify.design/icon-components/vue2/).
|
||||
See [Iconify for Vue 2 documentation](https://iconify.design/docs/icon-components/vue2/).
|
||||
|
||||
## Usage with API
|
||||
|
||||
@ -55,19 +55,23 @@ Then use `Icon` component in template with icon name or data as "icon" parameter
|
||||
<Icon icon="mdi-light:home" />
|
||||
```
|
||||
|
||||
Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over 100,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
|
||||
Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over 150,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
|
||||
|
||||
## Offline Usage
|
||||
## Offline usage
|
||||
|
||||
Retrieving icon data from Iconify API requires visitor to be online. What if you want to use component offline or on local network?
|
||||
This icon component is designed to be used with Iconify API, loading icon data on demand instead of bundling it.
|
||||
|
||||
If you want to use icon component without relying on public Iconify API, there are several options:
|
||||
If you want to use icons without Iconify API, [there are many other options available](https://iconify.design/docs/usage/).
|
||||
|
||||
1. You can import icon data from Iconify Icons packages.
|
||||
2. You can create custom icon bundles (more efficient, but requires more coding).
|
||||
3. You can host your own Iconify API instead of relying on third party service.
|
||||
## Web component
|
||||
|
||||
See [Iconify for Vue offline use documentation](https://docs.iconify.design/icon-components/vue/offline.html) or [Iconify API documentation](https://docs.iconify.design/sources/api/).
|
||||
If you are experiencing issues with SSR hydration, there is an alternative solution available: [Iconify Icon web component](https://iconify.design/docs/iconify-icon/).
|
||||
|
||||
Web component is preferred to this component if:
|
||||
|
||||
- Your page is performing slowly. Web component separates icon rendering in shadow DOM, improving performance.
|
||||
- You are experiencing CSS conflicts.
|
||||
- It works better with Nuxt and Vitepress.
|
||||
|
||||
## Icon Names
|
||||
|
||||
@ -82,7 +86,7 @@ It has 3 parts, separated by ":":
|
||||
- prefix is name of icon set.
|
||||
- name is name of icon.
|
||||
|
||||
See [Iconify for Vue icon names documentation](https://docs.iconify.design/icon-components/vue/icon-name.html) for more detailed explanation.
|
||||
See [Iconify for Vue icon names documentation](https://iconify.design/docs/icon-components/vue/icon-name.html) for more detailed explanation.
|
||||
|
||||
## Using icon data
|
||||
|
||||
@ -113,7 +117,7 @@ export default {
|
||||
</script>
|
||||
```
|
||||
|
||||
See [icon packages documentation](https://docs.iconify.design/sources/npm/) for more details.
|
||||
See [icon packages documentation](https://iconify.design/docs/icons/) for more details.
|
||||
|
||||
### ES / CommonJS packages
|
||||
|
||||
@ -133,9 +137,9 @@ import home from '@iconify/icons-mdi-light/home';
|
||||
|
||||
All icons are available as ES modules for modern bundler and as CommonJS modules for outdated bundlers. ES modules use format `@iconify-icons/{prefix}`, CommonJS modules use `@iconify/icons-{prefix}`.
|
||||
|
||||
For more details, see [icon packages documentation](https://docs.iconify.design/sources/npm/).
|
||||
For more details, see [icon packages documentation](https://iconify.design/docs/icons/).
|
||||
|
||||
### Inline
|
||||
### Vertical alignment
|
||||
|
||||
Icons have 2 modes: inline and block. Difference between modes is `vertical-align` that is added to inline icons.
|
||||
|
||||
@ -315,7 +319,7 @@ Rotating 16x24 icon by 90 degrees results in:
|
||||
- CSS transformation keeps 16x24 bounding box, which might cause the icon to overlap text around it.
|
||||
- Icon transformation changes bounding box to 24x16, rotating content inside an icon.
|
||||
|
||||
See [icon transformations documentation](https://docs.iconify.design/icon-components/vue/transform.html) for more details.
|
||||
See [icon transformations documentation](https://iconify.design/docs/icon-components/vue/transform.html) for more details.
|
||||
|
||||
#### Flipping an icon
|
||||
|
||||
@ -393,12 +397,12 @@ What is the purpose of `onLoad`? To let you know when Icon component renders an
|
||||
|
||||
## Full documentation
|
||||
|
||||
For extended documentation visit [Iconify for Vue documentation](https://docs.iconify.design/icon-components/vue/).
|
||||
For extended documentation visit [Iconify for Vue documentation](https://iconify.design/docs/icon-components/vue/).
|
||||
|
||||
## License
|
||||
|
||||
Vue component is released with MIT license.
|
||||
|
||||
© 2020 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
© 2020-PRESENT Vjacheslav Trushkin
|
||||
|
||||
See [Iconify icon sets page](https://icon-sets.iconify.design/) for list of collections and their licenses.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
Copyright (c) 2020-PRESENT Vjacheslav Trushkin
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@ -17,7 +17,7 @@ That means:
|
||||
|
||||
For more information about Iconify project visit [https://iconify.design/](https://iconify.design/).
|
||||
|
||||
For extended documentation visit [Iconify for Vue 2 documentation](https://docs.iconify.design/icon-components/vue2/).
|
||||
For extended documentation visit [Iconify for Vue 2 documentation](https://iconify.design/docs/icon-components/vue2/).
|
||||
|
||||
## Installation
|
||||
|
||||
@ -39,7 +39,7 @@ This component will not work with Vue 3.
|
||||
|
||||
If you are using Vue 3, you need to install `@iconify/vue` component. It is almost identical to this component, but for Vue 3.
|
||||
|
||||
See [Iconify for Vue 3 documentation](https://docs.iconify.design/icon-components/vue/).
|
||||
See [Iconify for Vue 3 documentation](https://iconify.design/docs/icon-components/vue/).
|
||||
|
||||
## Usage with API
|
||||
|
||||
@ -57,17 +57,21 @@ Then use `Icon` component in template with icon name or data as "icon" parameter
|
||||
|
||||
Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over 100,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
|
||||
|
||||
## Offline Usage
|
||||
## Offline usage
|
||||
|
||||
Retrieving icon data from Iconify API requires visitor to be online. What if you want to use component offline or on local network?
|
||||
This icon component is designed to be used with Iconify API, loading icon data on demand instead of bundling it.
|
||||
|
||||
If you want to use icon component without relying on public Iconify API, there are several options:
|
||||
If you want to use icons without Iconify API, [there are many other options available](https://iconify.design/docs/usage/).
|
||||
|
||||
1. You can import icon data from Iconify Icons packages.
|
||||
2. You can create custom icon bundles (more efficient, but requires more coding).
|
||||
3. You can host your own Iconify API instead of relying on third party service.
|
||||
## Web component
|
||||
|
||||
See [Iconify for Vue offline use documentation](https://docs.iconify.design/icon-components/vue2/offline.html) or [Iconify API documentation](https://docs.iconify.design/sources/api/).
|
||||
If you are experiencing issues with SSR hydration, there is an alternative solution available: [Iconify Icon web component](https://iconify.design/docs/iconify-icon/).
|
||||
|
||||
Web component is preferred to this component if:
|
||||
|
||||
- Your page is performing slowly. Web component separates icon rendering in shadow DOM, improving performance.
|
||||
- You are experiencing CSS conflicts.
|
||||
- You are using Nuxt. Due to Vue 2 internals, this component has some issue when using it with Nuxt. Web component has no such issues. This has been solved in Vue 3, though web component is preferred for Nuxt / Vitepress too.
|
||||
|
||||
## Icon Names
|
||||
|
||||
@ -82,7 +86,7 @@ It has 3 parts, separated by ":":
|
||||
- prefix is name of icon set.
|
||||
- name is name of icon.
|
||||
|
||||
See [Iconify for Vue icon names documentation](https://docs.iconify.design/icon-components/vue2/icon-name.html) for more detailed explanation.
|
||||
See [Iconify for Vue icon names documentation](https://iconify.design/docs/icon-components/vue2/icon-name.html) for more detailed explanation.
|
||||
|
||||
## Using icon data
|
||||
|
||||
@ -113,7 +117,7 @@ export default {
|
||||
</script>
|
||||
```
|
||||
|
||||
See [icon packages documentation](https://docs.iconify.design/sources/npm/) for more details.
|
||||
See [icon packages documentation](https://iconify.design/docs/icons/) for more details.
|
||||
|
||||
### ES / CommonJS packages
|
||||
|
||||
@ -133,9 +137,9 @@ import home from '@iconify/icons-mdi-light/home';
|
||||
|
||||
All icons are available as ES modules for modern bundler and as CommonJS modules for outdated bundlers. ES modules use format `@iconify-icons/{prefix}`, CommonJS modules use `@iconify/icons-{prefix}`.
|
||||
|
||||
For more details, see [icon packages documentation](https://docs.iconify.design/sources/npm/).
|
||||
For more details, see [icon packages documentation](https://iconify.design/docs/icons/).
|
||||
|
||||
### Inline
|
||||
### Vertical alignment
|
||||
|
||||
Icons have 2 modes: inline and block. Difference between modes is `vertical-align` that is added to inline icons.
|
||||
|
||||
@ -317,7 +321,7 @@ Rotating 16x24 icon by 90 degrees results in:
|
||||
- CSS transformation keeps 16x24 bounding box, which might cause the icon to overlap text around it.
|
||||
- Icon transformation changes bounding box to 24x16, rotating content inside an icon.
|
||||
|
||||
See [icon transformations documentation](https://docs.iconify.design/icon-components/vue2/transform.html) for more details.
|
||||
See [icon transformations documentation](https://iconify.design/docs/icon-components/vue2/transform.html) for more details.
|
||||
|
||||
#### Flipping an icon
|
||||
|
||||
@ -395,12 +399,12 @@ What is the purpose of `onLoad`? To let you know when Icon component renders an
|
||||
|
||||
## Full documentation
|
||||
|
||||
For extended documentation visit [Iconify for Vue documentation](https://docs.iconify.design/icon-components/vue2/).
|
||||
For extended documentation visit [Iconify for Vue documentation](https://iconify.design/docs/icon-components/vue2/).
|
||||
|
||||
## License
|
||||
|
||||
Vue component is released with MIT license.
|
||||
|
||||
© 2021 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
© 2021-PRESENT Vjacheslav Trushkin
|
||||
|
||||
See [Iconify icon sets page](https://icon-sets.iconify.design/) for list of collections and their licenses.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
Copyright (c) 2021-PRESENT Vjacheslav Trushkin
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@ -66,7 +66,7 @@ Main advantage of web component over other implementations is shadow DOM. Using
|
||||
|
||||
Below is a shortened version of documentation.
|
||||
|
||||
Full documentation is [available on Iconify documentation website](https://docs.iconify.design/iconify-icon/).
|
||||
Full documentation is [available on Iconify documentation website](https://iconify.design/docs/iconify-icon/).
|
||||
|
||||
## How does it work?
|
||||
|
||||
@ -130,38 +130,15 @@ Relying on a third party service is often not an option. Many companies and deve
|
||||
|
||||
Iconify API and icon sets are all [available on GitHub](https://github.com/iconify), making it easy to host API on your own server.
|
||||
|
||||
For more details see [Iconify API documentation](https://docs.iconify.design/api/).
|
||||
For more details see [Iconify API documentation](https://iconify.design/docs/api/).
|
||||
|
||||
You can also create custom Iconify API to serve your own icons. For more details see [hosting custom icons in Iconify documentation](https://docs.iconify.design/api/hosting.html).
|
||||
You can also create custom Iconify API to serve your own icons. For more details see [hosting custom icons in Iconify documentation](https://iconify.design/docs/api/hosting.html).
|
||||
|
||||
### Using Iconify offline
|
||||
## Offline usage
|
||||
|
||||
While the default method of retrieving icons is to retrieve them from API, there are other options. Iconify Icon web component is designed to be as flexible as possible.
|
||||
Iconify Icon web component is designed to be used with Iconify API, loading icon data on demand instead of bundling it..
|
||||
|
||||
Easiest option to serve icons without API is by creating icon bundles.
|
||||
|
||||
Icon bundles are small scripts that you can load after Iconify Icon web component or bundle it together in one file.
|
||||
|
||||
For more details see [icon bundles in Iconify documentation](https://docs.iconify.design/icon-components/bundles/).
|
||||
|
||||
Another option is to import icons and bundle them with Iconify, similar to React and Vue components. Example:
|
||||
|
||||
```js
|
||||
// Installation: npm install --save-dev iconify-icon
|
||||
import 'iconify-icon';
|
||||
// Installation: npm install --save-dev @iconify/icons-dashicons
|
||||
import adminUsers from '@iconify/icons-dashicons/admin-users';
|
||||
|
||||
// Unlike React and Vue components, in SVG framework each icon added with addIcon() name must have a
|
||||
// prefix and a name. In this example prefix is "dashicons" and name is "admin-users".
|
||||
addIcon('dashicons:admin-users', adminUsers);
|
||||
```
|
||||
|
||||
```html
|
||||
<iconify-icon icon="dashicons:admin-users"></iconify-icon>
|
||||
```
|
||||
|
||||
See [icon packages documentation](https://docs.iconify.design/icons/icons.html) for more details.
|
||||
If you want to use icons without Iconify API, [there are many other options available](https://iconify.design/docs/usage/).
|
||||
|
||||
## Color
|
||||
|
||||
@ -323,4 +300,4 @@ This package is licensed under MIT license.
|
||||
This license does not apply to icons. Icons are released under different licenses, see each icon set for details.
|
||||
Icons available by default are all licensed under some kind of open-source or free license.
|
||||
|
||||
© 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
© 2022-PRESENT Vjacheslav Trushkin
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
Copyright (c) 2022-PRESENT Vjacheslav Trushkin
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
Copyright (c) 2022-PRESENT Vjacheslav Trushkin
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@ -4,7 +4,7 @@ Iconify Icon web component is a wrapper for `iconify-icon` package, which provid
|
||||
|
||||
For more information about Iconify project visit [https://iconify.design/](https://iconify.design/).
|
||||
|
||||
For documentation visit [Iconify Icon web component documentation](https://docs.iconify.design/iconify-icon/).
|
||||
For documentation visit [Iconify Icon web component documentation](https://iconify.design/docs/iconify-icon/).
|
||||
|
||||
## Installation
|
||||
|
||||
@ -36,17 +36,11 @@ Then use `Icon` component with icon name or data as "icon" parameter:
|
||||
|
||||
Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over 150,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
|
||||
|
||||
## Offline Usage
|
||||
## Offline usage
|
||||
|
||||
Retrieving icon data from Iconify API requires visitor to be online. What if you want to use component offline or on local network?
|
||||
Iconify Icon web component is designed to be used with Iconify API, loading icon data on demand instead of bundling it..
|
||||
|
||||
If you want to use icon component without relying on public Iconify API, there are several options:
|
||||
|
||||
1. You can import icon data from Iconify Icons packages.
|
||||
2. You can create custom icon bundles (more efficient, but requires more coding).
|
||||
3. You can host your own Iconify API instead of relying on third party service.
|
||||
|
||||
See [offline use documentation](https://docs.iconify.design/iconify-icon/without-api.html) or [Iconify API documentation](https://docs.iconify.design/sources/api/).
|
||||
If you want to use icons without Iconify API, [there are many other options available](https://iconify.design/docs/usage/).
|
||||
|
||||
## Icon Names
|
||||
|
||||
@ -61,7 +55,7 @@ It has 3 parts, separated by ":":
|
||||
- prefix is name of icon set.
|
||||
- name is name of icon.
|
||||
|
||||
See [icon names documentation](https://docs.iconify.design/iconify-icon/icon-name.html) for more detailed explanation.
|
||||
See [icon names documentation](https://iconify.design/docs/iconify-icon/icon-name.html) for more detailed explanation.
|
||||
|
||||
## Using icon data
|
||||
|
||||
@ -76,7 +70,7 @@ function renderHomeIcon() {
|
||||
}
|
||||
```
|
||||
|
||||
See [icon packages documentation](https://docs.iconify.design/sources/npm/) for more details.
|
||||
See [icon packages documentation](https://iconify.design/docs/icons/) for more details.
|
||||
|
||||
### Next.js notice
|
||||
|
||||
@ -96,7 +90,7 @@ import home from '@iconify/icons-mdi-light/home';
|
||||
|
||||
All icons are available as ES modules for modern bundler and as CommonJS modules for outdated bundlers. ES modules use format `@iconify-icons/{prefix}`, CommonJS modules use `@iconify/icons-{prefix}`.
|
||||
|
||||
For more details, see [icon packages documentation](https://docs.iconify.design/sources/npm/).
|
||||
For more details, see [icon packages documentation](https://iconify.design/docs/icons/).
|
||||
|
||||
## Icon component properties
|
||||
|
||||
@ -228,7 +222,7 @@ Rotating 16x24 icon by 90 degrees results in:
|
||||
- CSS transformation keeps 16x24 bounding box, which might cause the icon to overlap text around it.
|
||||
- Icon transformation changes bounding box to 24x16, rotating content inside an icon.
|
||||
|
||||
See [icon transformations documentation](https://docs.iconify.design/iconify-icon/transform.html) for more details.
|
||||
See [icon transformations documentation](https://iconify.design/docs/iconify-icon/transform.html) for more details.
|
||||
|
||||
#### Flipping an icon
|
||||
|
||||
@ -272,12 +266,12 @@ Examples of 90 degrees rotation:
|
||||
|
||||
## Full documentation
|
||||
|
||||
For extended documentation visit [Iconify Icon web component documentation](https://docs.iconify.design/iconify-icon/).
|
||||
For extended documentation visit [Iconify Icon web component documentation](https://iconify.design/docs/iconify-icon/).
|
||||
|
||||
## License
|
||||
|
||||
React component is released with MIT license.
|
||||
|
||||
© 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
© 2022-PRESENT Vjacheslav Trushkin
|
||||
|
||||
See [Iconify icon sets page](https://icon-sets.iconify.design/) for list of icon sets and their licenses.
|
||||
|
||||
@ -4,7 +4,7 @@ Iconify Icon web component is a wrapper for `iconify-icon` package, which provid
|
||||
|
||||
For more information about Iconify project visit [https://iconify.design/](https://iconify.design/).
|
||||
|
||||
For documentation visit [Iconify Icon web component documentation](https://docs.iconify.design/iconify-icon/).
|
||||
For documentation visit [Iconify Icon web component documentation](https://iconify.design/docs/iconify-icon/).
|
||||
|
||||
## Installation
|
||||
|
||||
@ -36,17 +36,11 @@ Then use `Icon` component with icon name or data as "icon" parameter:
|
||||
|
||||
Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over 150,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
|
||||
|
||||
## Offline Usage
|
||||
## Offline usage
|
||||
|
||||
Retrieving icon data from Iconify API requires visitor to be online. What if you want to use component offline or on local network?
|
||||
Iconify Icon web component is designed to be used with Iconify API, loading icon data on demand instead of bundling it..
|
||||
|
||||
If you want to use icon component without relying on public Iconify API, there are several options:
|
||||
|
||||
1. You can import icon data from Iconify Icons packages.
|
||||
2. You can create custom icon bundles (more efficient, but requires more coding).
|
||||
3. You can host your own Iconify API instead of relying on third party service.
|
||||
|
||||
See [offline use documentation](https://docs.iconify.design/iconify-icon/without-api.html) or [Iconify API documentation](https://docs.iconify.design/sources/api/).
|
||||
If you want to use icons without Iconify API, [there are many other options available](https://iconify.design/docs/usage/).
|
||||
|
||||
## Icon Names
|
||||
|
||||
@ -61,7 +55,7 @@ It has 3 parts, separated by ":":
|
||||
- prefix is name of icon set.
|
||||
- name is name of icon.
|
||||
|
||||
See [icon names documentation](https://docs.iconify.design/iconify-icon/icon-name.html) for more detailed explanation.
|
||||
See [icon names documentation](https://iconify.design/docs/iconify-icon/icon-name.html) for more detailed explanation.
|
||||
|
||||
## Using icon data
|
||||
|
||||
@ -76,7 +70,7 @@ function renderHomeIcon() {
|
||||
}
|
||||
```
|
||||
|
||||
See [icon packages documentation](https://docs.iconify.design/sources/npm/) for more details.
|
||||
See [icon packages documentation](https://iconify.design/docs/icons/) for more details.
|
||||
|
||||
## Icon component properties
|
||||
|
||||
@ -208,7 +202,7 @@ Rotating 16x24 icon by 90 degrees results in:
|
||||
- CSS transformation keeps 16x24 bounding box, which might cause the icon to overlap text around it.
|
||||
- Icon transformation changes bounding box to 24x16, rotating content inside an icon.
|
||||
|
||||
See [icon transformations documentation](https://docs.iconify.design/iconify-icon/transform.html) for more details.
|
||||
See [icon transformations documentation](https://iconify.design/docs/iconify-icon/transform.html) for more details.
|
||||
|
||||
#### Flipping an icon
|
||||
|
||||
@ -252,12 +246,12 @@ Examples of 90 degrees rotation:
|
||||
|
||||
## Full documentation
|
||||
|
||||
For extended documentation visit [Iconify Icon web component documentation](https://docs.iconify.design/iconify-icon/).
|
||||
For extended documentation visit [Iconify Icon web component documentation](https://iconify.design/docs/iconify-icon/).
|
||||
|
||||
## License
|
||||
|
||||
SolidJS component is released with MIT license.
|
||||
|
||||
© 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
© 2022-PRESENT Vjacheslav Trushkin
|
||||
|
||||
See [Iconify icon sets page](https://icon-sets.iconify.design/) for list of icon sets and their licenses.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
Copyright (c) 2022-PRESENT Vjacheslav Trushkin
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
Copyright (c) 2021-PRESENT Vjacheslav Trushkin
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@ -2,15 +2,13 @@
|
||||
|
||||
This package provides redundancy management for scripts that use API. It detects API connection timeouts and re-sends queries to backup API host(s).
|
||||
|
||||
It was designed to be used with Iconify version 2.
|
||||
It was designed to be used with Iconify icon components and plugins. It ensures that icon data is automatically retrieved from backup API in case main API server is unreachable, improving API uptime.
|
||||
|
||||
## Usage
|
||||
|
||||
TODO
|
||||
|
||||
Due to time constraints, documentation is not available.
|
||||
|
||||
See `@iconify/iconify` version 2 and `@iconify/icon-finder` source code for usage examples.
|
||||
See `lib/api/` in `core` package in sibling directory of this repository for usage.
|
||||
|
||||
## License
|
||||
|
||||
@ -20,4 +18,4 @@ This package is licensed under MIT license.
|
||||
|
||||
Previous versions of this package 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.
|
||||
|
||||
© 2021 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
© 2021-PRESENT Vjacheslav Trushkin
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
Copyright (c) 2021-PRESENT Vjacheslav Trushkin
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@ -18,7 +18,7 @@ Documentation is currently not available because there is no demand for it.
|
||||
|
||||
If anyone would like to create custom Iconify implementation and needs documentation for Iconify Core, please create an issue on Iconify repository on GitHub.
|
||||
|
||||
You can browse [icon components documentation](https://docs.iconify.design/icon-components/), which explains how most functions exported by core package work. Components mostly just re-export functions from this package.
|
||||
You can browse [icon components documentation](https://iconify.design/docs/icon-components/), which explains how most functions exported by core package work. Components mostly just re-export functions from this package.
|
||||
|
||||
## License
|
||||
|
||||
@ -28,4 +28,4 @@ This package is licensed under MIT license.
|
||||
|
||||
Previous versions of this package 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.
|
||||
|
||||
© 2021 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
© 2021-PRESENT Vjacheslav Trushkin
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
Copyright (c) 2021-PRESENT Vjacheslav Trushkin
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@ -456,4 +456,4 @@ This package is licensed under MIT license.
|
||||
|
||||
Previous versions of this package 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.
|
||||
|
||||
© 2021 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
© 2021-PRESENT Vjacheslav Trushkin
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
Copyright (c) 2021-PRESENT Vjacheslav Trushkin
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
"test": "tsc --noEmit --strict --typeRoots '[]' types.d.ts"
|
||||
},
|
||||
"bugs": "https://github.com/iconify/iconify/issues",
|
||||
"homepage": "https://github.com/iconify/iconify",
|
||||
"homepage": "https://iconify.design/docs/types/",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/iconify/iconify.git",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
Copyright (c) 2021-PRESENT Vjacheslav Trushkin
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
"version": "2.1.5",
|
||||
"license": "MIT",
|
||||
"bugs": "https://github.com/iconify/iconify/issues",
|
||||
"homepage": "https://iconify.design/",
|
||||
"homepage": "https://iconify.design/docs/libraries/utils/",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/iconify/iconify.git",
|
||||
|
||||
@ -14,10 +14,10 @@ npm install @iconify/utils --save
|
||||
|
||||
## Documentation
|
||||
|
||||
Documentation is available at [Iconify documentation website](https://docs.iconify.design/tools/utils/).
|
||||
Documentation is available at [Iconify documentation website](https://iconify.design/docs/libraries/utils/).
|
||||
|
||||
## License
|
||||
|
||||
The library is released with MIT license.
|
||||
|
||||
© 2021 - 2022 Vjacheslav Trushkin / Iconify OÜ
|
||||
© 2021-PRESENT Vjacheslav Trushkin
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Iconify for Tailwind CSS
|
||||
|
||||
This plugin creates CSS for over 100k open source icons.
|
||||
This plugin creates CSS for over 150k open source icons.
|
||||
|
||||
[Browse icons at Iconify](https://icon-sets.iconify.design/) to see all icons.
|
||||
|
||||
@ -27,7 +27,7 @@ In Iconify all icon names use the following format: `{prefix}:{name}`. Due to li
|
||||
|
||||
### Color, size, alignment
|
||||
|
||||
Monoton icons can change color! See [Iconify documentation](https://docs.iconify.design/icon-components/css.html#mask) for longer explanation.
|
||||
Monoton icons can change color! See [Iconify documentation](https://iconify.design/docs/usage/css/#monotone) for longer explanation.
|
||||
|
||||
To change icon size or color, change font size or text color, like you would with any text.
|
||||
|
||||
@ -43,13 +43,13 @@ To align icon below baseline, add negative vertical alignment, like this (you ca
|
||||
|
||||
Plugin does not include icon sets. You need to install icon sets separately.
|
||||
|
||||
To install all 100k+ icons, install `@iconify/json` as a dev dependency.
|
||||
To install all 150k+ icons, install `@iconify/json` as a dev dependency.
|
||||
|
||||
If you do not want to install big package, install `@iconify-json/` packages for icon sets that you use.
|
||||
|
||||
See [Iconify icon sets](https://icon-sets.iconify.design/) for list of available icon sets and icons.
|
||||
|
||||
See [Iconify documentation](https://docs.iconify.design/icons/json.html) for list of packages.
|
||||
See [Iconify documentation](https://iconify.design/docs/icons/json.html) for list of packages.
|
||||
|
||||
## Tailwind config
|
||||
|
||||
@ -119,4 +119,4 @@ This package is licensed under MIT license.
|
||||
This license does not apply to icons. Icons are released under different licenses, see each icon set for details.
|
||||
Icons available by default are all licensed under some kind of open-source or free license.
|
||||
|
||||
© 2023 Vjacheslav Trushkin / Iconify OÜ
|
||||
© 2023-PRESENT Vjacheslav Trushkin
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2023 Vjacheslav Trushkin / Iconify OÜ
|
||||
Copyright (c) 2023-PRESENT Vjacheslav Trushkin
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
Loading…
Reference in New Issue
Block a user