mirror of
https://github.com/iconify/iconify.git
synced 2024-06-22 08:24:59 +00:00
chore: remove deprecated packages
This commit is contained in:
Vjacheslav Trushkin
parent
a8e3b45ecd
commit
e42c84a90e
22
README.md
22
README.md
|
|
@ -2,7 +2,7 @@ Iconify is the most versatile icon framework.
|
|||
|
||||
- Unified icon framework that can be used with any icon library.
|
||||
- Out of the box includes 150+ icon sets with more than 200,000 icons.
|
||||
- Embed icons in HTML with SVG framework or components for front-end frameworks.
|
||||
- Embed icons in HTML with Iconify Icon web component 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.
|
||||
|
||||
|
|
@ -79,7 +79,6 @@ Frameworks that are confirmed to work with web components without custom wrapper
|
|||
|
||||
Directory `iconify-icon-demo` contains demo packages that show usage of `iconify-icon` web component.
|
||||
|
||||
- [Ember demo](./iconify-icon-demo/ember-icon-demo/) - demo using web component with Ember. Run `npm run build` to build demo and `npm run start` to start it.
|
||||
- [React demo](./iconify-icon-demo/react-demo/) - demo using web component with React. Run `npm run dev` to start demo.
|
||||
- [Next.js demo](./iconify-icon-demo/nextjs-demo/) - demo for web component with Next.js. Run `npm run dev` to start demo.
|
||||
- [Svelte demo with Vite](./iconify-icon-demo/svelte-demo/) - demo for web component with Svelte using Vite. Run `npm run dev` to start demo.
|
||||
|
|
@ -92,13 +91,11 @@ Directory `iconify-icon-demo` contains demo packages that show usage of `iconify
|
|||
|
||||
#### Nuxt 3 usage
|
||||
|
||||
When using web component with Nuxt 3, you need to tell Nuxt that `iconify-icon` is a custom element. Otherwise it will show few errors.
|
||||
When 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.
|
||||
|
||||
Example `nuxt.config.ts`:
|
||||
|
||||
```ts
|
||||
import { defineNuxtConfig } from 'nuxt3';
|
||||
|
||||
export default defineNuxtConfig({
|
||||
vue: {
|
||||
compilerOptions: {
|
||||
|
|
@ -112,16 +109,13 @@ This configuration change is not needed when using Vue with `@vitejs/plugin-vue`
|
|||
|
||||
### Iconify icon components
|
||||
|
||||
Directory `components` contains Iconify icon components and SVG framework.
|
||||
Directory `components` contains native components for several frameworks:
|
||||
|
||||
| Package | Usage |
|
||||
| ---------------------------------------- | ------ |
|
||||
| [SVG Framework](./components/iconify/) | HTML |
|
||||
| [React component](./components/react/) | React |
|
||||
| [Vue 3 component](./components/vue/) | Vue 3 |
|
||||
| [Vue 2 component](./components/vue2/) | Vue 2 |
|
||||
| [Vue component](./components/vue/) | Vue |
|
||||
| [Svelte component](./components/svelte/) | Svelte |
|
||||
| [Ember component](./components/ember/) | Ember |
|
||||
|
||||
#### Deprecation notice
|
||||
|
||||
|
|
@ -139,7 +133,7 @@ Deprecation status:
|
|||
- React component: can be replaced with `iconify-icon` using `@iconify-icon/react` wrapper.
|
||||
- Svelte component: can be replaced with `iconify-icon`, does not require Svelte specific wrapper.
|
||||
- Vue 3 component: can be replaced with `iconify-icon`, does not require Vue specific wrapper.
|
||||
- Vue 3 component: can be replaced with `iconify-icon`, does not require Vue specific wrapper. Make sure you are not using Webpack older than version 5.
|
||||
- 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.
|
||||
- Ember component: can be replaced with `iconify-icon`, does not require Ember specific wrapper.
|
||||
|
||||
To import web component, just import it once in your script, as per [`iconify-icon` README file](./iconify-icon/icon/README.md).
|
||||
|
|
@ -150,12 +144,10 @@ Directory `components-demo` contains demo packages that show usage of icon compo
|
|||
|
||||
- [React demo](./components-demo/react-demo/) - demo for React component. Run `npm run dev` to start demo.
|
||||
- [Next.js demo](./components-demo/nextjs-demo/) - demo for React component with Next.js. Run `npm run dev` to start demo.
|
||||
- [Vue 3 demo](./components-demo/vue-demo/) - demo for Vue 3 component. Run `npm run dev` to start demo.
|
||||
- [Nuxt 3 demo](./components-demo/nuxt3-demo/) - demo for Vue 3 component with Nuxt. Run `npm run dev` to start demo.
|
||||
- [Vue 2 demo](./components-demo/vue2-demo/) - demo for Vue 2 component. Run `npm run build` to build demo and `npm run serve` to start it.
|
||||
- [Vue demo](./components-demo/vue-demo/) - demo for Vue component. Run `npm run dev` to start demo.
|
||||
- [Nuxt demo](./components-demo/nuxt3-demo/) - demo for Vue component with Nuxt. Run `npm run dev` to start demo.
|
||||
- [Svelte demo with Vite](./components-demo/svelte-demo-vite/) - demo for Svelte component using Vite. Run `npm run dev` to start demo.
|
||||
- [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.
|
||||
- [Ember demo](./components-demo/ember-demo/) - demo for Ember component. Run `npm run build` to build demo and `npm run start` to start it.
|
||||
|
||||
### Plugins
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
# EditorConfig helps developers define and maintain consistent
|
||||
# coding styles between different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
[*.hbs]
|
||||
insert_final_newline = false
|
||||
|
||||
[*.{diff,md}]
|
||||
trim_trailing_whitespace = false
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
/**
|
||||
Ember CLI sends analytics information by default. The data is completely
|
||||
anonymous, but there are times when you might want to disable this behavior.
|
||||
|
||||
Setting `disableAnalytics` to true will prevent any data from being sent.
|
||||
*/
|
||||
"disableAnalytics": false
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
# unconventional js
|
||||
/blueprints/*/files/
|
||||
/vendor/
|
||||
|
||||
# compiled output
|
||||
/dist/
|
||||
/tmp/
|
||||
|
||||
# dependencies
|
||||
/bower_components/
|
||||
/node_modules/
|
||||
|
||||
# misc
|
||||
/coverage/
|
||||
!.*
|
||||
.*/
|
||||
.eslintcache
|
||||
|
||||
# ember-try
|
||||
/.node_modules.ember-try/
|
||||
/bower.json.ember-try
|
||||
/npm-shrinkwrap.json.ember-try
|
||||
/package.json.ember-try
|
||||
/package-lock.json.ember-try
|
||||
/yarn.lock.ember-try
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
parser: 'babel-eslint',
|
||||
parserOptions: {
|
||||
ecmaVersion: 2018,
|
||||
sourceType: 'module',
|
||||
ecmaFeatures: {
|
||||
legacyDecorators: true,
|
||||
},
|
||||
},
|
||||
plugins: ['ember'],
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:ember/recommended',
|
||||
'plugin:prettier/recommended',
|
||||
],
|
||||
env: {
|
||||
browser: true,
|
||||
},
|
||||
rules: {},
|
||||
overrides: [
|
||||
// node files
|
||||
{
|
||||
files: [
|
||||
'./.eslintrc.js',
|
||||
'./.prettierrc.js',
|
||||
'./.template-lintrc.js',
|
||||
'./ember-cli-build.js',
|
||||
'./testem.js',
|
||||
'./blueprints/*/index.js',
|
||||
'./config/**/*.js',
|
||||
'./lib/*/index.js',
|
||||
'./server/**/*.js',
|
||||
],
|
||||
parserOptions: {
|
||||
sourceType: 'script',
|
||||
},
|
||||
env: {
|
||||
browser: false,
|
||||
node: true,
|
||||
},
|
||||
plugins: ['node'],
|
||||
extends: ['plugin:node/recommended'],
|
||||
rules: {
|
||||
// this can be removed once the following is fixed
|
||||
// https://github.com/mysticatea/eslint-plugin-node/issues/77
|
||||
'node/no-unpublished-require': 'off',
|
||||
},
|
||||
},
|
||||
{
|
||||
// test files
|
||||
files: ['tests/**/*-test.{js,ts}'],
|
||||
extends: ['plugin:qunit/recommended'],
|
||||
},
|
||||
],
|
||||
};
|
||||
32
components-demo/ember-demo/.gitignore
vendored
32
components-demo/ember-demo/.gitignore
vendored
|
|
@ -1,32 +0,0 @@
|
|||
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# compiled output
|
||||
/dist/
|
||||
/tmp/
|
||||
|
||||
# dependencies
|
||||
/bower_components/
|
||||
/node_modules/
|
||||
|
||||
# misc
|
||||
/.env*
|
||||
/.pnp*
|
||||
/.sass-cache
|
||||
/.eslintcache
|
||||
/connect.lock
|
||||
/coverage/
|
||||
/libpeerconnection.log
|
||||
/npm-debug.log*
|
||||
/testem.log
|
||||
/yarn-error.log
|
||||
|
||||
# ember-try
|
||||
/.node_modules.ember-try/
|
||||
/bower.json.ember-try
|
||||
/npm-shrinkwrap.json.ember-try
|
||||
/package.json.ember-try
|
||||
/package-lock.json.ember-try
|
||||
/yarn.lock.ember-try
|
||||
|
||||
# Dependabot alerts from Ember dependencies hell
|
||||
package-lock.json
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
# unconventional js
|
||||
/blueprints/*/files/
|
||||
/vendor/
|
||||
|
||||
# compiled output
|
||||
/dist/
|
||||
/tmp/
|
||||
|
||||
# dependencies
|
||||
/bower_components/
|
||||
/node_modules/
|
||||
|
||||
# misc
|
||||
/coverage/
|
||||
!.*
|
||||
.eslintcache
|
||||
.lint-todo/
|
||||
|
||||
# ember-try
|
||||
/.node_modules.ember-try/
|
||||
/bower.json.ember-try
|
||||
/npm-shrinkwrap.json.ember-try
|
||||
/package.json.ember-try
|
||||
/package-lock.json.ember-try
|
||||
/yarn.lock.ember-try
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
singleQuote: true,
|
||||
};
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
extends: 'recommended',
|
||||
};
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"ignore_dirs": ["tmp", "dist"]
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
# ember-demo
|
||||
|
||||
This README outlines the details of collaborating on this Ember application.
|
||||
A short introduction of this app could easily go here.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
You will need the following things properly installed on your computer.
|
||||
|
||||
* [Git](https://git-scm.com/)
|
||||
* [Node.js](https://nodejs.org/) (with npm)
|
||||
* [Ember CLI](https://ember-cli.com/)
|
||||
* [Google Chrome](https://google.com/chrome/)
|
||||
|
||||
## Installation
|
||||
|
||||
* `git clone <repository-url>` this repository
|
||||
* `cd ember-demo`
|
||||
* `npm install`
|
||||
|
||||
## Running / Development
|
||||
|
||||
* `ember serve`
|
||||
* Visit your app at [http://localhost:4200](http://localhost:4200).
|
||||
* Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).
|
||||
|
||||
### Code Generators
|
||||
|
||||
Make use of the many generators for code, try `ember help generate` for more details
|
||||
|
||||
### Running Tests
|
||||
|
||||
* `ember test`
|
||||
* `ember test --server`
|
||||
|
||||
### Linting
|
||||
|
||||
* `npm run lint`
|
||||
* `npm run lint:fix`
|
||||
|
||||
### Building
|
||||
|
||||
* `ember build` (development)
|
||||
* `ember build --environment production` (production)
|
||||
|
||||
### Deploying
|
||||
|
||||
Specify what it takes to deploy your app.
|
||||
|
||||
## Further Reading / Useful Links
|
||||
|
||||
* [ember.js](https://emberjs.com/)
|
||||
* [ember-cli](https://ember-cli.com/)
|
||||
* Development Browser Extensions
|
||||
* [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
|
||||
* [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import Application from '@ember/application';
|
||||
import Resolver from 'ember-resolver';
|
||||
import loadInitializers from 'ember-load-initializers';
|
||||
import config from 'ember-demo/config/environment';
|
||||
|
||||
export default class App extends Application {
|
||||
modulePrefix = config.modulePrefix;
|
||||
podModulePrefix = config.podModulePrefix;
|
||||
Resolver = Resolver;
|
||||
}
|
||||
|
||||
loadInitializers(App, config.modulePrefix);
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<section class='color-demo'>
|
||||
<h1>Color and style (components/color-demo.hbs)</h1>
|
||||
<div>
|
||||
Icon with @color (red):
|
||||
<IconifyIcon @icon='dashicons:admin-users' @color='red' @inline={{true}} />
|
||||
</div>
|
||||
<div>
|
||||
Icon size (2em):
|
||||
<IconifyIcon @icon='dashicons:admin-users' @height='2em' @inline={{true}} />
|
||||
</div>
|
||||
<div>
|
||||
Icon style (red):
|
||||
<IconifyIcon @icon='dashicons:admin-users' style='color: red;' />
|
||||
</div>
|
||||
<div>
|
||||
Inline icon with vertical-align style (aligned to top):
|
||||
<IconifyIcon
|
||||
@icon='dashicons:admin-users'
|
||||
style='vertical-align: .25em;'
|
||||
@inline={{true}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
Inline icon with variable style (purple, 2em, no alignment):
|
||||
<IconifyIcon
|
||||
@icon='dashicons:admin-users'
|
||||
style='color: purple; vertical-align: 0; font-size: 2em;'
|
||||
@inline={{true}}
|
||||
@color='green'
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<div>
|
||||
<section class='icon-24'>
|
||||
<h1>Usage</h1>
|
||||
<div>
|
||||
Icon referenced by name:
|
||||
<IconifyIcon @icon='mdi:home' />
|
||||
</div>
|
||||
<div>
|
||||
Icon referenced by object:
|
||||
<IconifyIcon @icon={{this.iconData}} />
|
||||
</div>
|
||||
<div class='alert'>
|
||||
<IconifyIcon @icon='mdi-light:alert' />
|
||||
Important notice with alert icon!
|
||||
</div>
|
||||
<div>
|
||||
Icon without size, scaled to 48px with CSS:
|
||||
<IconifyIcon @icon='mdi:home' @height='unset' style='height: 48px' />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='inline-demo'>
|
||||
<h1>Inline demo</h1>
|
||||
<div>
|
||||
Block icon (behaving like image):
|
||||
<IconifyIcon @icon='experiment2' />
|
||||
</div>
|
||||
<div>
|
||||
Inline icon (behaving line text / icon font):
|
||||
<IconifyIcon @icon='experiment2' @inline={{true}} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<ColorDemo />
|
||||
</div>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
import Component from '@glimmer/component';
|
||||
import {
|
||||
disableCache,
|
||||
addIcon,
|
||||
addCollection,
|
||||
} from '@iconify/ember/components/iconify-icon';
|
||||
import presentationPlay from '@iconify-icons/mdi-light/presentation-play';
|
||||
import playIcon from '@iconify-icons/mdi-light/play';
|
||||
|
||||
// Disable cache to make sure icons are loaded from API
|
||||
disableCache('all');
|
||||
|
||||
// Add 'mdi-light:play' as 'demo'
|
||||
addIcon('demo', playIcon);
|
||||
|
||||
addIcon('experiment2', {
|
||||
width: 16,
|
||||
height: 16,
|
||||
body: '<g fill="none" stroke-linecap="round" stroke-width="1" stroke="currentColor"><circle cx="8" cy="8" r="7.5" stroke-dasharray="48" stroke-dashoffset="48"><animate id="circle" attributeName="stroke-dashoffset" values="48;0" dur="0.5s" fill="freeze" /></circle><path d="M8 5v3" stroke-width="2" stroke-dasharray="5" stroke-dashoffset="5"><animate attributeName="stroke-dashoffset" values="5;0" dur="0.3s" begin="circle.end+0.1s" fill="freeze" /></path></g><circle cx="8" cy="11" r="1" fill="currentColor" opacity="0"><animate attributeName="opacity" values="0;1" dur="0.2s" begin="circle.end+0.5s" fill="freeze" /></circle>',
|
||||
});
|
||||
|
||||
// Add few mdi-light: icons
|
||||
|
||||
addCollection({
|
||||
prefix: '',
|
||||
icons: {
|
||||
alert1: {
|
||||
body: '<path d="M10.5 14c4.142 0 7.5 1.567 7.5 3.5V20H3v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S4 16.12 4 17.5V19h13v-1.5zM10.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM20 16v-1h1v1h-1zm0-3V7h1v6h-1z" fill="currentColor"/>',
|
||||
},
|
||||
link1: {
|
||||
body: '<path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"/>',
|
||||
},
|
||||
},
|
||||
width: 24,
|
||||
height: 24,
|
||||
});
|
||||
|
||||
export default class IconDemoComponent extends Component {
|
||||
iconData = presentationPlay;
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>EmberDemo</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
{{content-for "head"}}
|
||||
|
||||
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
|
||||
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/ember-demo.css">
|
||||
|
||||
{{content-for "head-footer"}}
|
||||
</head>
|
||||
<body>
|
||||
{{content-for "body"}}
|
||||
|
||||
<script src="{{rootURL}}assets/vendor.js"></script>
|
||||
<script src="{{rootURL}}assets/ember-demo.js"></script>
|
||||
|
||||
{{content-for "body-footer"}}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import EmberRouter from '@ember/routing/router';
|
||||
import config from 'ember-demo/config/environment';
|
||||
|
||||
export default class Router extends EmberRouter {
|
||||
location = config.locationType;
|
||||
rootURL = config.rootURL;
|
||||
}
|
||||
|
||||
Router.map(function () {});
|
||||
|
|
@ -1,171 +0,0 @@
|
|||
body {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: left;
|
||||
color: #2c3e50;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
section {
|
||||
border-bottom: 1px dotted #ccc;
|
||||
padding: 16px;
|
||||
}
|
||||
section:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
section:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
h1,
|
||||
h2 {
|
||||
margin: 0 0 16px;
|
||||
padding: 0;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
h2 {
|
||||
margin: 16px 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
h1 + h2 {
|
||||
margin-top: -8px;
|
||||
}
|
||||
p {
|
||||
margin: 12px 0 4px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Tests */
|
||||
.test-row {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.test-row-icons {
|
||||
padding-right: 4px;
|
||||
}
|
||||
.test-row-icons > svg {
|
||||
color: #afafaf;
|
||||
display: none;
|
||||
}
|
||||
.test-row-icons > svg.visible {
|
||||
display: inline-block;
|
||||
}
|
||||
.test-row-icons > svg.success {
|
||||
color: #327335;
|
||||
}
|
||||
.test-row-icons > svg.failed {
|
||||
color: #ba3329;
|
||||
}
|
||||
|
||||
/* 24px icon */
|
||||
.icon-24 svg {
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
vertical-align: -0.25em;
|
||||
}
|
||||
|
||||
/* Alert demo */
|
||||
.alert {
|
||||
position: relative;
|
||||
margin: 8px;
|
||||
padding: 16px;
|
||||
padding-left: 48px;
|
||||
background: #ba3329;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.alert + div {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.alert svg {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
font-size: 24px;
|
||||
line-height: 1em;
|
||||
margin: -0.5em 0 0;
|
||||
}
|
||||
|
||||
/* Checkbox component */
|
||||
.checkbox-container {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
cursor: pointer;
|
||||
/* color: #1769aa; */
|
||||
color: #626262;
|
||||
text-decoration: none;
|
||||
}
|
||||
.checkbox:hover {
|
||||
color: #ba3329;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.checkbox svg {
|
||||
margin-right: 4px;
|
||||
color: #afafaf;
|
||||
font-size: 24px;
|
||||
line-height: 1em;
|
||||
vertical-align: -0.25em;
|
||||
}
|
||||
.checkbox--checked svg {
|
||||
color: #327335;
|
||||
}
|
||||
.checkbox:hover svg {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.checkbox-container small {
|
||||
margin-left: 4px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Inline demo */
|
||||
.inline-demo svg {
|
||||
color: #06a;
|
||||
margin: 0 8px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
}
|
||||
.inline-demo div {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.inline-demo div:before,
|
||||
.inline-demo div:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0;
|
||||
border-top: 1px dashed #506874;
|
||||
opacity: 0.5;
|
||||
z-index: -1;
|
||||
}
|
||||
.inline-demo div:before {
|
||||
bottom: 5px;
|
||||
}
|
||||
.inline-demo div:after {
|
||||
bottom: 7px;
|
||||
border-top-color: #ba3329;
|
||||
}
|
||||
|
||||
.alignment-demo svg {
|
||||
color: #06a;
|
||||
font-size: 32px;
|
||||
line-height: 1em;
|
||||
margin-right: 8px;
|
||||
box-shadow: 0 0 0 1px #ccc;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{{page-title 'EmberDemo'}}
|
||||
|
||||
<IconifyDemo />
|
||||
|
||||
{{outlet}}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
{
|
||||
"schemaVersion": "1.0.0",
|
||||
"packages": [
|
||||
{
|
||||
"name": "ember-cli",
|
||||
"version": "4.1.0",
|
||||
"blueprints": [
|
||||
{
|
||||
"name": "app",
|
||||
"outputRepo": "https://github.com/ember-cli/ember-new-output",
|
||||
"codemodsSource": "ember-app-codemods-manifest@1",
|
||||
"isBaseBlueprint": true,
|
||||
"options": [
|
||||
"--ci-provider=github"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
module.exports = function (environment) {
|
||||
let ENV = {
|
||||
modulePrefix: 'ember-demo',
|
||||
environment,
|
||||
rootURL: '/',
|
||||
locationType: 'auto',
|
||||
EmberENV: {
|
||||
FEATURES: {
|
||||
// Here you can enable experimental features on an ember canary build
|
||||
// e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
|
||||
},
|
||||
EXTEND_PROTOTYPES: {
|
||||
// Prevent Ember Data from overriding Date.parse.
|
||||
Date: false,
|
||||
},
|
||||
},
|
||||
|
||||
APP: {
|
||||
// Here you can pass flags/options to your application instance
|
||||
// when it is created
|
||||
},
|
||||
};
|
||||
|
||||
if (environment === 'development') {
|
||||
// ENV.APP.LOG_RESOLVER = true;
|
||||
// ENV.APP.LOG_ACTIVE_GENERATION = true;
|
||||
// ENV.APP.LOG_TRANSITIONS = true;
|
||||
// ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
|
||||
// ENV.APP.LOG_VIEW_LOOKUPS = true;
|
||||
}
|
||||
|
||||
if (environment === 'test') {
|
||||
// Testem prefers this...
|
||||
ENV.locationType = 'none';
|
||||
|
||||
// keep test console output quieter
|
||||
ENV.APP.LOG_ACTIVE_GENERATION = false;
|
||||
ENV.APP.LOG_VIEW_LOOKUPS = false;
|
||||
|
||||
ENV.APP.rootElement = '#ember-testing';
|
||||
ENV.APP.autoboot = false;
|
||||
}
|
||||
|
||||
if (environment === 'production') {
|
||||
// here you can enable a production-specific feature
|
||||
}
|
||||
|
||||
return ENV;
|
||||
};
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"application-template-wrapper": false,
|
||||
"default-async-observers": true,
|
||||
"jquery-integration": false,
|
||||
"template-only-glimmer-components": true
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
const browsers = [
|
||||
'last 1 Chrome versions',
|
||||
'last 1 Firefox versions',
|
||||
'last 1 Safari versions',
|
||||
];
|
||||
|
||||
module.exports = {
|
||||
browsers,
|
||||
};
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
|
||||
|
||||
module.exports = function (defaults) {
|
||||
let app = new EmberApp(defaults, {
|
||||
// Add options here
|
||||
});
|
||||
|
||||
// Use `app.import` to add additional libraries to the generated
|
||||
// output files.
|
||||
//
|
||||
// If you need to use different assets in different
|
||||
// environments, specify an object as the first parameter. That
|
||||
// object's keys should be the environment name and the values
|
||||
// should be the asset to use in that environment.
|
||||
//
|
||||
// If the library that you are including contains AMD or ES6
|
||||
// modules that you would like to import into your application
|
||||
// please specify an object with the list of modules as keys
|
||||
// along with the exports of each module as its value.
|
||||
|
||||
return app.toTree();
|
||||
};
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
{
|
||||
"name": "ember-demo",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"description": "Small description for ember-demo goes here",
|
||||
"repository": "",
|
||||
"license": "MIT",
|
||||
"author": "",
|
||||
"directories": {
|
||||
"doc": "doc",
|
||||
"test": "tests"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "ember build --environment=production",
|
||||
"lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
|
||||
"lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
|
||||
"lint:hbs": "ember-template-lint .",
|
||||
"lint:hbs:fix": "ember-template-lint . --fix",
|
||||
"lint:js": "eslint . --cache",
|
||||
"lint:js:fix": "eslint . --fix",
|
||||
"start": "ember serve",
|
||||
"test": "npm-run-all lint test:*",
|
||||
"test:ember": "ember test"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ember/optional-features": "^2.0.0",
|
||||
"@ember/test-helpers": "^2.9.3",
|
||||
"@glimmer/component": "^1.1.2",
|
||||
"@glimmer/tracking": "^1.1.2",
|
||||
"@iconify-icons/mdi-light": "^1.2.5",
|
||||
"@iconify/ember": "workspace:*",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"broccoli-asset-rev": "^3.0.0",
|
||||
"ember-auto-import": "^2.6.1",
|
||||
"ember-cli": "~4.11.0",
|
||||
"ember-cli-app-version": "^6.0.0",
|
||||
"ember-cli-babel": "^7.26.11",
|
||||
"ember-cli-dependency-checker": "^3.3.1",
|
||||
"ember-cli-htmlbars": "^6.2.0",
|
||||
"ember-cli-inject-live-reload": "^2.1.0",
|
||||
"ember-cli-sri": "^2.1.1",
|
||||
"ember-cli-terser": "^4.0.2",
|
||||
"ember-data": "~4.11.3",
|
||||
"ember-export-application-global": "^2.0.1",
|
||||
"ember-fetch": "^8.1.2",
|
||||
"ember-load-initializers": "^2.1.2",
|
||||
"ember-page-title": "^7.0.0",
|
||||
"ember-qunit": "^6.2.0",
|
||||
"ember-resolver": "^10.0.0",
|
||||
"ember-source": "~4.11.0",
|
||||
"ember-template-lint": "^5.7.2",
|
||||
"ember-welcome-page": "^7.0.1",
|
||||
"eslint": "^8.37.0",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-plugin-ember": "^11.4.9",
|
||||
"eslint-plugin-node": "^11.1.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-qunit": "^7.3.4",
|
||||
"loader.js": "^4.7.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^2.8.7",
|
||||
"qunit": "^2.19.4",
|
||||
"qunit-dom": "^2.0.0",
|
||||
"webpack": "^5.77.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "12.* || 14.* || >= 16"
|
||||
},
|
||||
"ember": {
|
||||
"edition": "octane"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
# http://www.robotstxt.org
|
||||
User-agent: *
|
||||
Disallow:
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
test_page: 'tests/index.html?hidepassed',
|
||||
disable_watching: true,
|
||||
launch_in_ci: ['Chrome'],
|
||||
launch_in_dev: ['Chrome'],
|
||||
browser_start_timeout: 120,
|
||||
browser_args: {
|
||||
Chrome: {
|
||||
ci: [
|
||||
// --no-sandbox is needed when running Chrome inside a container
|
||||
process.env.CI ? '--no-sandbox' : null,
|
||||
'--headless',
|
||||
'--disable-dev-shm-usage',
|
||||
'--disable-software-rasterizer',
|
||||
'--mute-audio',
|
||||
'--remote-debugging-port=0',
|
||||
'--window-size=1440,900',
|
||||
].filter(Boolean),
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>EmberDemo Tests</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
{{content-for "head"}}
|
||||
{{content-for "test-head"}}
|
||||
|
||||
<link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
|
||||
<link rel="stylesheet" href="{{rootURL}}assets/ember-demo.css">
|
||||
<link rel="stylesheet" href="{{rootURL}}assets/test-support.css">
|
||||
|
||||
{{content-for "head-footer"}}
|
||||
{{content-for "test-head-footer"}}
|
||||
</head>
|
||||
<body>
|
||||
{{content-for "body"}}
|
||||
{{content-for "test-body"}}
|
||||
|
||||
<div id="qunit"></div>
|
||||
<div id="qunit-fixture">
|
||||
<div id="ember-testing-container">
|
||||
<div id="ember-testing"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/testem.js" integrity="" data-embroider-ignore></script>
|
||||
<script src="{{rootURL}}assets/vendor.js"></script>
|
||||
<script src="{{rootURL}}assets/test-support.js"></script>
|
||||
<script src="{{rootURL}}assets/ember-demo.js"></script>
|
||||
<script src="{{rootURL}}assets/tests.js"></script>
|
||||
|
||||
{{content-for "body-footer"}}
|
||||
{{content-for "test-body-footer"}}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import Application from 'ember-demo/app';
|
||||
import config from 'ember-demo/config/environment';
|
||||
import * as QUnit from 'qunit';
|
||||
import { setApplication } from '@ember/test-helpers';
|
||||
import { setup } from 'qunit-dom';
|
||||
import { start } from 'ember-qunit';
|
||||
|
||||
setApplication(Application.create(config.APP));
|
||||
|
||||
setup(QUnit.assert);
|
||||
|
||||
start();
|
||||
24
components-demo/vue2-demo/.gitignore
vendored
24
components-demo/vue2-demo/.gitignore
vendored
|
|
@ -1,24 +0,0 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
# Vue 3 + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
{
|
||||
"name": "vue2-demo",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "2.7.14",
|
||||
"vue-class-component": "^7.2.6",
|
||||
"vue-property-decorator": "^9.1.2",
|
||||
"vue-template-compiler": "2.7.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-icons/bx": "^1.2.6",
|
||||
"@iconify-icons/dashicons": "^1.2.4",
|
||||
"@iconify/vue2": "workspace:*",
|
||||
"vite": "^2.9.15",
|
||||
"vite-plugin-vue2": "^2.0.3"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
|
|
@ -1,241 +0,0 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<OfflineUsageDemo />
|
||||
<FullOfflineUsageDemo />
|
||||
<FullUsageDemo />
|
||||
|
||||
<section>
|
||||
<h1>Checkbox</h1>
|
||||
<div>
|
||||
<Checkbox
|
||||
:checked="true"
|
||||
text="Checkbox example"
|
||||
hint="(click to toggle)"
|
||||
/>
|
||||
<Checkbox
|
||||
:checked="false"
|
||||
text="Another checkbox example"
|
||||
hint="(click to toggle)"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<InlineDemo />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
// import { PluginObject } from 'vue';
|
||||
|
||||
import {
|
||||
addIcon as addOfflineIcon,
|
||||
addCollection as addOfflineCollection,
|
||||
} from '@iconify/vue2/dist/offline';
|
||||
import {
|
||||
addIcon as addOnlineIcon,
|
||||
addCollection as addOnlineCollection,
|
||||
disableCache,
|
||||
} from '@iconify/vue2/dist/iconify';
|
||||
import bxBarChartAlt from '@iconify-icons/bx/bx-bar-chart-alt';
|
||||
import bxShapes from '@iconify-icons/bx/bxs-shapes';
|
||||
|
||||
import Checkbox from './demo-components/Checkbox.vue';
|
||||
import InlineDemo from './demo-components/Inline.vue';
|
||||
import OfflineUsageDemo from './demo-components/UsageOffline.vue';
|
||||
import FullOfflineUsageDemo from './demo-components/UsageFullOffline.vue';
|
||||
import FullUsageDemo from './demo-components/UsageFull.vue';
|
||||
|
||||
// Disable cache
|
||||
disableCache('all');
|
||||
|
||||
// Add 'bx:bx-bar-chart-alt' as 'demo' for offline module
|
||||
addOfflineIcon('demo', bxBarChartAlt);
|
||||
|
||||
// Add 'bx:bxs-shapes' as 'demo' for full module
|
||||
addOnlineIcon('demo', bxShapes);
|
||||
|
||||
// Add different custom icons as 'experiment2' for offline and online modes
|
||||
addOfflineIcon('experiment2', {
|
||||
width: 16,
|
||||
height: 16,
|
||||
body: '<g fill="none" stroke-linecap="round" stroke-width="1" stroke="currentColor"><circle cx="8" cy="8" r="7.5" stroke-dasharray="48" stroke-dashoffset="48"><animate id="circle" attributeName="stroke-dashoffset" values="48;0" dur="0.5s" fill="freeze" /></circle><path d="M8 5v3" stroke-width="2" stroke-dasharray="5" stroke-dashoffset="5"><animate attributeName="stroke-dashoffset" values="5;0" dur="0.3s" begin="circle.end+0.1s" fill="freeze" /></path></g><circle cx="8" cy="11" r="1" fill="currentColor" opacity="0"><animate attributeName="opacity" values="0;1" dur="0.2s" begin="circle.end+0.5s" fill="freeze" /></circle>',
|
||||
});
|
||||
addOnlineIcon('experiment2', {
|
||||
width: 16,
|
||||
height: 16,
|
||||
body: '<mask id="coffee-mask" x="0" y="0" width="16" height="16"><g fill="white"><path d="M5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M8.5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M12-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4" stroke="white" stroke-width="1" fill="none"><animateMotion path="M0 0v-8" calcMode="linear" dur="3s" repeatCount="indefinite" /></path></g><rect y="4" width="16" height="12" fill="black" /><path d="M2 5H13C14.1046 5 15 5.89543 15 7V8C15 9.10457 14.1046 10 13 10H12V14C12 15.1046 11.1046 16 10 16H4C2.89543 16 2 15.1046 2 14V5Z" fill="white" /><path d="M12 6H13C13.5523 6 14 6.44772 14 7V8C14 8.55228 13.5523 9 13 9H12V6Z" fill="black" /></mask><rect mask="url(#coffee-mask)" width="16" height="16" fill="currentColor" />',
|
||||
});
|
||||
|
||||
// Add few mdi-light: icons
|
||||
addOfflineCollection({
|
||||
prefix: 'offline-mdi-light',
|
||||
icons: {
|
||||
'account-alert': {
|
||||
body: '<path d="M10.5 14c4.142 0 7.5 1.567 7.5 3.5V20H3v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S4 16.12 4 17.5V19h13v-1.5zM10.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM20 16v-1h1v1h-1zm0-3V7h1v6h-1z" fill="currentColor"/>',
|
||||
},
|
||||
'link': {
|
||||
body: '<path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"/>',
|
||||
},
|
||||
},
|
||||
width: 24,
|
||||
height: 24,
|
||||
});
|
||||
addOnlineCollection({
|
||||
prefix: '',
|
||||
icons: {
|
||||
alert1: {
|
||||
body: '<path d="M10.5 14c4.142 0 7.5 1.567 7.5 3.5V20H3v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S4 16.12 4 17.5V19h13v-1.5zM10.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM20 16v-1h1v1h-1zm0-3V7h1v6h-1z" fill="currentColor"/>',
|
||||
},
|
||||
link1: {
|
||||
body: '<path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"/>',
|
||||
},
|
||||
},
|
||||
width: 24,
|
||||
height: 24,
|
||||
});
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
Checkbox,
|
||||
InlineDemo,
|
||||
OfflineUsageDemo,
|
||||
FullOfflineUsageDemo,
|
||||
FullUsageDemo,
|
||||
},
|
||||
})
|
||||
export default class App extends Vue {}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: left;
|
||||
color: #2c3e50;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
section {
|
||||
border-bottom: 1px dotted #ccc;
|
||||
padding: 16px;
|
||||
}
|
||||
section:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
section:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
h1 {
|
||||
margin: 0 0 16px;
|
||||
padding: 0;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
p {
|
||||
margin: 12px 0 4px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 24px icon */
|
||||
.icon-24 svg {
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
vertical-align: -0.25em;
|
||||
}
|
||||
|
||||
/* Alert demo */
|
||||
.alert {
|
||||
position: relative;
|
||||
margin: 8px;
|
||||
padding: 16px;
|
||||
padding-left: 48px;
|
||||
background: #ba3329;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.alert + div {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.alert svg {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
font-size: 24px;
|
||||
line-height: 1em;
|
||||
margin: -0.5em 0 0;
|
||||
}
|
||||
|
||||
/* Checkbox component */
|
||||
.checkbox-container {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
cursor: pointer;
|
||||
/* color: #1769aa; */
|
||||
color: #626262;
|
||||
text-decoration: none;
|
||||
}
|
||||
.checkbox:hover {
|
||||
color: #ba3329;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.checkbox svg {
|
||||
margin-right: 4px;
|
||||
color: #afafaf;
|
||||
font-size: 24px;
|
||||
line-height: 1em;
|
||||
vertical-align: -0.25em;
|
||||
}
|
||||
.checkbox--checked svg {
|
||||
color: #327335;
|
||||
}
|
||||
.checkbox:hover svg {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.checkbox-container small {
|
||||
margin-left: 4px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Inline demo */
|
||||
.inline-demo svg {
|
||||
color: #06a;
|
||||
margin: 0 8px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
}
|
||||
.inline-demo div {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.inline-demo div:before,
|
||||
.inline-demo div:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0;
|
||||
border-top: 1px dashed #506874;
|
||||
opacity: 0.5;
|
||||
z-index: -1;
|
||||
}
|
||||
.inline-demo div:before {
|
||||
bottom: 5px;
|
||||
}
|
||||
.inline-demo div:after {
|
||||
bottom: 7px;
|
||||
border-top-color: #ba3329;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<template>
|
||||
<div class="checkbox-container">
|
||||
<a href="# " :class="className" @click="check">
|
||||
<Icon :icon="icon" />{{ text }}
|
||||
</a>
|
||||
<small>{{ hint }}</small>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Icon } from '@iconify/vue2/dist/offline';
|
||||
import checkedIcon from '@iconify-icons/bx/bx-checkbox-checked';
|
||||
import uncheckedIcon from '@iconify-icons/bx/bx-checkbox';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
props: {
|
||||
text: String,
|
||||
hint: String,
|
||||
checked: Boolean,
|
||||
},
|
||||
methods: {
|
||||
check(event) {
|
||||
event.preventDefault();
|
||||
this.state = !this.isChecked;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
state: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isChecked() {
|
||||
return this.state === null ? this.checked === true : this.state;
|
||||
},
|
||||
className() {
|
||||
return (
|
||||
'checkbox checkbox--' +
|
||||
(this.isChecked ? 'checked' : 'unchecked')
|
||||
);
|
||||
},
|
||||
icon() {
|
||||
return this.isChecked ? checkedIcon : uncheckedIcon;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<template>
|
||||
<section class="inline-demo">
|
||||
<h1>Inline demo</h1>
|
||||
<div>
|
||||
Block icon (behaving like image):
|
||||
<OfflineIcon icon="experiment2" />
|
||||
<FullIcon icon="experiment2" id="inline-demo-block-full" />
|
||||
</div>
|
||||
<div>
|
||||
Inline icon (behaving line text / icon font):
|
||||
<OfflineIcon icon="experiment2" :inline="true" />
|
||||
<FullIcon
|
||||
icon="experiment2"
|
||||
:inline="true"
|
||||
id="inline-demo-inline-full"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Icon as OfflineIcon } from '@iconify/vue2/dist/offline';
|
||||
import { Icon as FullIcon } from '@iconify/vue2';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
OfflineIcon,
|
||||
FullIcon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<template>
|
||||
<section class="icon-24">
|
||||
<h1>Usage (full module)</h1>
|
||||
<div>
|
||||
Icon referenced by name:
|
||||
<Icon icon="mdi:home" />
|
||||
</div>
|
||||
<div class="alert">
|
||||
<Icon icon="mdi-light:alert" />Important notice with alert icon!
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Icon } from '@iconify/vue2';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<template>
|
||||
<section class="icon-24">
|
||||
<h1>Usage (full module, offline mode)</h1>
|
||||
<div>
|
||||
Icon referenced by name:
|
||||
<Icon icon="demo" />
|
||||
</div>
|
||||
<div>
|
||||
Icon referenced by object:
|
||||
<Icon v-bind:icon="demoIcon" />
|
||||
</div>
|
||||
<div>
|
||||
2 icons imported from icon set:
|
||||
<Icon icon="alert1" />
|
||||
<Icon icon="link1" />
|
||||
</div>
|
||||
<div class="alert">
|
||||
<Icon :icon="alertIcon" />Important notice with alert icon!
|
||||
</div>
|
||||
<div>
|
||||
Icon without size, scaled to 48px with CSS:
|
||||
<Icon :icon="demoIcon" height="unset" style="height: 48px" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Icon } from '@iconify/vue2';
|
||||
import demoIcon from '@iconify-icons/dashicons/info-outline';
|
||||
import alertIcon from '@iconify-icons/bx/bx-error';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
demoIcon,
|
||||
alertIcon,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<template>
|
||||
<section class="icon-24">
|
||||
<h1>Usage (offline module)</h1>
|
||||
<div>
|
||||
Icon referenced by name:
|
||||
<Icon icon="demo" />
|
||||
</div>
|
||||
<div>
|
||||
Icon referenced by object:
|
||||
<Icon v-bind:icon="demoIcon" />
|
||||
</div>
|
||||
<div>
|
||||
2 icons imported from icon set:
|
||||
<Icon icon="offline-mdi-light:account-alert" />
|
||||
<Icon icon="offline-mdi-light:link" />
|
||||
</div>
|
||||
<div class="alert">
|
||||
<Icon :icon="alertIcon" />Important notice with alert icon!
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Icon } from '@iconify/vue2/dist/offline';
|
||||
import demoIcon from '@iconify-icons/dashicons/info-outline';
|
||||
import alertIcon from '@iconify-icons/bx/bx-error';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
demoIcon,
|
||||
alertIcon,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import Vue from 'vue';
|
||||
import App from './App.vue';
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
}).$mount('#app');
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<template>
|
||||
<section>
|
||||
<h1>Class (components/Class.vue)</h1>
|
||||
<div>
|
||||
Default icon:
|
||||
<Icon icon="experiment" />
|
||||
</div>
|
||||
<div>
|
||||
Red color:
|
||||
<Icon icon="experiment" class="red-color" />
|
||||
<Icon icon="experiment" :class="redClass" />
|
||||
</div>
|
||||
<div>
|
||||
Red color and 20px:
|
||||
<Icon icon="experiment" class="red-color big-icon" />
|
||||
<Icon icon="experiment" :class="[redClass, bigIcon]" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue } from 'vue-property-decorator';
|
||||
import { Icon } from '@iconify/vue2';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
redClass: 'red-color',
|
||||
bigIcon: 'big-icon',
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.red-color {
|
||||
color: red;
|
||||
}
|
||||
.big-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
<template>
|
||||
<section>
|
||||
<h1>Inline (components/Inline.vue)</h1>
|
||||
<div>
|
||||
Block icon (behaving like image):
|
||||
<Icon id="inline-demo-block-offline" icon="experiment2" />
|
||||
</div>
|
||||
<div>
|
||||
Inline icon (behaving line text / icon font):
|
||||
<Icon
|
||||
id="inline-demo-block-full"
|
||||
icon="experiment2"
|
||||
:inline="true"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
Using "vertical-align: 0" to override inline attribute:
|
||||
<Icon
|
||||
id="inline-demo-inline-offline"
|
||||
icon="experiment2"
|
||||
:style="{ verticalAlign: 0 }"
|
||||
/>
|
||||
<Icon
|
||||
id="inline-demo-inline-full"
|
||||
icon="experiment2"
|
||||
:style="{ verticalAlign: 0 }"
|
||||
:inline="true"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue } from 'vue-property-decorator';
|
||||
import { Icon } from '@iconify/vue2';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
svg {
|
||||
color: #06a;
|
||||
margin-right: 8px;
|
||||
/* box-shadow: 0 0 0 1px #06a inset; */
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
}
|
||||
div {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
div:before,
|
||||
div:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0;
|
||||
border-top: 1px dashed #506874;
|
||||
opacity: 0.5;
|
||||
z-index: -1;
|
||||
}
|
||||
div:before {
|
||||
bottom: 5px;
|
||||
}
|
||||
div:after {
|
||||
bottom: 7px;
|
||||
border-top-color: #ba3329;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
<template>
|
||||
<section>
|
||||
<h1>Style (components/Style.vue)</h1>
|
||||
<div>
|
||||
Default icon:
|
||||
<Icon icon="experiment" />
|
||||
</div>
|
||||
<div>
|
||||
Red color:
|
||||
<Icon icon="experiment" color="red" />
|
||||
<Icon icon="experiment" :style="{ color: 'red' }" />
|
||||
<Icon icon="experiment" style="color: red" />
|
||||
<Icon icon="experiment" :style="redIcon" />
|
||||
</div>
|
||||
<div>
|
||||
40px:
|
||||
<Icon icon="experiment" height="40" />
|
||||
<Icon icon="experiment" :width="40" />
|
||||
<Icon icon="experiment" :style="{ fontSize: '40px' }" />
|
||||
<Icon icon="experiment" style="font-size: 40px" />
|
||||
<Icon icon="experiment" :style="bigIcon" />
|
||||
</div>
|
||||
<div>
|
||||
Red and 40px:
|
||||
<Icon icon="experiment" height="40" color="red" />
|
||||
<Icon icon="experiment" :width="40" :style="redIcon" />
|
||||
<Icon
|
||||
icon="experiment"
|
||||
:style="{ color: 'red', fontSize: '40px' }"
|
||||
/>
|
||||
<Icon icon="experiment" style="color: red; font-size: 40px" />
|
||||
<Icon icon="experiment" :style="[bigIcon, redIcon]" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue } from 'vue-property-decorator';
|
||||
import { Icon } from '@iconify/vue2';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
redIcon: {
|
||||
color: 'red',
|
||||
},
|
||||
bigIcon: {
|
||||
fontSize: '40px',
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
<template>
|
||||
<section>
|
||||
<h1>Transformations (components/Transform.vue)</h1>
|
||||
<div>
|
||||
Default icon:
|
||||
<Icon icon="experiment" />
|
||||
</div>
|
||||
<div>
|
||||
Flip horizontally:
|
||||
<Icon icon="experiment" :hFlip="true" />
|
||||
<Icon icon="experiment" flip="horizontal" />
|
||||
<Icon icon="experiment" :horizontal-flip="true" />
|
||||
<Icon icon="experiment" :h-flip="true" />
|
||||
</div>
|
||||
<div>
|
||||
Flip vertically:
|
||||
<Icon icon="experiment" :vFlip="true" />
|
||||
<Icon icon="experiment" flip="vertical" />
|
||||
<Icon icon="experiment" :vertical-flip="true" />
|
||||
<Icon icon="experiment" :v-flip="true" />
|
||||
</div>
|
||||
<div>
|
||||
Flip horizontally and vertically:
|
||||
<Icon icon="experiment" :hFlip="true" :vFlip="true" />
|
||||
<Icon icon="experiment" flip="horizontal,vertical" />
|
||||
<Icon
|
||||
icon="experiment"
|
||||
:horizontal-flip="true"
|
||||
:vertical-flip="true"
|
||||
/>
|
||||
<Icon icon="experiment" :h-flip="true" :v-flip="true" />
|
||||
</div>
|
||||
<div>
|
||||
90° rotation:
|
||||
<Icon icon="experiment" :rotate="1" />
|
||||
<Icon icon="experiment" rotate="90deg" />
|
||||
<Icon icon="experiment" rotate="25%" />
|
||||
</div>
|
||||
<div>
|
||||
180° rotation:
|
||||
<Icon icon="experiment" :rotate="2" />
|
||||
<Icon icon="experiment" rotate="180deg" />
|
||||
<Icon icon="experiment" rotate="50%" />
|
||||
</div>
|
||||
<div>
|
||||
270° rotation:
|
||||
<Icon icon="experiment" :rotate="3" />
|
||||
<Icon icon="experiment" rotate="270deg" />
|
||||
<Icon icon="experiment" rotate="-25%" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue } from 'vue-property-decorator';
|
||||
import { Icon } from '@iconify/vue2';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
svg {
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
<template>
|
||||
<section>
|
||||
<h1>Vue attributes (components/VueAttributes.vue)</h1>
|
||||
<div>
|
||||
Icon with color (red):
|
||||
<Icon :icon="icon" color="red" :inline="true" />
|
||||
</div>
|
||||
<div>
|
||||
Icon size (2em):
|
||||
<IconifyIcon icon="admin-users" height="2em" />
|
||||
</div>
|
||||
<div>
|
||||
Icon style as string (red):
|
||||
<IconifyIcon icon="admin-users" style="color: red" />
|
||||
</div>
|
||||
<div>
|
||||
Inline icon with vertical-align style as string (aligned to top):
|
||||
<IconifyIcon
|
||||
icon="admin-users"
|
||||
style="vertical-align: 0.25em"
|
||||
:inline="true"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
Inline icon with bound style as object (purple, 2em, no alignment):
|
||||
<IconifyIcon
|
||||
icon="admin-users"
|
||||
v-bind:style="icon1StyleObj"
|
||||
:inline="true"
|
||||
color="green"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
Inline icon with bound style as string (purple, 2em, no alignment):
|
||||
<IconifyIcon
|
||||
icon="admin-users"
|
||||
v-bind:style="icon1StyleStr"
|
||||
:inline="true"
|
||||
color="green"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
Combined styles (green, 2em, shadow):
|
||||
<IconifyIcon
|
||||
icon="admin-users"
|
||||
v-bind:style="[boxShadowStyleObj, fontSizeStyleObj2]"
|
||||
:inline="true"
|
||||
color="green"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
Dynamic style (red / green, shadow):
|
||||
<IconifyIcon
|
||||
icon="admin-users"
|
||||
v-bind:style="[boxShadowStyleObj, dynamicStyleObj]"
|
||||
:inline="true"
|
||||
v-on:click="
|
||||
dynamicStyleObj.color =
|
||||
dynamicStyleObj.color === 'red' ? 'green' : 'red'
|
||||
"
|
||||
/> (click it!)
|
||||
</div>
|
||||
<div>
|
||||
Dynamic style (shadow / color):
|
||||
<IconifyIcon
|
||||
icon="admin-users"
|
||||
v-bind:style="[
|
||||
showShadow ? boxShadowStyleObj : dynamicStyleObj,
|
||||
]"
|
||||
:inline="true"
|
||||
v-on:click="showShadow = !showShadow"
|
||||
/> (click it!)
|
||||
</div>
|
||||
<div>
|
||||
Reference:
|
||||
<IconifyIcon
|
||||
icon="admin-users"
|
||||
ref="icon1"
|
||||
@click="logReference"
|
||||
/> (click to log)
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue } from 'vue-property-decorator';
|
||||
import { Icon, addIcon } from '@iconify/vue2';
|
||||
import adminUsers from '@iconify-icons/dashicons/admin-users';
|
||||
|
||||
addIcon('admin-users', adminUsers);
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
icon: adminUsers,
|
||||
icon1StyleObj: {
|
||||
fontSize: '2em',
|
||||
color: 'purple',
|
||||
verticalAlign: 0,
|
||||
},
|
||||
icon1StyleStr: 'color: purple; vertical-align: 0; font-size: 2em;',
|
||||
colorStyleStr: 'color: purple',
|
||||
colorStyleObj: {
|
||||
color: 'purple',
|
||||
},
|
||||
fontSizeStyleStr: 'font-size: 2em',
|
||||
fontSizeStyleObj: {
|
||||
fontSize: '2em',
|
||||
},
|
||||
fontSizeStyleObj2: {
|
||||
'font-size': '2em',
|
||||
},
|
||||
boxShadowStyleStr: 'box-shadow: 0 0 2px #000;',
|
||||
boxShadowStyleObj: {
|
||||
boxShadow: '0 0 2px #000',
|
||||
},
|
||||
dynamicStyleObj: {
|
||||
color: 'red',
|
||||
},
|
||||
showShadow: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
logReference: function () {
|
||||
console.log('References:', this.$refs);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<template>
|
||||
<Icon icon="customizer" height="20" :style="{ color: 'purple' }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Icon, addIcon } from '@iconify/vue2';
|
||||
import adminCustomizer from '@iconify-icons/dashicons/admin-customizer';
|
||||
|
||||
addIcon('customizer', adminCustomizer);
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<template>
|
||||
<Icon icon="customizer" height="20" :style="{ color: 'blue' }" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import { Icon, addIcon } from '@iconify/vue2';
|
||||
import adminCustomizer from '@iconify-icons/dashicons/admin-customizer';
|
||||
|
||||
addIcon('customizer', adminCustomizer);
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<template>
|
||||
<Icon :icon="icons.chart" height="20" :style="{ color: 'green' }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Icon } from '@iconify/vue2';
|
||||
import adminCustomizer from '@iconify-icons/dashicons/admin-customizer';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: {
|
||||
chart: adminCustomizer,
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<template>
|
||||
<Icon :icon="icons.chart" height="20" :style="{ color: 'red' }" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import { Icon } from '@iconify/vue2';
|
||||
import adminCustomizer from '@iconify-icons/dashicons/admin-customizer';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: {
|
||||
chart: adminCustomizer,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import { defineConfig } from 'vite';
|
||||
import { createVuePlugin } from 'vite-plugin-vue2';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [createVuePlugin()],
|
||||
});
|
||||
4
components/ember/.gitignore
vendored
4
components/ember/.gitignore
vendored
|
|
@ -1,4 +0,0 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
lib
|
||||
addon
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
.DS_Store
|
||||
api-extractor.json
|
||||
rollup.config.js
|
||||
tsconfig.json
|
||||
build.js
|
||||
cleanup.js
|
||||
node_modules
|
||||
src
|
||||
lib
|
||||
tests
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
|
||||
"mainEntryPointFilePath": "lib/iconify-icon.d.ts",
|
||||
"bundledPackages": [
|
||||
"@iconify/core",
|
||||
"@iconify/utils",
|
||||
"@cyberalien/redundancy",
|
||||
"@iconify/api-redundancy"
|
||||
],
|
||||
"compiler": {},
|
||||
"apiReport": {
|
||||
"enabled": false
|
||||
},
|
||||
"docModel": {
|
||||
"enabled": false
|
||||
},
|
||||
"dtsRollup": {
|
||||
"enabled": true,
|
||||
"untrimmedFilePath": "<projectFolder>/addon/components/iconify-icon.d.ts"
|
||||
},
|
||||
"tsdocMetadata": {
|
||||
"enabled": false
|
||||
},
|
||||
"messages": {
|
||||
"compilerMessageReporting": {
|
||||
"default": {
|
||||
"logLevel": "warning"
|
||||
}
|
||||
},
|
||||
"extractorMessageReporting": {
|
||||
"default": {
|
||||
"logLevel": "warning"
|
||||
},
|
||||
"ae-missing-release-tag": {
|
||||
"logLevel": "none"
|
||||
}
|
||||
},
|
||||
"tsdocMessageReporting": {
|
||||
"default": {
|
||||
"logLevel": "warning"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import Icon from '@iconify/ember/components/iconify-icon';
|
||||
export default Icon;
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
/* eslint-disable */
|
||||
const fs = require('fs');
|
||||
const child_process = require('child_process');
|
||||
|
||||
// List of commands to run
|
||||
const commands = [];
|
||||
|
||||
// Parse command line
|
||||
const compile = {
|
||||
lib: true,
|
||||
rollup: true,
|
||||
api: true,
|
||||
cleanup: true,
|
||||
};
|
||||
process.argv.slice(2).forEach((cmd) => {
|
||||
if (cmd.slice(0, 2) !== '--') {
|
||||
return;
|
||||
}
|
||||
const parts = cmd.slice(2).split('-');
|
||||
if (parts.length === 2) {
|
||||
// Parse 2 part commands like --with-lib
|
||||
const key = parts.pop();
|
||||
if (compile[key] === void 0) {
|
||||
return;
|
||||
}
|
||||
switch (parts.shift()) {
|
||||
case 'with':
|
||||
// enable module
|
||||
compile[key] = true;
|
||||
break;
|
||||
|
||||
case 'without':
|
||||
// disable module
|
||||
compile[key] = false;
|
||||
break;
|
||||
|
||||
case 'only':
|
||||
// disable other modules
|
||||
Object.keys(compile).forEach((key2) => {
|
||||
compile[key2] = key2 === key;
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Check if required modules in same monorepo are available
|
||||
const fileExists = (file) => {
|
||||
try {
|
||||
fs.statSync(file);
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
// Compile packages
|
||||
Object.keys(compile).forEach((key) => {
|
||||
if (compile[key]) {
|
||||
commands.push({
|
||||
cmd: 'npm',
|
||||
args: ['run', 'build:' + key],
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Run next command
|
||||
*/
|
||||
const next = () => {
|
||||
const item = commands.shift();
|
||||
if (item === void 0) {
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
if (item.cwd === void 0) {
|
||||
item.cwd = __dirname;
|
||||
}
|
||||
|
||||
const result = child_process.spawnSync(item.cmd, item.args, {
|
||||
cwd: item.cwd,
|
||||
stdio: 'inherit',
|
||||
});
|
||||
|
||||
if (result.status === 0) {
|
||||
process.nextTick(next);
|
||||
} else {
|
||||
process.exit(result.status);
|
||||
}
|
||||
};
|
||||
next();
|
||||
|
|
@ -1,163 +0,0 @@
|
|||
const fs = require('fs');
|
||||
|
||||
/**
|
||||
* Fix default export syntax
|
||||
*/
|
||||
function fixDefaultExport(filename) {
|
||||
const source = __dirname + '/' + filename;
|
||||
const data = fs.readFileSync(source, 'utf8');
|
||||
const search = 'IconifyIconComponent as default';
|
||||
if (data.indexOf(search) === -1) {
|
||||
console.log(`Exports are fine in ${filename}`);
|
||||
return;
|
||||
}
|
||||
|
||||
let foundMatch = 0;
|
||||
const lines = data.split(',').filter((line) => {
|
||||
if (line.trim() === search) {
|
||||
foundMatch++;
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
if (foundMatch !== 1) {
|
||||
throw new Error(`Error fixing exports in ${filename}`);
|
||||
}
|
||||
const newCode =
|
||||
lines.join(',') + '\nexport default IconifyIconComponent;\n';
|
||||
|
||||
fs.writeFileSync(source, newCode, 'utf8');
|
||||
console.log(`Fixed default export in ${filename}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore decorator in component
|
||||
*/
|
||||
function restoreDecorator(filename) {
|
||||
const source = __dirname + '/' + filename;
|
||||
let data = fs.readFileSync(source, 'utf8');
|
||||
|
||||
// Code to find/replace
|
||||
const decorateStart = 'var __decorate =';
|
||||
const decorateEnd = '};';
|
||||
|
||||
const decorate2Start =
|
||||
'function __decorate(decorators, target, key, desc) {';
|
||||
const decorate2End = '}';
|
||||
|
||||
const componentHeader =
|
||||
'export class IconifyIconComponent extends Component {';
|
||||
const componentHeader2 = 'class IconifyIconComponent extends Component {';
|
||||
const addedLine = '@tracked _counter = 0;';
|
||||
|
||||
const footerStart = `__decorate([`;
|
||||
const footerEnd = '], IconifyIconComponent.prototype, "_counter", void 0);';
|
||||
|
||||
// Check if already parsed
|
||||
if (
|
||||
data.indexOf(addedLine) !== -1 &&
|
||||
data.indexOf(decorateStart) === -1 &&
|
||||
data.indexOf(decorate2Start) === -1 &&
|
||||
data.indexOf(footerStart) === -1
|
||||
) {
|
||||
console.log(`${filename} is already cleaned up`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Split lines
|
||||
let lines = data.split('\n');
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {string} firstMatch First match, line must start with it
|
||||
* @param {string} lastMatch Last match, exact line
|
||||
* @param {number} middleCount Number of lines between start and end, all will be removed
|
||||
* @param {string} key Text for error message
|
||||
*/
|
||||
const removeLines = (firstMatch, lastMatch, middleCount, key) => {
|
||||
let found = false;
|
||||
let removed = 0;
|
||||
let replaced = false;
|
||||
|
||||
lines = lines.filter((line) => {
|
||||
if (replaced) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Check for start
|
||||
if (!found) {
|
||||
const trimmed = line.trim();
|
||||
if (trimmed.slice(0, firstMatch.length) === firstMatch) {
|
||||
found = true;
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
// Remove line?
|
||||
if (removed < middleCount) {
|
||||
removed++;
|
||||
return false;
|
||||
}
|
||||
|
||||
// Last line
|
||||
if (line.trim() !== lastMatch) {
|
||||
throw new Error(
|
||||
`Mismatch for last line for ${key} in ${filename}: "${line}"`
|
||||
);
|
||||
}
|
||||
replaced = true;
|
||||
return false;
|
||||
});
|
||||
|
||||
if (!found) {
|
||||
throw new Error(
|
||||
`Could not do replacement for ${key} in ${filename}`
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// Remove __decorate() polyfill
|
||||
if (data.indexOf(decorate2Start) !== -1) {
|
||||
removeLines(decorate2Start, decorate2End, 4, 'decorator polyfill 2');
|
||||
} else {
|
||||
removeLines(decorateStart, decorateEnd, 4, 'decorator polyfill');
|
||||
}
|
||||
|
||||
// Remove __decorate()
|
||||
removeLines(footerStart, footerEnd, 1, 'decorate()');
|
||||
|
||||
// Add decorator after class declaration
|
||||
let added = false;
|
||||
lines = lines.map((line) => {
|
||||
if (added) {
|
||||
return line;
|
||||
}
|
||||
const trimmed = line.trim();
|
||||
if (trimmed === componentHeader || trimmed === componentHeader2) {
|
||||
added = true;
|
||||
return line + '\n ' + addedLine;
|
||||
}
|
||||
return line;
|
||||
});
|
||||
if (!added) {
|
||||
throw new Error(`Could not find class declaration in ${filename}`);
|
||||
}
|
||||
|
||||
// Save file
|
||||
fs.writeFileSync(source, lines.join('\n'), 'utf8');
|
||||
console.log(`Cleaned up ${filename}`);
|
||||
}
|
||||
|
||||
function copyFile(source, target) {
|
||||
fs.writeFileSync(
|
||||
__dirname + '/' + target,
|
||||
fs.readFileSync(__dirname + '/' + source)
|
||||
);
|
||||
console.log(`Created ${target}`);
|
||||
}
|
||||
|
||||
restoreDecorator('lib/component.js');
|
||||
fixDefaultExport('addon/components/iconify-icon.js');
|
||||
restoreDecorator('addon/components/iconify-icon.js');
|
||||
copyFile('src/iconify-icon.hbs', 'addon/components/iconify-icon.hbs');
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
name: require('./package').name,
|
||||
};
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
MIT License
|
||||
|
||||
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
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
{
|
||||
"name": "@iconify/ember",
|
||||
"description": "Iconify icon component for Ember.",
|
||||
"author": "Vjacheslav Trushkin",
|
||||
"version": "2.1.0",
|
||||
"license": "MIT",
|
||||
"bugs": "https://github.com/iconify/iconify/issues",
|
||||
"homepage": "https://iconify.design/",
|
||||
"funding": "https://github.com/sponsors/cyberalien",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/iconify/iconify.git",
|
||||
"directory": "components/ember"
|
||||
},
|
||||
"keywords": [
|
||||
"ember-addon"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "node build",
|
||||
"build:lib": "tsc -b",
|
||||
"build:rollup": "rollup -c rollup.config.mjs",
|
||||
"build:api": "api-extractor run --local --verbose --config api-extractor.json",
|
||||
"build:cleanup": "node cleanup"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify/core": "workspace:^",
|
||||
"@iconify/utils": "workspace:^",
|
||||
"@microsoft/api-extractor": "^7.34.4",
|
||||
"@rollup/plugin-node-resolve": "^15.0.1",
|
||||
"@rollup/plugin-typescript": "^11.0.0",
|
||||
"rollup": "^3.20.2",
|
||||
"typescript": "^5.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@glimmer/component": "^1.1.2",
|
||||
"@glimmer/tracking": "^1.1.2",
|
||||
"@iconify/types": "workspace:^",
|
||||
"ember-cli-babel": "^7.26.11",
|
||||
"ember-cli-htmlbars": "^6.2.0"
|
||||
},
|
||||
"ember": {
|
||||
"edition": "octane"
|
||||
},
|
||||
"ember-addon": {}
|
||||
}
|
||||
|
|
@ -1,322 +0,0 @@
|
|||
# Iconify for Ember
|
||||
|
||||
Iconify for Ember is not yet another icon component! There are many of them already.
|
||||
|
||||
What you get with other components:
|
||||
|
||||
- Limited set of icons.
|
||||
- Large bundle size because all icons are bundled.
|
||||
|
||||
Iconify icon component is nothing like that. Component does not include any icon data, it is not tied to any specific icon set. Instead, all data is retrieved from public API on demand.
|
||||
|
||||
That means:
|
||||
|
||||
- One syntax for over 200,000 icons from 150+ 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://iconify.design/docs/icon-components/ember/).
|
||||
|
||||
## Installation
|
||||
|
||||
If you are using NPM:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify/ember
|
||||
```
|
||||
|
||||
If you are using Yarn:
|
||||
|
||||
```bash
|
||||
yarn add --dev @iconify/ember
|
||||
```
|
||||
|
||||
## Usage with API
|
||||
|
||||
Install `@iconify/ember` then use `IconifyIcon` component in template with icon name or data as "icon" parameter:
|
||||
|
||||
```hbs
|
||||
<IconifyIcon @icon='mdi-light:home' />
|
||||
```
|
||||
|
||||
Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over 200,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
|
||||
|
||||
## Offline usage
|
||||
|
||||
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 icons without Iconify API, [there are many other options available](https://iconify.design/docs/usage/).
|
||||
|
||||
## Icon Names
|
||||
|
||||
Icon name is a string. Few examples:
|
||||
|
||||
- `@api-provider:icon-set-prefix:icon-name`
|
||||
- `mdi-light:home` (in this example API provider is empty, so it is skipped)
|
||||
|
||||
It has 3 parts, separated by ":":
|
||||
|
||||
- provider points to API source. Starts with "@", can be empty (empty value is used for public Iconify API).
|
||||
- prefix is name of icon set.
|
||||
- name is name of icon.
|
||||
|
||||
See [Iconify for Ember icon names documentation](https://iconify.design/docs/icon-components/ember/icon-name.html) for more detailed explanation.
|
||||
|
||||
## Using icon data
|
||||
|
||||
Instead of icon name, you can pass icon data to component:
|
||||
|
||||
```hbs
|
||||
<IconifyIcon @icon={{chartIcon}} @height='24' />
|
||||
```
|
||||
|
||||
```js
|
||||
// Import icon
|
||||
import areaChartOutlined from '@iconify-icons/ant-design/area-chart-outlined';
|
||||
|
||||
// Create property for class, so icon data could be accessed in template as {{chartIcon}}
|
||||
export default class IconDemoComponent extends Component {
|
||||
chartIcon = areaChartOutlined;
|
||||
}
|
||||
```
|
||||
|
||||
See [icon packages documentation](https://iconify.design/docs/icons/) for more details.
|
||||
|
||||
### Vertical alignment
|
||||
|
||||
Icons have 2 modes: inline and block. Difference between modes is `vertical-align` that is added to inline icons.
|
||||
|
||||
Inline icons are aligned slightly below baseline, so they look centred compared to text, like glyph fonts.
|
||||
|
||||
Block icons do not have alignment, like images, which aligns them to baseline by default.
|
||||
|
||||
Alignment option was added to make icons look like continuation of text, behaving like glyph fonts. This should make migration from glyph fonts easier.
|
||||
|
||||
To toggle between block and inline modes, you can use boolean `inline` property:
|
||||
|
||||
```hbs
|
||||
<div>
|
||||
<p>
|
||||
Block:
|
||||
<IconifyIcon @icon='line-md:image-twotone' />
|
||||
<IconifyIcon @icon='mdi:account-box-outline' />
|
||||
</p>
|
||||
<p>
|
||||
Inline:
|
||||
<IconifyIcon @icon='line-md:image-twotone' @inline={{true}} />
|
||||
<IconifyIcon @icon='mdi:account-box-outline' @inline={{true}} />
|
||||
</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
Visual example to show the difference between inline and block modes:
|
||||
|
||||
|
||||
|
||||
## Icon component properties
|
||||
|
||||
`icon` property is mandatory. It tells component what icon to render. If the property value is invalid, the component will render an empty icon. The value can be a string containing the icon name (icon must be registered before use by calling `addIcon` or `addCollection`, see instructions above) or an object containing the icon data.
|
||||
|
||||
Make sure you add `@` before all property names because those are component properties, not element properties.
|
||||
|
||||
The icon component has the following optional properties:
|
||||
|
||||
- `inline`. Changes icon behaviour to match icon fonts. See "Inline icon" section below.
|
||||
- `width` and `height`. Icon dimensions. The default values are "1em" for both. See "Dimensions" section below.
|
||||
- `color`. Icon colour. This is the same as setting colour in style. See "Icon colour" section below.
|
||||
- `flip`, `hFlip`, `vFlip`. Flip icon horizontally and/or vertically. See "Transformations" section below.
|
||||
- `rotate`. Rotate icon by 90, 180 or 270 degrees. See "Transformations" section below.
|
||||
- `align`, `vAlign`, `hAlign`, `slice`. Icon alignment. See "Alignment" section below.
|
||||
- `onLoad`. Callback function that is called when icon data has been loaded. See "onLoad" section below.
|
||||
|
||||
### Other properties and events
|
||||
|
||||
You can pass any other properties as element properties (without `@` before name), they will be passed to `SVG` element.
|
||||
|
||||
### Dimensions
|
||||
|
||||
By default, icon height is "1em". With is dynamic, calculated using the icon's width to height ratio.
|
||||
|
||||
There are several ways to change icon dimensions:
|
||||
|
||||
- Setting `font-size` in style.
|
||||
- Setting `width` and/or `height` property.
|
||||
|
||||
Values for `width` and `height` can be numbers or strings.
|
||||
|
||||
If you set only one dimension, another dimension will be calculated using the icon's width to height ratio. For example, if the icon size is 16 x 24, you set the height to 48, the width will be set to 32. Calculations work not only with numbers, but also with string values.
|
||||
|
||||
#### Dimensions as numbers
|
||||
|
||||
You can use numbers for `width` and `height`.
|
||||
|
||||
```hbs
|
||||
<IconifyIcon @icon='mdi-light:home' @height={{24}} />
|
||||
```
|
||||
|
||||
```hbs
|
||||
<IconifyIcon @icon='mdi-light:home' @width={{16}} @height={{16}} />
|
||||
```
|
||||
|
||||
Number values are treated as pixels. That means in examples above, values are identical to "24px" and "16px".
|
||||
|
||||
#### Dimensions as strings without units
|
||||
|
||||
If you use strings without units, they are treated the same as numbers in an example above.
|
||||
|
||||
```hbs
|
||||
<IconifyIcon @icon='mdi-light:home' @height='24' />
|
||||
```
|
||||
|
||||
```hbs
|
||||
<IconifyIcon @icon='mdi-light:home' @width='16' @height='16' />
|
||||
```
|
||||
|
||||
#### Dimensions as strings with units
|
||||
|
||||
You can use units in width and height values:
|
||||
|
||||
```hbs
|
||||
<IconifyIcon @icon='mdi-light:home' @height='2em' />
|
||||
```
|
||||
|
||||
Be careful when using `calc`, view port based units or percentages. In SVG element they might not behave the way you expect them to behave and when using such units, you should consider settings both width and height.
|
||||
|
||||
#### Dimensions as 'auto'
|
||||
|
||||
Keyword "auto" sets dimensions to the icon's `viewBox` dimensions. For example, for 24 x 24 icon using `@height="auto"` sets height to 24 pixels.
|
||||
|
||||
```hbs
|
||||
<IconifyIcon @icon='mdi-light:home' @height='auto' />
|
||||
```
|
||||
|
||||
### Icon colour
|
||||
|
||||
There are two types of icons: icons that do not have a palette and icons that do have a palette.
|
||||
|
||||
Icons that do have a palette, such as emojis, cannot be customised. Setting colour to such icons will not change anything.
|
||||
|
||||
Icons that do not have a palette can be customised. By default, colour is set to "currentColor", which means the icon's colour matches text colour. To change the colour you can:
|
||||
|
||||
- Set `color` style or use stylesheet to target icon. If you are using the stylesheet, target `svg` element.
|
||||
- Add `color` property.
|
||||
|
||||
Examples:
|
||||
|
||||
Using `color` property:
|
||||
|
||||
```hbs
|
||||
<IconifyIcon @icon='eva:alert-triangle-fill' @color='red' />
|
||||
<IconifyIcon @icon='eva:alert-triangle-fill' @color='#f00' />
|
||||
```
|
||||
|
||||
Using inline style:
|
||||
|
||||
```hbs
|
||||
<IconifyIcon @icon='eva:alert-triangle-fill' style='color: red;' />
|
||||
```
|
||||
|
||||
Using stylesheet:
|
||||
|
||||
```hbs
|
||||
<IconifyIcon @icon='eva:alert-triangle-fill' class='red-icon' />
|
||||
```
|
||||
|
||||
```css
|
||||
.red-icon {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
### Transformations
|
||||
|
||||
You can rotate and flip the icon.
|
||||
|
||||
This might seem redundant because icon can also be rotated and flipped using CSS transformations. So why do transformation properties exist? Because it is a different type of transformation.
|
||||
|
||||
- CSS transformations transform the entire icon.
|
||||
- Icon transformations transform the contents of the icon.
|
||||
|
||||
If you have a square icon, this makes no difference. However, if you have an icon that has different width and height values, it makes a huge difference.
|
||||
|
||||
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://iconify.design/docs/icon-components/ember/transform.html) for more details.
|
||||
|
||||
#### Flipping an icon
|
||||
|
||||
There are several properties available to flip an icon:
|
||||
|
||||
- `hFlip`: boolean property, flips icon horizontally.
|
||||
- `vFlip`: boolean property, flips icon vertically.
|
||||
- `flip`: shorthand string property, can flip icon horizontally and/or vertically.
|
||||
|
||||
Examples:
|
||||
|
||||
Flip an icon horizontally:
|
||||
|
||||
```hbs
|
||||
<IconifyIcon @icon='eva:alert-triangle-fill' @hFlip={{true}} />
|
||||
<IconifyIcon @icon='eva:alert-triangle-fill' @flip='horizontal' />
|
||||
```
|
||||
|
||||
Flip an icon vertically:
|
||||
|
||||
```hbs
|
||||
<IconifyIcon @icon='eva:alert-triangle-fill' @vFlip={{true}} />
|
||||
<IconifyIcon @icon='eva:alert-triangle-fill' @flip='vertical' />
|
||||
```
|
||||
|
||||
Flip an icon horizontally and vertically (the same as 180 degrees rotation):
|
||||
|
||||
```hbs
|
||||
<IconifyIcon @icon='eva:alert-triangle-fill' @hFlip={{true}} @vFlip={{true}} />
|
||||
<IconifyIcon @icon='eva:alert-triangle-fill' @flip='horizontal,vertical' />
|
||||
```
|
||||
|
||||
#### Rotating an icon
|
||||
|
||||
An icon can be rotated by 90, 180 and 270 degrees. Only contents of the icon are rotated.
|
||||
|
||||
To rotate an icon, use `rotate` property. Value can be a string (degrees or percentages) or a number.
|
||||
|
||||
Number values are 1 for 90 degrees, 2 for 180 degrees, 3 for 270 degrees.
|
||||
|
||||
Examples of 90 degrees rotation:
|
||||
|
||||
```hbs
|
||||
<IconifyIcon @icon='eva:alert-triangle-fill' @rotate={{1}} />
|
||||
<IconifyIcon @icon='eva:alert-triangle-fill' @rotate='90deg' />
|
||||
<IconifyIcon @icon='eva:alert-triangle-fill' @rotate='25%' />
|
||||
```
|
||||
|
||||
### onLoad
|
||||
|
||||
`onLoad` property is an optional callback function. It is called when icon data has been loaded.
|
||||
|
||||
It is not an event, such as `onClick` event for links, it is a simple callback function.
|
||||
|
||||
When `onLoad` is called:
|
||||
|
||||
- If value of icon property is an object, `onLoad` is not called.
|
||||
- If value of icon property is a string and icon data is available, `onLoad` is called on first render.
|
||||
- If value of icon property is a string and icon data is not available, `onLoad` is called on first re-render after icon data is retrieved from API.
|
||||
|
||||
What is the purpose of `onLoad`? To let you know when Icon component renders an icon and when it does not render anything. This allows you to do things like adding class name for parent element, such as "container--with-icon" that modify layout if icon is being displayed.
|
||||
|
||||
## Full documentation
|
||||
|
||||
For extended documentation visit [Iconify for Ember documentation](https://iconify.design/docs/icon-components/ember/).
|
||||
|
||||
## License
|
||||
|
||||
Ember component is released with MIT license.
|
||||
|
||||
© 2021-PRESENT Vjacheslav Trushkin
|
||||
|
||||
See [Iconify icon sets page](https://icon-sets.iconify.design/) for list of collections and their licenses.
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import typescript from '@rollup/plugin-typescript';
|
||||
|
||||
// Write all packages
|
||||
const config = [
|
||||
{
|
||||
input: 'src/iconify-icon.ts',
|
||||
output: [
|
||||
{
|
||||
file: 'addon/components/iconify-icon.js',
|
||||
format: 'esm',
|
||||
},
|
||||
],
|
||||
external: ['@ember/template', '@glimmer/component', '@glimmer/tracking'],
|
||||
plugins: [
|
||||
resolve({
|
||||
browser: true,
|
||||
extensions: ['.ts', '.mjs', '.js'],
|
||||
}),
|
||||
typescript(),
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default config;
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
import Component from '@glimmer/component';
|
||||
import { tracked } from '@glimmer/tracking';
|
||||
|
||||
// Core
|
||||
import type { IconifyIconName } from '@iconify/utils/lib/icon/name';
|
||||
import { stringToIcon } from '@iconify/utils/lib/icon/name';
|
||||
import { getIconData } from '@iconify/core/lib/storage/functions';
|
||||
import type { IconifyIcon } from '@iconify/utils/lib/icon/defaults';
|
||||
|
||||
// API
|
||||
import { loadIcon } from '@iconify/core/lib/api/icons';
|
||||
|
||||
// Component stuff
|
||||
import type { IconifyIconProps } from './props';
|
||||
import type { RenderResult } from './render';
|
||||
import { render } from './render';
|
||||
|
||||
/**
|
||||
* Type for loading status
|
||||
*/
|
||||
interface CurrentIconData {
|
||||
name: string;
|
||||
className: string;
|
||||
|
||||
// Data if icon has been loaded
|
||||
data?: IconifyIcon;
|
||||
}
|
||||
|
||||
/**
|
||||
* Empty icon
|
||||
*/
|
||||
const emptyIcon: RenderResult = {
|
||||
width: 16,
|
||||
height: 16,
|
||||
viewBox: '0 0 16 16',
|
||||
className: '',
|
||||
body: '',
|
||||
};
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export class IconifyIconComponent extends Component<IconifyIconProps> {
|
||||
// Dummy variable to force re-render
|
||||
// @ts-ignore
|
||||
@tracked _counter = 0;
|
||||
|
||||
// Currently visible icon data, null if rendering object
|
||||
_icon: CurrentIconData | null = null;
|
||||
|
||||
/**
|
||||
* Render
|
||||
*/
|
||||
get data(): RenderResult {
|
||||
// Mention _counter to re-render
|
||||
this._counter;
|
||||
|
||||
// Check icon
|
||||
const icon = this.args.icon;
|
||||
|
||||
// Object
|
||||
if (
|
||||
typeof icon === 'object' &&
|
||||
icon !== null &&
|
||||
typeof icon.body === 'string'
|
||||
) {
|
||||
// Reset current icon
|
||||
this._icon = null;
|
||||
|
||||
// Render object
|
||||
return render(icon, this.args, '');
|
||||
}
|
||||
|
||||
// Already loaded
|
||||
if (this._icon) {
|
||||
const loaded = this._icon;
|
||||
if (loaded.name === icon && loaded.data) {
|
||||
return render(loaded.data, this.args, loaded.className);
|
||||
}
|
||||
}
|
||||
|
||||
// Invalid icon?
|
||||
let iconName: IconifyIconName | null;
|
||||
if (
|
||||
typeof icon !== 'string' ||
|
||||
(iconName = stringToIcon(icon, false, true)) === null
|
||||
) {
|
||||
// Reset current icon, return empty icon
|
||||
this._icon = null;
|
||||
return emptyIcon;
|
||||
}
|
||||
|
||||
// Get class name
|
||||
let className = 'iconify';
|
||||
if (iconName.prefix !== '') {
|
||||
className += ' iconify--' + iconName.prefix;
|
||||
}
|
||||
if (iconName.provider !== '') {
|
||||
className += ' iconify--' + iconName.provider;
|
||||
}
|
||||
|
||||
// Load icon
|
||||
const data = getIconData(iconName);
|
||||
if (!data) {
|
||||
// Icon needs to be loaded
|
||||
if (!this._icon || this._icon.name !== icon) {
|
||||
// New icon to load
|
||||
this._icon = {
|
||||
name: icon,
|
||||
className,
|
||||
};
|
||||
|
||||
loadIcon(iconName)
|
||||
.then((data) => {
|
||||
if (!this.isDestroyed && this._icon?.name === icon) {
|
||||
// Loaded
|
||||
this._icon = {
|
||||
name: icon,
|
||||
className,
|
||||
data,
|
||||
};
|
||||
this._counter++;
|
||||
|
||||
if (this.args.onLoad) {
|
||||
this.args.onLoad(icon);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// Failed to load icon
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// Got icon data
|
||||
this._icon = {
|
||||
name: icon,
|
||||
className,
|
||||
data,
|
||||
};
|
||||
return render(data, this.args, className);
|
||||
}
|
||||
|
||||
return emptyIcon;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
xmlns:xlink='http://www.w3.org/1999/xlink'
|
||||
aria-hidden='true'
|
||||
role='img'
|
||||
width={{this.data.width}}
|
||||
height={{this.data.height}}
|
||||
viewBox={{this.data.viewBox}}
|
||||
style={{this.data.style}}
|
||||
class={{this.data.className}}
|
||||
...attributes
|
||||
>
|
||||
{{{this.data.body}}}
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 307 B |
|
|
@ -1,246 +0,0 @@
|
|||
import type { IconifyJSON, IconifyIcon } from '@iconify/types';
|
||||
|
||||
// Core
|
||||
import type { IconifyIconName } from '@iconify/utils/lib/icon/name';
|
||||
import type { IconifyIconSize } from '@iconify/utils/lib/customisations/defaults';
|
||||
import type { IconifyStorageFunctions } from '@iconify/core/lib/storage/functions';
|
||||
import {
|
||||
iconLoaded,
|
||||
getIcon,
|
||||
addIcon,
|
||||
addCollection,
|
||||
allowSimpleNames,
|
||||
} from '@iconify/core/lib/storage/functions';
|
||||
import { listIcons } from '@iconify/core/lib/storage/storage';
|
||||
import type { IconifyBuilderFunctions } from '@iconify/core/lib/builder/functions';
|
||||
import { iconToSVG as buildIcon } from '@iconify/utils/lib/svg/build';
|
||||
import { replaceIDs } from '@iconify/utils/lib/svg/id';
|
||||
import { calculateSize } from '@iconify/utils/lib/svg/size';
|
||||
import type { IconifyIconBuildResult } from '@iconify/utils/lib/svg/build';
|
||||
|
||||
// API
|
||||
import type {
|
||||
IconifyAPIFunctions,
|
||||
IconifyAPIInternalFunctions,
|
||||
IconifyAPIQueryParams,
|
||||
IconifyAPICustomQueryParams,
|
||||
} from '@iconify/core/lib/api/functions';
|
||||
import type {
|
||||
IconifyAPIModule,
|
||||
IconifyAPISendQuery,
|
||||
IconifyAPIPrepareIconsQuery,
|
||||
} from '@iconify/core/lib/api/modules';
|
||||
import { setAPIModule } from '@iconify/core/lib/api/modules';
|
||||
import type {
|
||||
PartialIconifyAPIConfig,
|
||||
IconifyAPIConfig,
|
||||
GetAPIConfig,
|
||||
} from '@iconify/core/lib/api/config';
|
||||
import {
|
||||
addAPIProvider,
|
||||
getAPIConfig,
|
||||
listAPIProviders,
|
||||
} from '@iconify/core/lib/api/config';
|
||||
import {
|
||||
fetchAPIModule,
|
||||
setFetch,
|
||||
getFetch,
|
||||
} from '@iconify/core/lib/api/modules/fetch';
|
||||
import type {
|
||||
IconifyIconLoaderCallback,
|
||||
IconifyIconLoaderAbort,
|
||||
} from '@iconify/core/lib/api/icons';
|
||||
import { loadIcons, loadIcon } from '@iconify/core/lib/api/icons';
|
||||
import { sendAPIQuery } from '@iconify/core/lib/api/query';
|
||||
|
||||
// Cache
|
||||
import { initBrowserStorage } from '@iconify/core/lib/browser-storage';
|
||||
import { toggleBrowserCache } from '@iconify/core/lib/browser-storage/functions';
|
||||
import type {
|
||||
IconifyBrowserCacheType,
|
||||
IconifyBrowserCacheFunctions,
|
||||
} from '@iconify/core/lib/browser-storage/functions';
|
||||
|
||||
// Properties
|
||||
import type {
|
||||
IconifyIconOnLoad,
|
||||
IconifyIconCustomisations,
|
||||
IconifyIconProps,
|
||||
} from './props';
|
||||
|
||||
// Component
|
||||
import { IconifyIconComponent } from './component';
|
||||
|
||||
/**
|
||||
* Export required types
|
||||
*/
|
||||
// Function sets
|
||||
export {
|
||||
IconifyStorageFunctions,
|
||||
IconifyBuilderFunctions,
|
||||
IconifyBrowserCacheFunctions,
|
||||
IconifyAPIFunctions,
|
||||
IconifyAPIInternalFunctions,
|
||||
};
|
||||
|
||||
// JSON stuff
|
||||
export { IconifyIcon, IconifyJSON, IconifyIconName };
|
||||
|
||||
// Customisations and icon props
|
||||
export {
|
||||
IconifyIconCustomisations,
|
||||
IconifyIconSize,
|
||||
IconifyIconProps,
|
||||
IconifyIconOnLoad,
|
||||
};
|
||||
|
||||
// API
|
||||
export {
|
||||
IconifyAPIConfig,
|
||||
IconifyIconLoaderCallback,
|
||||
IconifyIconLoaderAbort,
|
||||
IconifyAPIModule,
|
||||
GetAPIConfig,
|
||||
IconifyAPIPrepareIconsQuery,
|
||||
IconifyAPISendQuery,
|
||||
PartialIconifyAPIConfig,
|
||||
IconifyAPIQueryParams,
|
||||
IconifyAPICustomQueryParams,
|
||||
};
|
||||
|
||||
// Builder functions
|
||||
export { IconifyIconBuildResult };
|
||||
|
||||
/* Browser cache */
|
||||
export { IconifyBrowserCacheType };
|
||||
|
||||
/**
|
||||
* Enable cache
|
||||
*/
|
||||
function enableCache(storage: IconifyBrowserCacheType): void {
|
||||
toggleBrowserCache(storage, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Disable cache
|
||||
*/
|
||||
function disableCache(storage: IconifyBrowserCacheType): void {
|
||||
toggleBrowserCache(storage, false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialise stuff
|
||||
*/
|
||||
// Enable short names
|
||||
allowSimpleNames(true);
|
||||
|
||||
// Set API module
|
||||
setAPIModule('', fetchAPIModule);
|
||||
|
||||
/**
|
||||
* Browser stuff
|
||||
*/
|
||||
if (typeof document !== 'undefined' && typeof window !== 'undefined') {
|
||||
// Set cache and load existing cache
|
||||
initBrowserStorage();
|
||||
|
||||
interface WindowWithIconifyStuff {
|
||||
IconifyPreload?: IconifyJSON[] | IconifyJSON;
|
||||
IconifyProviders?: Record<string, PartialIconifyAPIConfig>;
|
||||
}
|
||||
const _window = window as WindowWithIconifyStuff;
|
||||
|
||||
// Load icons from global "IconifyPreload"
|
||||
if (_window.IconifyPreload !== void 0) {
|
||||
const preload = _window.IconifyPreload;
|
||||
const err = 'Invalid IconifyPreload syntax.';
|
||||
if (typeof preload === 'object' && preload !== null) {
|
||||
(preload instanceof Array ? preload : [preload]).forEach((item) => {
|
||||
try {
|
||||
if (
|
||||
// Check if item is an object and not null/array
|
||||
typeof item !== 'object' ||
|
||||
item === null ||
|
||||
item instanceof Array ||
|
||||
// Check for 'icons' and 'prefix'
|
||||
typeof item.icons !== 'object' ||
|
||||
typeof item.prefix !== 'string' ||
|
||||
// Add icon set
|
||||
!addCollection(item)
|
||||
) {
|
||||
console.error(err);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Set API from global "IconifyProviders"
|
||||
if (_window.IconifyProviders !== void 0) {
|
||||
const providers = _window.IconifyProviders;
|
||||
if (typeof providers === 'object' && providers !== null) {
|
||||
for (let key in providers) {
|
||||
const err = 'IconifyProviders[' + key + '] is invalid.';
|
||||
try {
|
||||
const value = providers[key];
|
||||
if (
|
||||
typeof value !== 'object' ||
|
||||
!value ||
|
||||
value.resources === void 0
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
if (!addAPIProvider(key, value)) {
|
||||
console.error(err);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Internal API
|
||||
*/
|
||||
const _api: IconifyAPIInternalFunctions = {
|
||||
getAPIConfig,
|
||||
setAPIModule,
|
||||
sendAPIQuery,
|
||||
setFetch,
|
||||
getFetch,
|
||||
listAPIProviders,
|
||||
};
|
||||
|
||||
/**
|
||||
* Export functions
|
||||
*/
|
||||
// IconifyAPIInternalFunctions
|
||||
export { _api };
|
||||
|
||||
// IconifyAPIFunctions
|
||||
export { addAPIProvider, loadIcons, loadIcon };
|
||||
|
||||
// IconifyStorageFunctions
|
||||
export {
|
||||
iconLoaded,
|
||||
iconLoaded as iconExists, // deprecated, kept to avoid breaking changes
|
||||
getIcon,
|
||||
listIcons,
|
||||
addIcon,
|
||||
addCollection,
|
||||
};
|
||||
|
||||
// IconifyBuilderFunctions
|
||||
export { replaceIDs, calculateSize, buildIcon };
|
||||
|
||||
// IconifyBrowserCacheFunctions
|
||||
export { enableCache, disableCache };
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default IconifyIconComponent;
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import type { IconifyIcon } from '@iconify/types';
|
||||
import type { IconifyIconCustomisations as RawIconifyIconCustomisations } from '@iconify/utils/lib/customisations/defaults';
|
||||
import { defaultIconCustomisations } from '@iconify/utils/lib/customisations/defaults';
|
||||
|
||||
/**
|
||||
* Icon customisations
|
||||
*/
|
||||
export type IconifyIconCustomisations = RawIconifyIconCustomisations & {
|
||||
// Allow rotation to be string
|
||||
rotate?: string | number;
|
||||
|
||||
// Inline mode
|
||||
inline?: boolean;
|
||||
};
|
||||
|
||||
export const defaultExtendedIconCustomisations = {
|
||||
...defaultIconCustomisations,
|
||||
inline: false,
|
||||
};
|
||||
|
||||
/**
|
||||
* Callback for when icon has been loaded (only triggered for icons loaded from API)
|
||||
*/
|
||||
export type IconifyIconOnLoad = (name: string) => void;
|
||||
|
||||
/**
|
||||
* Icon properties
|
||||
*/
|
||||
export interface IconifyIconProps extends IconifyIconCustomisations {
|
||||
// Icon object or icon name (must be added to storage using addIcon for offline package)
|
||||
icon: IconifyIcon | string;
|
||||
|
||||
// Style
|
||||
color?: string;
|
||||
|
||||
// Flip shorthand
|
||||
flip?: string;
|
||||
|
||||
// Unique id, used as base for ids for shapes. Use it to get consistent ids for server side rendering
|
||||
id?: string;
|
||||
|
||||
// Callback to call when icon data has been loaded. Used only for icons loaded from API
|
||||
onLoad?: IconifyIconOnLoad;
|
||||
}
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
// @ts-ignore
|
||||
import { htmlSafe } from '@ember/template';
|
||||
import type { IconifyIcon } from '@iconify/types';
|
||||
import { mergeCustomisations } from '@iconify/utils/lib/customisations/merge';
|
||||
import { flipFromString } from '@iconify/utils/lib/customisations/flip';
|
||||
import { rotateFromString } from '@iconify/utils/lib/customisations/rotate';
|
||||
import { iconToSVG } from '@iconify/utils/lib/svg/build';
|
||||
import { replaceIDs } from '@iconify/utils/lib/svg/id';
|
||||
import type { IconifyIconCustomisations, IconifyIconProps } from './props';
|
||||
import { defaultExtendedIconCustomisations } from './props';
|
||||
|
||||
/**
|
||||
* Render result
|
||||
*/
|
||||
export interface RenderResult {
|
||||
width?: string | number;
|
||||
height?: string | number;
|
||||
viewBox: string;
|
||||
style?: string;
|
||||
className: string;
|
||||
body: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render icon
|
||||
*/
|
||||
export const render = (
|
||||
// Icon must be validated before calling this function
|
||||
icon: IconifyIcon,
|
||||
|
||||
// Partial properties
|
||||
props: IconifyIconProps,
|
||||
|
||||
// Class name
|
||||
className: string
|
||||
): RenderResult => {
|
||||
// Get all customisations
|
||||
const customisations = mergeCustomisations(
|
||||
defaultExtendedIconCustomisations,
|
||||
props as IconifyIconCustomisations
|
||||
);
|
||||
|
||||
// Create empty style
|
||||
let style = '';
|
||||
|
||||
// Get element properties
|
||||
for (let key in props) {
|
||||
const value = props[key];
|
||||
if (value === void 0) {
|
||||
continue;
|
||||
}
|
||||
switch (key) {
|
||||
// Properties to ignore
|
||||
case 'icon':
|
||||
case 'onLoad':
|
||||
break;
|
||||
|
||||
// Boolean attributes
|
||||
case 'inline':
|
||||
case 'hFlip':
|
||||
case 'vFlip':
|
||||
customisations[key] =
|
||||
value === true || value === 'true' || value === 1;
|
||||
break;
|
||||
|
||||
// Flip as string: 'horizontal,vertical'
|
||||
case 'flip':
|
||||
if (typeof value === 'string') {
|
||||
flipFromString(customisations, value);
|
||||
}
|
||||
break;
|
||||
|
||||
// Color: copy to style
|
||||
case 'color':
|
||||
style += 'color: ' + value + ';';
|
||||
break;
|
||||
|
||||
// Rotation as string
|
||||
case 'rotate':
|
||||
if (typeof value === 'string') {
|
||||
customisations[key] = rotateFromString(value);
|
||||
} else if (typeof value === 'number') {
|
||||
customisations[key] = value;
|
||||
}
|
||||
break;
|
||||
|
||||
// Ignore other properties
|
||||
}
|
||||
}
|
||||
|
||||
// Generate icon
|
||||
const item = iconToSVG(icon, customisations);
|
||||
|
||||
// Counter for ids based on "id" property to render icons consistently on server and client
|
||||
let localCounter = 0;
|
||||
let id = props.id;
|
||||
if (typeof id === 'string') {
|
||||
// Convert '-' to '_' to avoid errors in animations
|
||||
id = id.replace(/-/g, '_');
|
||||
}
|
||||
|
||||
// Create body
|
||||
const body = replaceIDs(
|
||||
item.body,
|
||||
id ? () => id + 'ID' + localCounter++ : 'iconifyEmber'
|
||||
);
|
||||
|
||||
// Add inline
|
||||
if (customisations.inline) {
|
||||
style += 'vertical-align: -0.125em;';
|
||||
}
|
||||
|
||||
return {
|
||||
...item.attributes,
|
||||
style: style === '' ? void 0 : htmlSafe(style),
|
||||
className,
|
||||
body,
|
||||
};
|
||||
};
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
{
|
||||
"include": ["src", "app"],
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"outDir": "./lib",
|
||||
"target": "ES2019",
|
||||
"module": "ESNext",
|
||||
"declaration": true,
|
||||
"sourceMap": false,
|
||||
"strict": false,
|
||||
"moduleResolution": "node",
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"experimentalDecorators": true,
|
||||
"skipLibCheck": true
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
lib
|
||||
dist
|
||||
tests-compiled
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
es6: true,
|
||||
node: true,
|
||||
},
|
||||
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
|
||||
globals: {
|
||||
Atomics: 'readonly',
|
||||
SharedArrayBuffer: 'readonly',
|
||||
},
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['@typescript-eslint'],
|
||||
rules: {
|
||||
'no-mixed-spaces-and-tabs': ['off'],
|
||||
'no-unused-vars': ['off'],
|
||||
// '@typescript-eslint/no-unused-vars-experimental': ['error'],
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: ['src/**/*.ts', 'tests/*.ts'],
|
||||
},
|
||||
],
|
||||
};
|
||||
8
components/svg-framework/.gitignore
vendored
8
components/svg-framework/.gitignore
vendored
|
|
@ -1,8 +0,0 @@
|
|||
.DS_Store
|
||||
npm-debug.log
|
||||
yarn.lock
|
||||
tsconfig.tsbuildinfo
|
||||
node_modules
|
||||
dist
|
||||
lib
|
||||
tests-compiled
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
.DS_Store
|
||||
.eslintignore
|
||||
.eslintrc.js
|
||||
api-extractor*.json
|
||||
tsconfig*.json
|
||||
rollup.config.js
|
||||
build.js
|
||||
npm-debug.log
|
||||
yarn.lock
|
||||
tsconfig.tsbuildinfo
|
||||
jest.config.js
|
||||
node_modules
|
||||
src
|
||||
lib
|
||||
tests
|
||||
tests-compiled
|
||||
demo
|
||||
|
|
@ -1,316 +0,0 @@
|
|||
# What is Iconify?
|
||||
|
||||
Iconify is the most versatile icon framework.
|
||||
|
||||
- Unified icon framework that can be used with any icon library.
|
||||
- Out of the box includes 150+ icon sets with more than 200,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.
|
||||
|
||||
For more information visit [https://iconify.design/](https://iconify.design/).
|
||||
|
||||
# Iconify SVG framework
|
||||
|
||||
There are many fonts and SVG sets available, but they all have one thing in common: using any font or SVG set limits you to icons that are included in that set and forces browsers to load entire font or icons set. That limits developers to one or two fonts or icon sets.
|
||||
|
||||
Iconify uses a new innovative approach to loading icons. Unlike fonts and SVG frameworks, Iconify only loads icons that are used on the page instead of loading entire fonts. How is it done? By serving icons dynamically from publicly available JSON API (you can make a copy of script and API if you prefer to keep everything on your servers).
|
||||
|
||||
Iconify SVG framework is designed to be as easy to use as possible.
|
||||
|
||||
Add this line to your page to load Iconify SVG framework (you can add it to `<head>` section of the page or before `</body>`):
|
||||
|
||||
```html
|
||||
<script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/@iconify/iconify@3.1.1/dist/iconify.min.js"></script>
|
||||
```
|
||||
|
||||
or, if you are building a project with something like WebPack or Rollup, you can include the script by installing `@iconify/iconify` as a dependency and importing it in your project:
|
||||
|
||||
```js
|
||||
import Iconify from '@iconify/iconify';
|
||||
```
|
||||
|
||||
To add any icon, write something like this:
|
||||
|
||||
```html
|
||||
<span class="iconify" data-icon="eva:people-outline"></span>
|
||||
```
|
||||
|
||||
|
||||
|
||||
or this:
|
||||
|
||||
```html
|
||||
<span class="iconify-inline" data-icon="fa-solid:home"></span>
|
||||
<a href="#">Return home!</a>
|
||||
```
|
||||
|
||||
|
||||
|
||||
That is it. Change `data-icon` value to the name of the icon you want to use. There are over 200,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](https://iconify.design/docs/):
|
||||
|
||||
- [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?
|
||||
|
||||
The syntax is similar to icon fonts. Instead of inserting `SVG` in the document, you write a placeholder element, such `SPAN` or `I`.
|
||||
|
||||
Iconify SVG framework finds those placeholders and uses the following logic to parse them:
|
||||
|
||||
1. Retrieves icon name from `data-icon` attribute.
|
||||
2. Checks if icon exists. If not, it sends a request to Iconify API to retrieve icon data.
|
||||
3. Replaces placeholder element with `SVG`.
|
||||
|
||||
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.
|
||||
|
||||
## 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".
|
||||
|
||||
What is the difference?
|
||||
|
||||
- "iconify" renders icon as is, so it behaves like an image.
|
||||
- "iconify-inline" renders adds vertical alignment to the icon, making it behave like text (inline mode).
|
||||
|
||||
Usually, icon fonts do not render like normal images, they render like text. Text is aligned slightly below the baseline.
|
||||
|
||||
Visual example to show the difference between inline and block modes:
|
||||
|
||||
|
||||
|
||||
Why is the inline mode needed?
|
||||
|
||||
- To easily align icons within the text, such as emojis.
|
||||
- To make the transition from outdated icon fonts to SVG easier.
|
||||
|
||||
Use "iconify" for decorations, use "iconify-inline" if you want the icon to behave like an icon font.
|
||||
|
||||
#### data-inline attribute
|
||||
|
||||
In addition to using "iconify-inline" class, you can toggle inline mode with the `data-inline` attribute.
|
||||
|
||||
Set value to "true" to force inline mode, set value to "false" to use block mode.
|
||||
|
||||
Different ways to use block mode:
|
||||
|
||||
```html
|
||||
<span class="iconify" data-icon="eva:people-outline"></span>
|
||||
<span class="iconify" data-icon="eva:people-outline" data-inline="false"></span>
|
||||
```
|
||||
|
||||
Different ways to use inline mode:
|
||||
|
||||
```html
|
||||
<span class="iconify-inline" data-icon="eva:people-outline"></span>
|
||||
<span class="iconify" data-icon="eva:people-outline" data-inline="true"></span>
|
||||
<span
|
||||
class="iconify"
|
||||
data-icon="eva:people-outline"
|
||||
style="vertical-align: -0.125em"
|
||||
></span>
|
||||
```
|
||||
|
||||
## Iconify API
|
||||
|
||||
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 SVG framework does not load the entire icon set. Unlike fonts and SVG frameworks, Iconify only loads icons that are used on the current page instead of loading entire icon sets. How is it done? By serving icons dynamically from publicly available JSON API.
|
||||
|
||||
### Custom API
|
||||
|
||||
Relying on a third party service is often not an option. Many companies and developers prefer to keep everything on their own servers to have full control.
|
||||
|
||||
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://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://iconify.design/docs/api/hosting.html).
|
||||
|
||||
## Color
|
||||
|
||||
There are 2 types of icons: monotone and coloured.
|
||||
|
||||
- Monotone icons are icons that use only 1 colour and you can change that colour. Most icon sets fall into this category: FontAwesome, Unicons, Material Design Icons, etc.
|
||||
- Coloured icons are icons that use the preset palette. Most emoji icons fall into this category: Noto Emoji, Emoji One, etc. You cannot change the palette for those icons.
|
||||
|
||||
Monotone icons use font colour, just like glyph fonts. To change colour, you can do this:
|
||||
|
||||
```html
|
||||
<span class="iconify icon-bell" data-icon="vaadin-bell"></span>
|
||||
```
|
||||
|
||||
and add this to CSS:
|
||||
|
||||
```css
|
||||
.icon-bell {
|
||||
color: #f80;
|
||||
}
|
||||
.icon-bell:hover {
|
||||
color: #f00;
|
||||
}
|
||||
```
|
||||
|
||||
Sample:
|
||||
|
||||
|
||||
|
||||
## Dimensions
|
||||
|
||||
By default all icons are scaled to 1em height. To control icon height use font-size:
|
||||
|
||||
```html
|
||||
<span class="iconify icon-clipboard" data-icon="emojione-clipboard"></span>
|
||||
```
|
||||
|
||||
and add this to css:
|
||||
|
||||
```css
|
||||
.icon-clipboard {
|
||||
font-size: 32px;
|
||||
}
|
||||
```
|
||||
|
||||
Sample:
|
||||
|
||||
|
||||
|
||||
you might also need to set line-height:
|
||||
|
||||
```css
|
||||
.icon-clipboard {
|
||||
font-size: 32px;
|
||||
line-height: 1em;
|
||||
}
|
||||
```
|
||||
|
||||
You can also set custom dimensions using `data-width` and `data-height` attributes:
|
||||
|
||||
```html
|
||||
<span
|
||||
data-icon="twemoji-ice-cream"
|
||||
data-width="32"
|
||||
data-height="32"
|
||||
class="iconify"
|
||||
></span>
|
||||
```
|
||||
|
||||
Sample:
|
||||
|
||||
|
||||
|
||||
## Transformations
|
||||
|
||||
You can rotate and flip icon by adding `data-flip` and `data-rotate` attributes:
|
||||
|
||||
```html
|
||||
<span
|
||||
data-icon="twemoji-helicopter"
|
||||
class="iconify"
|
||||
data-flip="horizontal"
|
||||
></span>
|
||||
<span data-icon="twemoji-helicopter" class="iconify" data-rotate="90deg"></span>
|
||||
```
|
||||
|
||||
Possible values for `data-flip`: horizontal, vertical.
|
||||
Possible values for `data-rotate`: 90deg, 180deg, 270deg.
|
||||
|
||||
If you use both flip and rotation, the icon is flipped first, then rotated.
|
||||
|
||||
To use custom transformations use CSS transform rule.
|
||||
|
||||
```html
|
||||
<span data-icon="twemoji-helicopter" class="iconify icon-helicopter"></span>
|
||||
```
|
||||
|
||||
```css
|
||||
.icon-helicopter {
|
||||
transform: 45deg;
|
||||
}
|
||||
```
|
||||
|
||||
Samples:
|
||||
|
||||
|
||||
|
||||
## Available icons
|
||||
|
||||
There are over 200,000 icons to choose from.
|
||||
|
||||
General collections (monotone icons):
|
||||
|
||||
- [Material Symbols](https://icon-sets.iconify.design/material-symbols/) (7000+ icons)
|
||||
- [Material Design Icons](https://icon-sets.iconify.design/mdi/) (5000+ icons)
|
||||
- [Unicons](https://icon-sets.iconify.design/uil/) (1000+ icons)
|
||||
- [Jam Icons](https://icon-sets.iconify.design/jam/) (900 icons)
|
||||
- [IonIcons](https://icon-sets.iconify.design/ion/) (1200+ icons)
|
||||
- [FontAwesome 6](https://icon-sets.iconify.design/fa6-solid/) (2000+ icons)
|
||||
- [Bootstrap Icons](https://icon-sets.iconify.design/bi/) (500+ icons)
|
||||
- [IcoMoon Free](https://icon-sets.iconify.design/icomoon-free/) (400+ icons)
|
||||
- [Dashicons](https://icon-sets.iconify.design/dashicons/) (300 icons)
|
||||
|
||||
and many others.
|
||||
|
||||
Emoji collections (mostly colored icons):
|
||||
|
||||
- [Emoji One](https://icon-sets.iconify.design/emojione/) (1800+ colored version 2 icons, 1400+ monotone version 2 icons, 1200+ version 1 icons)
|
||||
- [OpenMoji](https://icon-sets.iconify.design/openmoji/) (3500+ icons)
|
||||
- [Noto Emoji](https://icon-sets.iconify.design/noto/) (2000+ icons for version 2, 2000+ icons for version 1)
|
||||
- [Twitter Emoji](https://icon-sets.iconify.design/twemoji/) (2000+ icons)
|
||||
- [Firefox OS Emoji](https://icon-sets.iconify.design/fxemoji/) (1000+ icons)
|
||||
|
||||
Also, there are several thematic collections, such as weather icons, map icons, etc.
|
||||
|
||||
You can use browse or search available icons on the Iconify website: https://icon-sets.iconify.design/
|
||||
|
||||
Click an icon to get HTML code.
|
||||
|
||||
## Browser support
|
||||
|
||||
Iconify SVG framework supports all modern browsers.
|
||||
|
||||
## License
|
||||
|
||||
This package is licensed under MIT license.
|
||||
|
||||
`SPDX-License-Identifier: MIT`
|
||||
|
||||
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.
|
||||
|
||||
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-PRESENT Vjacheslav Trushkin
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
|
||||
"mainEntryPointFilePath": "lib/iconify.d.ts",
|
||||
"bundledPackages": [
|
||||
"@iconify/core",
|
||||
"@iconify/utils",
|
||||
"@cyberalien/redundancy",
|
||||
"@iconify/api-redundancy"
|
||||
],
|
||||
"compiler": {},
|
||||
"apiReport": {
|
||||
"enabled": false
|
||||
},
|
||||
"docModel": {
|
||||
"enabled": false
|
||||
},
|
||||
"dtsRollup": {
|
||||
"enabled": true,
|
||||
"untrimmedFilePath": "<projectFolder>/dist/iconify.d.ts"
|
||||
},
|
||||
"tsdocMetadata": {
|
||||
"enabled": false
|
||||
},
|
||||
"messages": {
|
||||
"compilerMessageReporting": {
|
||||
"default": {
|
||||
"logLevel": "warning"
|
||||
}
|
||||
},
|
||||
"extractorMessageReporting": {
|
||||
"default": {
|
||||
"logLevel": "warning"
|
||||
},
|
||||
"ae-missing-release-tag": {
|
||||
"logLevel": "none"
|
||||
}
|
||||
},
|
||||
"tsdocMessageReporting": {
|
||||
"default": {
|
||||
"logLevel": "warning"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
|
||||
"mainEntryPointFilePath": "lib/iconify.without-api.d.ts",
|
||||
"bundledPackages": [
|
||||
"@iconify/core",
|
||||
"@iconify/utils",
|
||||
"@cyberalien/redundancy",
|
||||
"@iconify/api-redundancy"
|
||||
],
|
||||
"compiler": {},
|
||||
"apiReport": {
|
||||
"enabled": false
|
||||
},
|
||||
"docModel": {
|
||||
"enabled": false
|
||||
},
|
||||
"dtsRollup": {
|
||||
"enabled": true,
|
||||
"untrimmedFilePath": "<projectFolder>/dist/iconify.without-api.d.ts"
|
||||
},
|
||||
"tsdocMetadata": {
|
||||
"enabled": false
|
||||
},
|
||||
"messages": {
|
||||
"compilerMessageReporting": {
|
||||
"default": {
|
||||
"logLevel": "warning"
|
||||
}
|
||||
},
|
||||
"extractorMessageReporting": {
|
||||
"default": {
|
||||
"logLevel": "warning"
|
||||
},
|
||||
"ae-missing-release-tag": {
|
||||
"logLevel": "none"
|
||||
}
|
||||
},
|
||||
"tsdocMessageReporting": {
|
||||
"default": {
|
||||
"logLevel": "warning"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
/* eslint-disable */
|
||||
const fs = require('fs');
|
||||
const child_process = require('child_process');
|
||||
|
||||
// List of commands to run
|
||||
const commands = [];
|
||||
|
||||
// Parse command line
|
||||
const compile = {
|
||||
lib: true,
|
||||
dist: true,
|
||||
api: true,
|
||||
};
|
||||
process.argv.slice(2).forEach((cmd) => {
|
||||
if (cmd.slice(0, 2) !== '--') {
|
||||
return;
|
||||
}
|
||||
const parts = cmd.slice(2).split('-');
|
||||
if (parts.length === 2) {
|
||||
// Parse 2 part commands like --with-lib
|
||||
const key = parts.pop();
|
||||
if (compile[key] === void 0) {
|
||||
return;
|
||||
}
|
||||
switch (parts.shift()) {
|
||||
case 'with':
|
||||
// enable module
|
||||
compile[key] = true;
|
||||
break;
|
||||
|
||||
case 'without':
|
||||
// disable module
|
||||
compile[key] = false;
|
||||
break;
|
||||
|
||||
case 'only':
|
||||
// disable other modules
|
||||
Object.keys(compile).forEach((key2) => {
|
||||
compile[key2] = key2 === key;
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Check if required modules in same monorepo are available
|
||||
const fileExists = (file) => {
|
||||
try {
|
||||
fs.statSync(file);
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
if (compile.dist && !fileExists('./lib/iconify.js')) {
|
||||
compile.lib = true;
|
||||
}
|
||||
|
||||
if (compile.api && !fileExists('./lib/iconify.d.ts')) {
|
||||
compile.lib = true;
|
||||
}
|
||||
|
||||
// Add api2
|
||||
if (compile.api) {
|
||||
compile.api2 = true;
|
||||
}
|
||||
|
||||
// Compile packages
|
||||
Object.keys(compile).forEach((key) => {
|
||||
if (compile[key]) {
|
||||
commands.push({
|
||||
cmd: 'npm',
|
||||
args: ['run', 'build:' + key],
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Run next command
|
||||
*/
|
||||
const next = () => {
|
||||
const item = commands.shift();
|
||||
if (item === void 0) {
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
if (item.cwd === void 0) {
|
||||
item.cwd = __dirname;
|
||||
}
|
||||
|
||||
const result = child_process.spawnSync(item.cmd, item.args, {
|
||||
cwd: item.cwd,
|
||||
stdio: 'inherit',
|
||||
});
|
||||
|
||||
if (result.status === 0) {
|
||||
process.nextTick(next);
|
||||
} else {
|
||||
process.exit(result.status);
|
||||
}
|
||||
};
|
||||
next();
|
||||
|
|
@ -1,176 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Iconify Demo: Loading Icons</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
body {
|
||||
padding: 8px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
p:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
svg {
|
||||
color: #292;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// Preload icons before importing Iconify
|
||||
IconifyPreload = [
|
||||
{
|
||||
prefix: 'z123-preload',
|
||||
icons: {
|
||||
check2: {
|
||||
body:
|
||||
'<g fill="currentColor"><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path><path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896l.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543l-.707.707z"/></g>',
|
||||
},
|
||||
},
|
||||
width: 16,
|
||||
height: 16,
|
||||
},
|
||||
{
|
||||
provider: 'test-provider',
|
||||
prefix: 'z234-preload',
|
||||
icons: {
|
||||
check2: {
|
||||
body:
|
||||
'<g fill="currentColor"><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path><path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896l.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543l-.707.707z"/></g>',
|
||||
},
|
||||
},
|
||||
width: 16,
|
||||
height: 16,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
<script src="../dist/iconify.min.js"></script>
|
||||
<script>
|
||||
// Disable cache
|
||||
Iconify.enableCache('local', false);
|
||||
Iconify.enableCache('session', false);
|
||||
|
||||
// Add icons without provider
|
||||
Iconify.addCollection({
|
||||
prefix: 'z123-add-collection',
|
||||
icons: {
|
||||
check2: {
|
||||
body:
|
||||
'<g fill="currentColor"><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path><path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896l.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543l-.707.707z"/></g>',
|
||||
},
|
||||
},
|
||||
width: 16,
|
||||
height: 16,
|
||||
});
|
||||
Iconify.addIcon('z123-add-icon:check2', {
|
||||
body:
|
||||
'<g fill="currentColor"><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path><path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896l.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543l-.707.707z"/></g>',
|
||||
width: 16,
|
||||
height: 16,
|
||||
});
|
||||
|
||||
// Add icons with provider
|
||||
Iconify.addCollection(
|
||||
{
|
||||
prefix: 'z234-add-collection',
|
||||
icons: {
|
||||
check2: {
|
||||
body:
|
||||
'<g fill="currentColor"><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path><path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896l.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543l-.707.707z"/></g>',
|
||||
},
|
||||
},
|
||||
width: 16,
|
||||
height: 16,
|
||||
},
|
||||
'test-provider'
|
||||
);
|
||||
Iconify.addIcon('@test-provider:z234-add-icon:check2', {
|
||||
body:
|
||||
'<g fill="currentColor"><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path><path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896l.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543l-.707.707z"/></g>',
|
||||
width: 16,
|
||||
height: 16,
|
||||
});
|
||||
|
||||
// Load after delay
|
||||
[3, 5].forEach((delay) => {
|
||||
setTimeout(() => {
|
||||
document.getElementById('delay' + delay).innerHTML =
|
||||
'Icon loaded after ' +
|
||||
delay +
|
||||
' seconds: <span class="iconify-inline" data-icon="bi:check-all"></span>';
|
||||
}, delay * 1000);
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
This page tests various ways to dynamically load icons without API
|
||||
(except for first example that uses API).<br />
|
||||
On success, after each line of text there should be a green icon.
|
||||
</p>
|
||||
<p>
|
||||
Icon loaded from API:
|
||||
<span class="iconify-inline" data-icon="bi:check2"></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Icon loaded with addCollection():
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="z123-add-collection:check2"
|
||||
></span>
|
||||
</p>
|
||||
<p>
|
||||
Icon loaded with addIcon():
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="z123-add-icon:check2"
|
||||
></span>
|
||||
</p>
|
||||
<p>
|
||||
Icon loaded with IconifyPreload:
|
||||
<span class="iconify-inline" data-icon="z123-preload:check2"></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Icon loaded with addCollection() and custom provider:
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="@test-provider:z234-add-collection:check2"
|
||||
></span>
|
||||
</p>
|
||||
<p>
|
||||
Icon loaded with addIcon() and custom provider:
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="@test-provider:z234-add-icon:check2"
|
||||
></span>
|
||||
</p>
|
||||
<p>
|
||||
Icon loaded with IconifyPreload and custom provider:
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="@test-provider:z234-preload:check2"
|
||||
></span>
|
||||
</p>
|
||||
<p id="delay3">
|
||||
Icon rendered after 3 seconds...
|
||||
</p>
|
||||
<p id="delay5">
|
||||
Icon rendered after 5 seconds...
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,150 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Iconify Demo: Loading Icons (without API)</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
body {
|
||||
padding: 8px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
p:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
svg {
|
||||
color: #292;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// Preload icons before importing Iconify
|
||||
IconifyPreload = [
|
||||
{
|
||||
prefix: 'z123-preload',
|
||||
icons: {
|
||||
check2: {
|
||||
body: '<g fill="currentColor"><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path><path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896l.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543l-.707.707z"/></g>',
|
||||
},
|
||||
},
|
||||
width: 16,
|
||||
height: 16,
|
||||
},
|
||||
{
|
||||
provider: 'test-provider',
|
||||
prefix: 'z234-preload',
|
||||
icons: {
|
||||
check2: {
|
||||
body: '<g fill="currentColor"><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path><path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896l.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543l-.707.707z"/></g>',
|
||||
},
|
||||
},
|
||||
width: 16,
|
||||
height: 16,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
<script src="../dist/iconify.without-api.min.js"></script>
|
||||
<script>
|
||||
// Add icons without provider
|
||||
Iconify.addCollection({
|
||||
prefix: 'z123-add-collection',
|
||||
icons: {
|
||||
check2: {
|
||||
body: '<g fill="none" stroke-linecap="round" stroke-width="1" stroke="currentColor"><circle cx="8" cy="8" r="7.5" stroke-dasharray="48" stroke-dashoffset="48"><animate id="circle" attributeName="stroke-dashoffset" values="48;0" dur="0.5s" fill="freeze" /></circle><path d="M8 5v3" stroke-width="2" stroke-dasharray="5" stroke-dashoffset="5"><animate attributeName="stroke-dashoffset" values="5;0" dur="0.3s" begin="circle.end+0.1s" fill="freeze" /></path></g><circle cx="8" cy="11" r="1" fill="currentColor" opacity="0"><animate attributeName="opacity" values="0;1" dur="0.2s" begin="circle.end+0.5s" fill="freeze" /></circle>',
|
||||
},
|
||||
},
|
||||
width: 16,
|
||||
height: 16,
|
||||
});
|
||||
Iconify.addIcon('z123-add-icon:check2', {
|
||||
body: '<g fill="none" stroke-linecap="round" stroke-width="1" stroke="currentColor"><circle cx="8" cy="8" r="7.5" stroke-dasharray="48" stroke-dashoffset="48"><animate id="circle" attributeName="stroke-dashoffset" values="48;0" dur="0.5s" fill="freeze" /></circle><path d="M8 5v3" stroke-width="2" stroke-dasharray="5" stroke-dashoffset="5"><animate attributeName="stroke-dashoffset" values="5;0" dur="0.3s" begin="circle.end+0.1s" fill="freeze" /></path></g><circle cx="8" cy="11" r="1" fill="currentColor" opacity="0"><animate attributeName="opacity" values="0;1" dur="0.2s" begin="circle.end+0.5s" fill="freeze" /></circle>',
|
||||
width: 16,
|
||||
height: 16,
|
||||
});
|
||||
|
||||
// Add icons with provider
|
||||
Iconify.addCollection(
|
||||
{
|
||||
prefix: 'z234-add-collection',
|
||||
icons: {
|
||||
check2: {
|
||||
body: '<mask id="coffee-mask" x="0" y="0" width="16" height="16"><g fill="white"><path d="M5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M8.5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M12-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4" stroke="white" stroke-width="1" fill="none"><animateMotion path="M0 0v-8" calcMode="linear" dur="3s" repeatCount="indefinite" /></path></g><rect y="4" width="16" height="12" fill="black" /><path d="M2 5H13C14.1046 5 15 5.89543 15 7V8C15 9.10457 14.1046 10 13 10H12V14C12 15.1046 11.1046 16 10 16H4C2.89543 16 2 15.1046 2 14V5Z" fill="white" /><path d="M12 6H13C13.5523 6 14 6.44772 14 7V8C14 8.55228 13.5523 9 13 9H12V6Z" fill="black" /></mask><rect mask="url(#coffee-mask)" width="16" height="16" fill="currentColor" />',
|
||||
},
|
||||
},
|
||||
width: 16,
|
||||
height: 16,
|
||||
},
|
||||
'test-provider'
|
||||
);
|
||||
Iconify.addIcon('@test-provider:z234-add-icon:check2', {
|
||||
body: '<mask id="coffee-mask" x="0" y="0" width="16" height="16"><g fill="white"><path d="M5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M8.5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M12-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4" stroke="white" stroke-width="1" fill="none"><animateMotion path="M0 0v-8" calcMode="linear" dur="3s" repeatCount="indefinite" /></path></g><rect y="4" width="16" height="12" fill="black" /><path d="M2 5H13C14.1046 5 15 5.89543 15 7V8C15 9.10457 14.1046 10 13 10H12V14C12 15.1046 11.1046 16 10 16H4C2.89543 16 2 15.1046 2 14V5Z" fill="white" /><path d="M12 6H13C13.5523 6 14 6.44772 14 7V8C14 8.55228 13.5523 9 13 9H12V6Z" fill="black" /></mask><rect mask="url(#coffee-mask)" width="16" height="16" fill="currentColor" />',
|
||||
width: 16,
|
||||
height: 16,
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
This page tests various ways to dynamically load icons without API
|
||||
(except for first example that uses API).<br />
|
||||
On success, after each line of text there should be a green icon.
|
||||
</p>
|
||||
<p>
|
||||
Icon loaded from API (should not load):
|
||||
<span class="iconify-inline" data-icon="bi:check2"></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Icon loaded with addCollection():
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="z123-add-collection:check2"
|
||||
></span>
|
||||
</p>
|
||||
<p>
|
||||
Icon loaded with addIcon():
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="z123-add-icon:check2"
|
||||
></span>
|
||||
</p>
|
||||
<p>
|
||||
Icon loaded with IconifyPreload:
|
||||
<span class="iconify-inline" data-icon="z123-preload:check2"></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Icon loaded with addCollection() and custom provider:
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="@test-provider:z234-add-collection:check2"
|
||||
></span>
|
||||
</p>
|
||||
<p>
|
||||
Icon loaded with addIcon() and custom provider:
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="@test-provider:z234-add-icon:check2"
|
||||
></span>
|
||||
</p>
|
||||
<p>
|
||||
Icon loaded with IconifyPreload and custom provider:
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="@test-provider:z234-preload:check2"
|
||||
></span>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Iconify Demo: Providers</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
body {
|
||||
padding: 8px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
}
|
||||
p:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
IconifyProviders = {
|
||||
fake1: {
|
||||
// correct syntax
|
||||
resources: ['https://api.iconify.design'],
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<script src="../dist/iconify.min.js"></script>
|
||||
<script>
|
||||
Iconify.addAPIProvider('fake2', {
|
||||
// string instead of array, but script should handle it
|
||||
resources: 'https://api.iconify.design',
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
This is a simple HTML page with few icons.<br />
|
||||
Successful icons should look identical, though loaded separately
|
||||
</p>
|
||||
<p>
|
||||
No provider:
|
||||
<span class="iconify" data-icon="bi:house-door"></span>
|
||||
</p>
|
||||
<p>
|
||||
No provider:
|
||||
<span class="iconify" data-icon="@:bi:house-door"></span>
|
||||
</p>
|
||||
<p>
|
||||
Custom provider 1 (3 icons):
|
||||
<span class="iconify" data-icon="@fake1:bi:house-door"></span>
|
||||
<span class="iconify" data-icon="fake1:bi:house-door"></span>
|
||||
<span class="iconify" data-icon="@fake1:bi-house-door"></span>
|
||||
</p>
|
||||
<p>
|
||||
Custom provider 2 (1 icon):
|
||||
<span class="iconify" data-icon="@fake2:bi:house-door"></span>
|
||||
</p>
|
||||
<p>
|
||||
Invalid provider (0 icons):
|
||||
<span class="iconify" data-icon="@fake3:bi:house-door"></span>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Iconify Demo: Usage</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
body {
|
||||
padding: 8px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
}
|
||||
p:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
<script src="../dist/iconify.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>This is a simple HTML page with few icons.</p>
|
||||
<p>
|
||||
Icon that behaves like an image:
|
||||
<span class="iconify" data-icon="bi:house-door"></span>
|
||||
</p>
|
||||
|
||||
<script>
|
||||
setTimeout(() => {
|
||||
// Replace document.body
|
||||
const node = document.createElement('body');
|
||||
node.innerHTML =
|
||||
'<p>Icon in new body: <span class="iconify" data-icon="bi:house-door"></span></p>';
|
||||
document.documentElement.replaceChild(node, document.body);
|
||||
}, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,247 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta
|
||||
http-equiv="Content-Security-Policy"
|
||||
content="require-trusted-types-for 'script';"
|
||||
/>
|
||||
<title>Iconify Demo: Usage</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
body {
|
||||
padding: 8px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
}
|
||||
p:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
:where(p:hover) .iconify {
|
||||
color: green;
|
||||
}
|
||||
.iconify:hover {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
IconifyPreload = [
|
||||
{
|
||||
prefix: 'test',
|
||||
icons: {
|
||||
icon: {
|
||||
body: '<mask id="coffee-mask" x="0" y="0" width="16" height="16"><g fill="white"><path d="M5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M8.5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M12-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4" stroke="white" stroke-width="1" fill="none"><animateMotion path="M0 0v-8" calcMode="linear" dur="3s" repeatCount="indefinite" /></path></g><rect y="4" width="16" height="12" fill="black" /><path d="M2 5H13C14.1046 5 15 5.89543 15 7V8C15 9.10457 14.1046 10 13 10H12V14C12 15.1046 11.1046 16 10 16H4C2.89543 16 2 15.1046 2 14V5Z" fill="white" /><path d="M12 6H13C13.5523 6 14 6.44772 14 7V8C14 8.55228 13.5523 9 13 9H12V6Z" fill="black" /></mask><rect mask="url(#coffee-mask)" width="16" height="16" fill="currentColor" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
</script>
|
||||
<script src="../dist/iconify.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
This is a simple HTML page with few icons.<br />
|
||||
There are 2 entries for each sample: one as inline SVG, one using
|
||||
style.
|
||||
</p>
|
||||
<p>
|
||||
Icons that behave like images:
|
||||
<span class="iconify" data-icon="bi:house-door"></span>
|
||||
<span
|
||||
class="iconify"
|
||||
data-icon="bi:house-door"
|
||||
data-mode="style"
|
||||
></span>
|
||||
<i class="iconify" data-icon="cif:ee"></i>
|
||||
<i class="iconify" data-icon="cif:ee" data-mode="style"></i>
|
||||
</p>
|
||||
<p>
|
||||
Icon that behaves like an glyph (aligned to bottom of this text):
|
||||
<span class="iconify-inline" data-icon="bi:house-door"></span>
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="bi:house-door"
|
||||
data-mode="style"
|
||||
></span>
|
||||
<i class="iconify-inline" data-icon="cif:ee"></i>
|
||||
<i class="iconify-inline" data-icon="cif:ee" data-mode="style"></i>
|
||||
</p>
|
||||
<p>
|
||||
Changing icon color:
|
||||
<span
|
||||
class="iconify-inline"
|
||||
style="color: red"
|
||||
data-icon="bi:house-door"
|
||||
></span>
|
||||
<span
|
||||
class="iconify-inline"
|
||||
style="color: red"
|
||||
data-icon="bi:house-door"
|
||||
data-mode="style"
|
||||
></span>
|
||||
</p>
|
||||
<p>
|
||||
Big icon (showing various ways to do it):
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="bi:person-lines-fill"
|
||||
style="font-size: 2em"
|
||||
></span>
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="bi:person-lines-fill"
|
||||
style="font-size: 2em"
|
||||
data-mode="style"
|
||||
></span>
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="bi:person-lines-fill"
|
||||
data-height="2em"
|
||||
></span>
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="bi:person-lines-fill"
|
||||
data-height="2em"
|
||||
data-mode="style"
|
||||
></span>
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="bi:person-lines-fill"
|
||||
data-height="unset"
|
||||
style="height: 32px"
|
||||
></span>
|
||||
<br />
|
||||
Icons above should be aligned differently because they have
|
||||
different font-size. Vertical alignment is relative to font size.
|
||||
</p>
|
||||
<p>
|
||||
Big icon (showing various ways to do it):
|
||||
<span
|
||||
class="iconify"
|
||||
data-icon="bi:person-lines-fill"
|
||||
style="font-size: 2em"
|
||||
></span>
|
||||
<span
|
||||
class="iconify"
|
||||
data-icon="bi:person-lines-fill"
|
||||
style="font-size: 2em"
|
||||
data-mode="style"
|
||||
></span>
|
||||
<span
|
||||
class="iconify"
|
||||
data-icon="bi:person-lines-fill"
|
||||
data-height="2em"
|
||||
></span>
|
||||
<span
|
||||
class="iconify"
|
||||
data-icon="bi:person-lines-fill"
|
||||
data-height="2em"
|
||||
data-mode="style"
|
||||
></span>
|
||||
<span
|
||||
class="iconify"
|
||||
data-icon="bi:person-lines-fill"
|
||||
data-width="none"
|
||||
style="height: 32px"
|
||||
></span>
|
||||
<br />
|
||||
Icons above should be aligned identically because they are not using
|
||||
inline mode.
|
||||
</p>
|
||||
<p>
|
||||
Rotation:
|
||||
<span class="iconify-inline" data-icon="bi:image"></span>
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="bi:image"
|
||||
data-mode="style"
|
||||
></span>
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="bi:image"
|
||||
data-rotate="1"
|
||||
></span>
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="bi:image"
|
||||
data-rotate="1"
|
||||
data-mode="style"
|
||||
></span>
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="bi:image"
|
||||
data-rotate="180deg"
|
||||
></span>
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="bi:image"
|
||||
data-rotate="180deg"
|
||||
data-mode="style"
|
||||
></span>
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="bi:image"
|
||||
data-rotate="75%"
|
||||
></span>
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="bi:image"
|
||||
data-rotate="75%"
|
||||
data-mode="style"
|
||||
></span>
|
||||
</p>
|
||||
<p>
|
||||
Flip:
|
||||
<span class="iconify-inline" data-icon="test:icon"></span>
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="test:icon"
|
||||
data-mode="style"
|
||||
></span>
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="test:icon"
|
||||
data-flip="horizontal"
|
||||
></span>
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="test:icon"
|
||||
data-flip="horizontal"
|
||||
data-mode="style"
|
||||
></span>
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="test:icon"
|
||||
data-flip="vertical"
|
||||
></span>
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="test:icon"
|
||||
data-flip="vertical"
|
||||
data-mode="style"
|
||||
></span>
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="test:icon"
|
||||
data-flip="horizontal,vertical"
|
||||
></span>
|
||||
<span
|
||||
class="iconify-inline"
|
||||
data-icon="test:icon"
|
||||
data-flip="horizontal,vertical"
|
||||
data-mode="style"
|
||||
></span>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
|
||||
module.exports = {
|
||||
verbose: true,
|
||||
preset: 'ts-jest',
|
||||
testEnvironment: 'node',
|
||||
testMatch: ['**/tests/*-test.ts'],
|
||||
};
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
MIT License
|
||||
|
||||
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
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
{
|
||||
"name": "@iconify/iconify/offline",
|
||||
"main": "../dist/iconify.without-api.min.js",
|
||||
"types": "../dist/iconify.without-api.d.ts",
|
||||
"browser": "../dist/iconify.without-api.min.js",
|
||||
"module": "../dist/iconify.without-api.mjs",
|
||||
"exports": {
|
||||
"./*": "./*",
|
||||
".": {
|
||||
"require": "../dist/iconify.without-api.cjs",
|
||||
"import": "../dist/iconify.without-api.mjs",
|
||||
"types": "../dist/iconify.without-api.d.ts",
|
||||
"default": "../dist/iconify.without-api.min.js"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
# @iconify/iconify/offline
|
||||
|
||||
This sub-directory contains `package.json` with entry points for importing `@iconify/iconify/offline`.
|
||||
|
||||
There is a duplicate entry in `exports` section of `package.json` in the parent directory, but at moment of coding this, TypeScript does not support conditional exports properly, so this directory is used as a duplicate to make everything work with TypeScript.
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
{
|
||||
"name": "@iconify/iconify",
|
||||
"description": "Unified SVG framework with over 100,000 icons to choose from",
|
||||
"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
|
||||
"version": "3.1.1",
|
||||
"license": "MIT",
|
||||
"main": "./dist/iconify.min.js",
|
||||
"types": "./dist/iconify.d.ts",
|
||||
"browser": "./dist/iconify.min.js",
|
||||
"module": "./dist/iconify.mjs",
|
||||
"bugs": "https://github.com/iconify/iconify/issues",
|
||||
"homepage": "https://iconify.design/",
|
||||
"funding": "https://github.com/sponsors/cyberalien",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/iconify/iconify.git",
|
||||
"directory": "components/svg-framework"
|
||||
},
|
||||
"scripts": {
|
||||
"clean": "rimraf lib dist tests-compiled tsconfig.tsbuildinfo",
|
||||
"lint": "eslint src/**/*.ts",
|
||||
"prebuild": "pnpm run lint && pnpm run clean",
|
||||
"build": "node build",
|
||||
"build:lib": "tsc -b",
|
||||
"build:dist": "rollup -c rollup.config.mjs",
|
||||
"build:api": "api-extractor run --local --verbose",
|
||||
"build:api2": "api-extractor run --local --verbose --config api-extractor.without-api.json",
|
||||
"test:jest": "jest --runInBand",
|
||||
"test:mjs": "cross-env NODE_OPTIONS=--experimental-vm-modules node tests/import-test.mjs",
|
||||
"test": "pnpm run test:jest && pnpm run test:mjs"
|
||||
},
|
||||
"exports": {
|
||||
"./*": "./*",
|
||||
".": {
|
||||
"require": "./dist/iconify.cjs",
|
||||
"import": "./dist/iconify.mjs",
|
||||
"types": "./dist/iconify.d.ts",
|
||||
"default": "./dist/iconify.min.js"
|
||||
},
|
||||
"./dist/iconify": {
|
||||
"require": "./dist/iconify.cjs",
|
||||
"import": "./dist/iconify.mjs",
|
||||
"default": "./dist/iconify.min.js",
|
||||
"types": "./dist/iconify.d.ts"
|
||||
},
|
||||
"./dist/iconify.min": {
|
||||
"require": "./dist/iconify.cjs",
|
||||
"import": "./dist/iconify.mjs",
|
||||
"types": "./dist/iconify.d.ts",
|
||||
"default": "./dist/iconify.min.js"
|
||||
},
|
||||
"./dist/iconify.without-api": {
|
||||
"require": "./dist/iconify.without-api.cjs",
|
||||
"import": "./dist/iconify.without-api.mjs",
|
||||
"types": "./dist/iconify.without-api.d.ts",
|
||||
"default": "./dist/iconify.without-api.min.js"
|
||||
},
|
||||
"./dist/iconify.without-api.min": {
|
||||
"require": "./dist/iconify.without-api.cjs",
|
||||
"import": "./dist/iconify.without-api.mjs",
|
||||
"types": "./dist/iconify.without-api.d.ts",
|
||||
"default": "./dist/iconify.without-api.min.js"
|
||||
},
|
||||
"./offline": {
|
||||
"require": "./dist/iconify.without-api.cjs",
|
||||
"import": "./dist/iconify.without-api.mjs",
|
||||
"types": "./dist/iconify.without-api.d.ts",
|
||||
"default": "./dist/iconify.without-api.min.js"
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@iconify/types": "workspace:^"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify/core": "workspace:^",
|
||||
"@iconify/utils": "workspace:^",
|
||||
"@microsoft/api-extractor": "^7.35.1",
|
||||
"@rollup/plugin-node-resolve": "^15.1.0",
|
||||
"@rollup/plugin-replace": "^5.0.2",
|
||||
"@rollup/plugin-terser": "^0.4.3",
|
||||
"@types/jest": "^29.5.2",
|
||||
"@types/jsdom": "^21.1.1",
|
||||
"@types/node": "^18.16.16",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.9",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^8.42.0",
|
||||
"jest": "^29.5.0",
|
||||
"jsdom": "^21.1.2",
|
||||
"rimraf": "^4.4.1",
|
||||
"rollup": "^3.23.1",
|
||||
"ts-jest": "^29.1.0",
|
||||
"typescript": "^5.1.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
import { readFileSync, writeFileSync } from 'fs';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import terser from '@rollup/plugin-terser';
|
||||
import replace from '@rollup/plugin-replace';
|
||||
|
||||
const names = ['iconify', 'iconify.without-api'];
|
||||
const global = 'Iconify';
|
||||
|
||||
// Wrapper to export module as global and as ES module
|
||||
const header = `/**
|
||||
* (c) Iconify
|
||||
*
|
||||
* For the full copyright and license information, please view the license.txt or license.gpl.txt
|
||||
* files at https://github.com/iconify/iconify
|
||||
*
|
||||
* Licensed under MIT.
|
||||
*
|
||||
* @license MIT
|
||||
* @version __iconify_version__
|
||||
*/`;
|
||||
|
||||
const defaultFooter = `
|
||||
// Export to window or web worker
|
||||
try {
|
||||
if (self.Iconify === void 0) {
|
||||
self.Iconify = Iconify;
|
||||
}
|
||||
} catch (err) {
|
||||
}`;
|
||||
|
||||
const iifeFooter = `
|
||||
// Export as ES module
|
||||
if (typeof exports === 'object') {
|
||||
try {
|
||||
exports.__esModule = true;
|
||||
exports.default = Iconify;
|
||||
for (var key in Iconify) {
|
||||
exports[key] = Iconify[key];
|
||||
}
|
||||
} catch (err) {
|
||||
}
|
||||
}
|
||||
|
||||
${defaultFooter}`;
|
||||
|
||||
// Get replacements
|
||||
const replacements = {
|
||||
preventAssignment: true,
|
||||
};
|
||||
const packageJSON = JSON.parse(readFileSync('package.json', 'utf8'));
|
||||
replacements['__iconify_version__'] = packageJSON.version;
|
||||
|
||||
// Update README.md
|
||||
let readme = readFileSync('README.md', 'utf8');
|
||||
const oldReadme = readme;
|
||||
const replaceCodeLink = (search) => {
|
||||
let start = 0;
|
||||
let pos;
|
||||
while ((pos = readme.indexOf(search, start)) !== -1) {
|
||||
start = pos + search.length;
|
||||
let pos2 = readme.indexOf('/', start);
|
||||
if (pos2 === -1) {
|
||||
return;
|
||||
}
|
||||
readme =
|
||||
readme.slice(0, start) + packageJSON.version + readme.slice(pos2);
|
||||
}
|
||||
};
|
||||
replaceCodeLink('/code.iconify.design/3/');
|
||||
replaceCodeLink('/@iconify/iconify@');
|
||||
|
||||
if (readme !== oldReadme) {
|
||||
console.log('Updatead README');
|
||||
writeFileSync('README.md', readme, 'utf8');
|
||||
}
|
||||
|
||||
// Export configuration
|
||||
const config = [];
|
||||
names.forEach((name) => {
|
||||
// Full and minified
|
||||
[false, true].forEach((minify) => {
|
||||
// Parse all formats
|
||||
['js', 'cjs', 'mjs'].forEach((ext) => {
|
||||
if (minify && ext !== 'js') {
|
||||
// Minify only .js files
|
||||
return;
|
||||
}
|
||||
|
||||
// Get export format and footer
|
||||
let format = ext;
|
||||
let footer = defaultFooter;
|
||||
switch (ext) {
|
||||
case 'js':
|
||||
format = 'iife';
|
||||
footer = iifeFooter;
|
||||
break;
|
||||
|
||||
case 'mjs':
|
||||
format = 'es';
|
||||
break;
|
||||
}
|
||||
|
||||
const item = {
|
||||
input: `lib/${name}.js`,
|
||||
output: [
|
||||
{
|
||||
file: `dist/${name}${minify ? '.min' : ''}.${ext}`,
|
||||
format,
|
||||
exports: 'named',
|
||||
name: global,
|
||||
banner: header,
|
||||
footer,
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
resolve({
|
||||
browser: true,
|
||||
}),
|
||||
replace(replacements),
|
||||
],
|
||||
};
|
||||
|
||||
if (minify) {
|
||||
item.plugins.push(terser());
|
||||
}
|
||||
|
||||
config.push(item);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
export default config;
|
||||
|
|
@ -1,230 +0,0 @@
|
|||
import type { IconifyJSON } from '@iconify/types';
|
||||
import { stringToIcon } from '@iconify/utils/lib/icon/name';
|
||||
import type { IconifyIconCustomisations } from '@iconify/utils/lib/customisations/defaults';
|
||||
import { mergeCustomisations } from '@iconify/utils/lib/customisations/merge';
|
||||
import {
|
||||
getIconData,
|
||||
addCollection,
|
||||
} from '@iconify/core/lib/storage/functions';
|
||||
import type { IconifyIconBuildResult } from '@iconify/utils/lib/svg/build';
|
||||
import { iconToSVG } from '@iconify/utils/lib/svg/build';
|
||||
import { initObserver } from './observer/index';
|
||||
import { scanDOM, scanElement } from './scanner/index';
|
||||
import { addBodyNode } from './observer/root';
|
||||
import { renderInlineSVG } from './render/svg';
|
||||
import { defaultExtendedIconCustomisations } from './scanner/config';
|
||||
|
||||
/**
|
||||
* Generate icon
|
||||
*/
|
||||
function generateIcon(
|
||||
name: string,
|
||||
customisations: IconifyIconCustomisations | undefined,
|
||||
returnString: false | undefined
|
||||
): SVGSVGElement | null;
|
||||
function generateIcon(
|
||||
name: string,
|
||||
customisations: IconifyIconCustomisations | undefined,
|
||||
returnString: true
|
||||
): string | null;
|
||||
function generateIcon(
|
||||
name: string,
|
||||
customisations?: IconifyIconCustomisations,
|
||||
returnString = false
|
||||
): SVGSVGElement | string | null {
|
||||
// Get icon data
|
||||
const iconData = getIconData(name);
|
||||
if (!iconData) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Split name
|
||||
const iconName = stringToIcon(name);
|
||||
|
||||
// Clean up customisations
|
||||
const changes = mergeCustomisations(
|
||||
defaultExtendedIconCustomisations,
|
||||
customisations || {}
|
||||
);
|
||||
|
||||
// Get data
|
||||
const result = renderInlineSVG(
|
||||
document.createElement('span'),
|
||||
{
|
||||
name,
|
||||
icon: iconName,
|
||||
customisations: changes,
|
||||
},
|
||||
iconData
|
||||
);
|
||||
return returnString
|
||||
? result.outerHTML
|
||||
: (result as unknown as SVGSVGElement);
|
||||
}
|
||||
|
||||
/**
|
||||
* Iconify interface
|
||||
*/
|
||||
export interface IconifyCommonFunctions {
|
||||
/* General section */
|
||||
/**
|
||||
* Get version
|
||||
*/
|
||||
getVersion: () => string;
|
||||
|
||||
/* Render icons */
|
||||
/**
|
||||
* Render icons
|
||||
*/
|
||||
renderSVG: (
|
||||
name: string,
|
||||
customisations?: IconifyIconCustomisations
|
||||
) => SVGElement | null;
|
||||
|
||||
renderHTML: (
|
||||
name: string,
|
||||
customisations?: IconifyIconCustomisations
|
||||
) => string | null;
|
||||
|
||||
/**
|
||||
* Get icon data
|
||||
*/
|
||||
renderIcon: (
|
||||
name: string,
|
||||
customisations?: IconifyIconCustomisations
|
||||
) => IconifyIconBuildResult | null;
|
||||
|
||||
/* Scanner */
|
||||
/**
|
||||
* Scan DOM
|
||||
*/
|
||||
scan: (root?: HTMLElement) => void;
|
||||
|
||||
/* Observer */
|
||||
/**
|
||||
* Add root node
|
||||
*/
|
||||
observe: (root: HTMLElement) => void;
|
||||
|
||||
/**
|
||||
* Remove root node
|
||||
*/
|
||||
stopObserving: (root: HTMLElement) => void;
|
||||
|
||||
/**
|
||||
* Pause observer
|
||||
*/
|
||||
pauseObserver: (root?: HTMLElement) => void;
|
||||
|
||||
/**
|
||||
* Resume observer
|
||||
*/
|
||||
resumeObserver: (root?: HTMLElement) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get version
|
||||
*/
|
||||
export function getVersion(): string {
|
||||
return '__iconify_version__';
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate SVG element
|
||||
*/
|
||||
export function renderSVG(
|
||||
name: string,
|
||||
customisations?: IconifyIconCustomisations
|
||||
): SVGElement | null {
|
||||
return generateIcon(name, customisations, false) as SVGElement | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate SVG as string
|
||||
*/
|
||||
export function renderHTML(
|
||||
name: string,
|
||||
customisations?: IconifyIconCustomisations
|
||||
): string | null {
|
||||
return generateIcon(name, customisations, true) as string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get rendered icon as object that can be used to create SVG (use replaceIDs on body)
|
||||
*/
|
||||
export function renderIcon(
|
||||
name: string,
|
||||
customisations?: IconifyIconCustomisations
|
||||
): IconifyIconBuildResult | null {
|
||||
// Get icon data
|
||||
const iconData = getIconData(name);
|
||||
if (!iconData) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Clean up customisations
|
||||
const changes = mergeCustomisations(
|
||||
defaultExtendedIconCustomisations,
|
||||
customisations || {}
|
||||
);
|
||||
|
||||
// Get data
|
||||
return iconToSVG(iconData, changes);
|
||||
}
|
||||
|
||||
/**
|
||||
* Scan DOM
|
||||
*/
|
||||
export function scan(root?: HTMLElement): void {
|
||||
if (root) {
|
||||
scanElement(root);
|
||||
} else {
|
||||
scanDOM();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialise stuff
|
||||
*/
|
||||
if (typeof document !== 'undefined' && typeof window !== 'undefined') {
|
||||
// Add document.body node
|
||||
addBodyNode();
|
||||
|
||||
interface WindowWithIconifyStuff {
|
||||
IconifyPreload?: IconifyJSON[] | IconifyJSON;
|
||||
}
|
||||
const _window = window as WindowWithIconifyStuff;
|
||||
|
||||
// Load icons from global "IconifyPreload"
|
||||
if (_window.IconifyPreload !== void 0) {
|
||||
const preload = _window.IconifyPreload;
|
||||
const err = 'Invalid IconifyPreload syntax.';
|
||||
if (typeof preload === 'object' && preload !== null) {
|
||||
(preload instanceof Array ? preload : [preload]).forEach((item) => {
|
||||
try {
|
||||
if (
|
||||
// Check if item is an object and not null/array
|
||||
typeof item !== 'object' ||
|
||||
item === null ||
|
||||
item instanceof Array ||
|
||||
// Check for 'icons' and 'prefix'
|
||||
typeof item.icons !== 'object' ||
|
||||
typeof item.prefix !== 'string' ||
|
||||
// Add icon set
|
||||
!addCollection(item)
|
||||
) {
|
||||
console.error(err);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Load observer and scan DOM on next tick
|
||||
setTimeout(() => {
|
||||
initObserver(scanDOM);
|
||||
scanDOM();
|
||||
});
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
/**
|
||||
* Execute function when DOM is ready
|
||||
*/
|
||||
export function onReady(callback: () => void): void {
|
||||
const doc = document;
|
||||
if (doc.readyState && doc.readyState !== 'loading') {
|
||||
callback();
|
||||
} else {
|
||||
doc.addEventListener('DOMContentLoaded', callback);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,278 +0,0 @@
|
|||
// Core
|
||||
import type { IconifyJSON, IconifyIcon } from '@iconify/types';
|
||||
import type { IconifyIconName } from '@iconify/utils/lib/icon/name';
|
||||
import type { IconifyIconSize } from '@iconify/utils/lib/customisations/defaults';
|
||||
import type { IconifyIconBuildResult } from '@iconify/utils/lib/svg/build';
|
||||
import type { IconifyStorageFunctions } from '@iconify/core/lib/storage/functions';
|
||||
import {
|
||||
iconLoaded,
|
||||
getIcon,
|
||||
addIcon,
|
||||
addCollection,
|
||||
} from '@iconify/core/lib/storage/functions';
|
||||
import { listIcons } from '@iconify/core/lib/storage/storage';
|
||||
import type { IconifyBuilderFunctions } from '@iconify/core/lib/builder/functions';
|
||||
import { iconToSVG as buildIcon } from '@iconify/utils/lib/svg/build';
|
||||
import { replaceIDs } from '@iconify/utils/lib/svg/id';
|
||||
import { calculateSize } from '@iconify/utils/lib/svg/size';
|
||||
|
||||
// Cache
|
||||
import { initBrowserStorage } from '@iconify/core/lib/browser-storage';
|
||||
import type {
|
||||
IconifyBrowserCacheFunctions,
|
||||
IconifyBrowserCacheType,
|
||||
} from '@iconify/core/lib/browser-storage/functions';
|
||||
import { toggleBrowserCache } from '@iconify/core/lib/browser-storage/functions';
|
||||
|
||||
// API
|
||||
import type {
|
||||
IconifyAPIFunctions,
|
||||
IconifyAPIInternalFunctions,
|
||||
IconifyAPIQueryParams,
|
||||
IconifyAPICustomQueryParams,
|
||||
} from '@iconify/core/lib/api/functions';
|
||||
import type {
|
||||
IconifyAPIModule,
|
||||
IconifyAPISendQuery,
|
||||
IconifyAPIPrepareIconsQuery,
|
||||
} from '@iconify/core/lib/api/modules';
|
||||
import { setAPIModule } from '@iconify/core/lib/api/modules';
|
||||
import type {
|
||||
PartialIconifyAPIConfig,
|
||||
IconifyAPIConfig,
|
||||
GetAPIConfig,
|
||||
} from '@iconify/core/lib/api/config';
|
||||
import {
|
||||
addAPIProvider,
|
||||
getAPIConfig,
|
||||
listAPIProviders,
|
||||
} from '@iconify/core/lib/api/config';
|
||||
import {
|
||||
fetchAPIModule,
|
||||
getFetch,
|
||||
setFetch,
|
||||
} from '@iconify/core/lib/api/modules/fetch';
|
||||
import type {
|
||||
IconifyIconLoaderCallback,
|
||||
IconifyIconLoaderAbort,
|
||||
} from '@iconify/core/lib/api/icons';
|
||||
import { loadIcons, loadIcon } from '@iconify/core/lib/api/icons';
|
||||
import { sendAPIQuery } from '@iconify/core/lib/api/query';
|
||||
|
||||
// Other
|
||||
import type { IconifyCommonFunctions } from './common';
|
||||
import { getVersion, renderSVG, renderHTML, renderIcon, scan } from './common';
|
||||
import {
|
||||
observe,
|
||||
stopObserving,
|
||||
pauseObserver,
|
||||
resumeObserver,
|
||||
} from './observer/index';
|
||||
import type {
|
||||
IconifyRenderMode,
|
||||
IconifyIconCustomisations,
|
||||
} from './scanner/config';
|
||||
|
||||
/**
|
||||
* Export required types
|
||||
*/
|
||||
// Function sets
|
||||
export {
|
||||
IconifyStorageFunctions,
|
||||
IconifyBuilderFunctions,
|
||||
IconifyBrowserCacheFunctions,
|
||||
IconifyAPIFunctions,
|
||||
IconifyAPIInternalFunctions,
|
||||
};
|
||||
|
||||
// JSON stuff
|
||||
export { IconifyIcon, IconifyJSON, IconifyIconName };
|
||||
|
||||
// Customisations
|
||||
export { IconifyIconCustomisations, IconifyIconSize, IconifyRenderMode };
|
||||
|
||||
// Build
|
||||
export { IconifyIconBuildResult };
|
||||
|
||||
// API
|
||||
export {
|
||||
IconifyAPIConfig,
|
||||
IconifyIconLoaderCallback,
|
||||
IconifyIconLoaderAbort,
|
||||
IconifyAPIModule,
|
||||
GetAPIConfig,
|
||||
IconifyAPIPrepareIconsQuery,
|
||||
IconifyAPISendQuery,
|
||||
PartialIconifyAPIConfig,
|
||||
IconifyAPIQueryParams,
|
||||
IconifyAPICustomQueryParams,
|
||||
};
|
||||
|
||||
// Cache
|
||||
export { IconifyBrowserCacheType };
|
||||
|
||||
/**
|
||||
* Iconify interface
|
||||
*/
|
||||
export interface IconifyGlobal
|
||||
extends IconifyStorageFunctions,
|
||||
IconifyBuilderFunctions,
|
||||
IconifyCommonFunctions,
|
||||
IconifyBrowserCacheFunctions,
|
||||
IconifyAPIFunctions {
|
||||
_api: IconifyAPIInternalFunctions;
|
||||
}
|
||||
|
||||
/**
|
||||
* Enable cache
|
||||
*/
|
||||
function enableCache(storage: IconifyBrowserCacheType, enable?: boolean): void {
|
||||
toggleBrowserCache(storage, enable !== false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Disable cache
|
||||
*/
|
||||
function disableCache(storage: IconifyBrowserCacheType): void {
|
||||
toggleBrowserCache(storage, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialise stuff
|
||||
*/
|
||||
// Set API module
|
||||
setAPIModule('', fetchAPIModule);
|
||||
|
||||
/**
|
||||
* Browser stuff
|
||||
*/
|
||||
if (typeof document !== 'undefined' && typeof window !== 'undefined') {
|
||||
// Set cache and load existing cache
|
||||
initBrowserStorage();
|
||||
|
||||
interface WindowWithIconifyStuff {
|
||||
IconifyProviders?: Record<string, PartialIconifyAPIConfig>;
|
||||
}
|
||||
const _window = window as WindowWithIconifyStuff;
|
||||
|
||||
// Set API from global "IconifyProviders"
|
||||
if (_window.IconifyProviders !== void 0) {
|
||||
const providers = _window.IconifyProviders;
|
||||
if (typeof providers === 'object' && providers !== null) {
|
||||
for (const key in providers) {
|
||||
const err = 'IconifyProviders[' + key + '] is invalid.';
|
||||
try {
|
||||
const value = providers[key];
|
||||
if (
|
||||
typeof value !== 'object' ||
|
||||
!value ||
|
||||
value.resources === void 0
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
if (!addAPIProvider(key, value)) {
|
||||
console.error(err);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Internal API
|
||||
*/
|
||||
const _api: IconifyAPIInternalFunctions = {
|
||||
getAPIConfig,
|
||||
setAPIModule,
|
||||
sendAPIQuery,
|
||||
setFetch,
|
||||
getFetch,
|
||||
listAPIProviders,
|
||||
};
|
||||
|
||||
/**
|
||||
* Global variable
|
||||
*/
|
||||
const Iconify: IconifyGlobal = {
|
||||
// IconifyAPIInternalFunctions
|
||||
_api,
|
||||
|
||||
// IconifyAPIFunctions
|
||||
addAPIProvider,
|
||||
loadIcons,
|
||||
loadIcon,
|
||||
|
||||
// IconifyStorageFunctions
|
||||
iconLoaded,
|
||||
iconExists: iconLoaded, // deprecated, kept to avoid breaking changes
|
||||
getIcon,
|
||||
listIcons,
|
||||
addIcon,
|
||||
addCollection,
|
||||
|
||||
// IconifyBuilderFunctions
|
||||
replaceIDs,
|
||||
calculateSize,
|
||||
buildIcon,
|
||||
|
||||
// IconifyCommonFunctions
|
||||
getVersion,
|
||||
renderSVG,
|
||||
renderHTML,
|
||||
renderIcon,
|
||||
scan,
|
||||
observe,
|
||||
stopObserving,
|
||||
pauseObserver,
|
||||
resumeObserver,
|
||||
|
||||
// IconifyBrowserCacheFunctions
|
||||
enableCache,
|
||||
disableCache,
|
||||
};
|
||||
|
||||
/**
|
||||
* Default export
|
||||
*/
|
||||
export default Iconify;
|
||||
|
||||
/**
|
||||
* Named exports
|
||||
*/
|
||||
// IconifyAPIInternalFunctions
|
||||
export { _api };
|
||||
|
||||
// IconifyAPIFunctions
|
||||
export { addAPIProvider, loadIcons, loadIcon };
|
||||
|
||||
// IconifyStorageFunctions
|
||||
export {
|
||||
iconLoaded,
|
||||
iconLoaded as iconExists, // deprecated, kept to avoid breaking changes
|
||||
getIcon,
|
||||
listIcons,
|
||||
addIcon,
|
||||
addCollection,
|
||||
};
|
||||
|
||||
// IconifyBuilderFunctions
|
||||
export { replaceIDs, calculateSize, buildIcon };
|
||||
|
||||
// IconifyCommonFunctions
|
||||
export {
|
||||
getVersion,
|
||||
renderSVG,
|
||||
renderHTML,
|
||||
renderIcon,
|
||||
scan,
|
||||
observe,
|
||||
stopObserving,
|
||||
pauseObserver,
|
||||
resumeObserver,
|
||||
};
|
||||
|
||||
// IconifyBrowserCacheFunctions
|
||||
export { enableCache, disableCache };
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user