mirror of
https://github.com/iconify/iconify.git
synced 2025-01-26 00:28:28 +00:00
Update dependencies, rewrite readme files
This commit is contained in:
Vjacheslav Trushkin
parent
2c83b87f5c
commit
42fd30d28d
1199
packages/browser-tests/package-lock.json
generated
1199
packages/browser-tests/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -3,7 +3,7 @@
|
||||
Iconify is the most versatile icon framework.
|
||||
|
||||
- Unified icon framework that can be used with any icon library.
|
||||
- Out of the box includes 80+ icon sets with 70,000 icons.
|
||||
- Out of the box includes 90+ icon sets with 80,000 icons.
|
||||
- Embed icons in HTML with SVG framework or components for front-end frameworks.
|
||||
- Embed icons in designs with plug-ins for Figma, Sketch and Adobe XD.
|
||||
- Add icon search to your applications with Iconify Icon Finder.
|
||||
@ -18,6 +18,8 @@ Documentation is currently not available because there is no demand for it.
|
||||
|
||||
If anyone would like to create custom Iconify implementation and needs documentation for Iconify Core, please create an issue on Iconify repository on GitHub.
|
||||
|
||||
You can browse [icon components documentation](https://docs.iconify.design/icon-components/), which explains how most functions exported by core package work. Components mostly just re-export functions from this package.
|
||||
|
||||
## License
|
||||
|
||||
Iconify is dual-licensed under Apache 2.0 and GPL 2.0 license. You may select, at your option, one of the above-listed licenses.
|
||||
|
||||
801
packages/core/package-lock.json
generated
801
packages/core/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -2,7 +2,7 @@
|
||||
"name": "@iconify/core",
|
||||
"description": "Reusable files used by multiple Iconify packages",
|
||||
"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
|
||||
"version": "1.1.1",
|
||||
"version": "1.1.2",
|
||||
"license": "(Apache-2.0 OR GPL-2.0)",
|
||||
"bugs": "https://github.com/iconify/iconify/issues",
|
||||
"homepage": "https://iconify.design/",
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
"target": "ES2019",
|
||||
"module": "commonjs",
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"declarationMap": false,
|
||||
"sourceMap": false,
|
||||
"composite": true,
|
||||
"strict": true,
|
||||
|
||||
48
packages/iconify/package-lock.json
generated
48
packages/iconify/package-lock.json
generated
@ -75,9 +75,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@iconify/core": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.1.1.tgz",
|
||||
"integrity": "sha512-NgI3gIcyRjZdeRFK5IPhKbWQHcIzuEfBXp8tPExcsb/WopKsGzHBDEePigxH9QHZ3WUBPQdfOxBNq7iwZlS2BA==",
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.1.2.tgz",
|
||||
"integrity": "sha512-1NgvJqGqiXXhoT/O5R1pTvZTfbByMaT+rJeazt4jWH6G56RJLMuJ0iBjUBJWfKCLQQ1nsFAurxpdhpvfCJLI5g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@cyberalien/redundancy": "^1.1.0",
|
||||
@ -320,9 +320,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@types/chai": {
|
||||
"version": "4.2.18",
|
||||
"resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.2.18.tgz",
|
||||
"integrity": "sha512-rS27+EkB/RE1Iz3u0XtVL5q36MGDWbgYe7zWiodyKNUnthxY0rukK5V36eiUCtCisB7NN8zKYH6DO2M37qxFEQ==",
|
||||
"version": "4.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.2.19.tgz",
|
||||
"integrity": "sha512-jRJgpRBuY+7izT7/WNXP/LsMO9YonsstuL+xuvycDyESpoDoIAsMd7suwpB4h9oEWB+ZlPTqJJ8EHomzNhwTPQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
@ -1692,9 +1692,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "2.52.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.52.0.tgz",
|
||||
"integrity": "sha512-lSkBDGsVoXjqaBf7dsHwxBJz+p+hJEP72P+LOitA0yVs+Nzxj76FidkZE2thrmhjwGqLYiJo39opi7mAfaQ/Vg==",
|
||||
"version": "2.52.1",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.52.1.tgz",
|
||||
"integrity": "sha512-/SPqz8UGnp4P1hq6wc9gdTqA2bXQXGx13TtoL03GBm6qGRI6Hm3p4Io7GeiHNLl0BsQAne1JNYY+q/apcY933w==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"rollup": "dist/bin/rollup"
|
||||
@ -1917,9 +1917,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.2.tgz",
|
||||
"integrity": "sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==",
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.4.tgz",
|
||||
"integrity": "sha512-uauPG7XZn9F/mo+7MrsRjyvbxFpzemRjKEZXS4AK83oP2KKOJPvb+9cO/gmnv8arWZvhnjVOXz7B49m1l0e9Ew==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
@ -2291,9 +2291,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"@iconify/core": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.1.1.tgz",
|
||||
"integrity": "sha512-NgI3gIcyRjZdeRFK5IPhKbWQHcIzuEfBXp8tPExcsb/WopKsGzHBDEePigxH9QHZ3WUBPQdfOxBNq7iwZlS2BA==",
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.1.2.tgz",
|
||||
"integrity": "sha512-1NgvJqGqiXXhoT/O5R1pTvZTfbByMaT+rJeazt4jWH6G56RJLMuJ0iBjUBJWfKCLQQ1nsFAurxpdhpvfCJLI5g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@cyberalien/redundancy": "^1.1.0",
|
||||
@ -2509,9 +2509,9 @@
|
||||
}
|
||||
},
|
||||
"@types/chai": {
|
||||
"version": "4.2.18",
|
||||
"resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.2.18.tgz",
|
||||
"integrity": "sha512-rS27+EkB/RE1Iz3u0XtVL5q36MGDWbgYe7zWiodyKNUnthxY0rukK5V36eiUCtCisB7NN8zKYH6DO2M37qxFEQ==",
|
||||
"version": "4.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.2.19.tgz",
|
||||
"integrity": "sha512-jRJgpRBuY+7izT7/WNXP/LsMO9YonsstuL+xuvycDyESpoDoIAsMd7suwpB4h9oEWB+ZlPTqJJ8EHomzNhwTPQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/estree": {
|
||||
@ -3569,9 +3569,9 @@
|
||||
}
|
||||
},
|
||||
"rollup": {
|
||||
"version": "2.52.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.52.0.tgz",
|
||||
"integrity": "sha512-lSkBDGsVoXjqaBf7dsHwxBJz+p+hJEP72P+LOitA0yVs+Nzxj76FidkZE2thrmhjwGqLYiJo39opi7mAfaQ/Vg==",
|
||||
"version": "2.52.1",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.52.1.tgz",
|
||||
"integrity": "sha512-/SPqz8UGnp4P1hq6wc9gdTqA2bXQXGx13TtoL03GBm6qGRI6Hm3p4Io7GeiHNLl0BsQAne1JNYY+q/apcY933w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fsevents": "~2.3.2"
|
||||
@ -3733,9 +3733,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"typescript": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.2.tgz",
|
||||
"integrity": "sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==",
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.4.tgz",
|
||||
"integrity": "sha512-uauPG7XZn9F/mo+7MrsRjyvbxFpzemRjKEZXS4AK83oP2KKOJPvb+9cO/gmnv8arWZvhnjVOXz7B49m1l0e9Ew==",
|
||||
"dev": true
|
||||
},
|
||||
"unicode-canonical-property-names-ecmascript": {
|
||||
|
||||
23091
packages/react-demo/package-lock.json
generated
23091
packages/react-demo/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -4,8 +4,7 @@
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "^4.0.3"
|
||||
"react-dom": "^17.0.2"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
@ -31,6 +30,7 @@
|
||||
"@iconify-icons/mdi-light": "^1.1.0",
|
||||
"@iconify-icons/uil": "^1.1.1",
|
||||
"@iconify/core": "^1.0.0",
|
||||
"@iconify/react": "^3.0.0-alpha.0"
|
||||
"@iconify/react": "^3.0.0-alpha.0",
|
||||
"react-scripts": "^4.0.3"
|
||||
}
|
||||
}
|
||||
|
||||
3867
packages/react/package-lock.json
generated
3867
packages/react/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -109,7 +109,7 @@ import home from '@iconify/icons-mdi-light/home';
|
||||
|
||||
All icons are available as ES modules for modern bundler and as CommonJS modules for outdated bundlers. ES modules use format `@iconify-icons/{prefix}`, CommonJS modules use `@iconify/icons-{prefix}`.
|
||||
|
||||
For more details, see "Offline icon packages" section below.
|
||||
For more details, see [icon packages documentation](https://docs.iconify.design/sources/npm/).
|
||||
|
||||
## Inline icon
|
||||
|
||||
@ -183,6 +183,7 @@ The icon component has the following optional properties:
|
||||
- `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
|
||||
|
||||
@ -349,6 +350,20 @@ Examples of 90 degrees rotation:
|
||||
<Icon 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 React documentation](https://docs.iconify.design/icon-components/react/).
|
||||
|
||||
251
packages/svelte-demo/package-lock.json
generated
251
packages/svelte-demo/package-lock.json
generated
@ -24,29 +24,38 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
"version": "7.12.13",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
|
||||
"integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
|
||||
"version": "7.14.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
|
||||
"integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/highlight": "^7.12.13"
|
||||
"@babel/highlight": "^7.14.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/helper-validator-identifier": {
|
||||
"version": "7.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
|
||||
"integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==",
|
||||
"dev": true
|
||||
"version": "7.14.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
|
||||
"integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/highlight": {
|
||||
"version": "7.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz",
|
||||
"integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==",
|
||||
"version": "7.14.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
|
||||
"integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/helper-validator-identifier": "^7.14.0",
|
||||
"@babel/helper-validator-identifier": "^7.14.5",
|
||||
"chalk": "^2.0.0",
|
||||
"js-tokens": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@iconify-icons/mdi-light": {
|
||||
@ -62,15 +71,15 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@iconify/svelte": {
|
||||
"version": "2.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-sJK4q/prxg96r+i8AWdVniNXt3p1uIaxOXec0royd/K/GBkJO7zdq/J9XxAan+RogUganqplYL07Ecet7jJsaA==",
|
||||
"version": "2.0.0-alpha.7",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.0.0-alpha.7.tgz",
|
||||
"integrity": "sha512-qxrGMKGrCQps8gDSvbi4MXkzDnc1znKxFnK3na9GlKtIla/1CzN0ss+pSSfrafsCiQdUs1eF2cNB4wsDXeR2xg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@polka/url": {
|
||||
"version": "1.0.0-next.12",
|
||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.12.tgz",
|
||||
"integrity": "sha512-6RglhutqrGFMO1MNUXp95RBuYIuc8wTnMAV5MUhLmjTOy78ncwOw7RgeQ/HeymkKXRhZd0s2DNrM1rL7unk3MQ=="
|
||||
"version": "1.0.0-next.15",
|
||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.15.tgz",
|
||||
"integrity": "sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA=="
|
||||
},
|
||||
"node_modules/@rollup/plugin-commonjs": {
|
||||
"version": "16.0.0",
|
||||
@ -143,9 +152,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "15.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-15.0.1.tgz",
|
||||
"integrity": "sha512-TMkXt0Ck1y0KKsGr9gJtWGjttxlZnnvDtphxUOSd0bfaR6Q1jle+sPvrzNR1urqYTWMinoKvjKfXUGsumaO1PA==",
|
||||
"version": "15.12.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-15.12.4.tgz",
|
||||
"integrity": "sha512-zrNj1+yqYF4WskCMOHwN+w9iuD12+dGm0rQ35HLl9/Ouuq52cEtd0CH9qMgrdNmi5ejC1/V7vKEXYubB+65DkA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/resolve": {
|
||||
@ -252,24 +261,24 @@
|
||||
}
|
||||
},
|
||||
"node_modules/chokidar": {
|
||||
"version": "3.5.1",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
|
||||
"integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
|
||||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
|
||||
"integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"anymatch": "~3.1.1",
|
||||
"anymatch": "~3.1.2",
|
||||
"braces": "~3.0.2",
|
||||
"glob-parent": "~5.1.0",
|
||||
"glob-parent": "~5.1.2",
|
||||
"is-binary-path": "~2.1.0",
|
||||
"is-glob": "~4.0.1",
|
||||
"normalize-path": "~3.0.0",
|
||||
"readdirp": "~3.5.0"
|
||||
"readdirp": "~3.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.10.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.3.1"
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
@ -384,9 +393,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/glob": {
|
||||
"version": "7.1.6",
|
||||
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
|
||||
"integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
|
||||
"version": "7.1.7",
|
||||
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
|
||||
"integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"fs.realpath": "^1.0.0",
|
||||
@ -465,9 +474,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/is-core-module": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.3.0.tgz",
|
||||
"integrity": "sha512-xSphU2KG9867tsYdLD4RWQ1VqdFl4HTO9Thf3I/3dLEfr0dbPTWKsuCKrgqMljg4nPE+Gq0VCnzT3gr0CyBmsw==",
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
|
||||
"integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"has": "^1.0.3"
|
||||
@ -682,15 +691,15 @@
|
||||
}
|
||||
},
|
||||
"node_modules/path-parse": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
|
||||
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
|
||||
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/picomatch": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz",
|
||||
"integrity": "sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==",
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
|
||||
"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8.6"
|
||||
@ -709,9 +718,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
"version": "3.5.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
|
||||
"integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
||||
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"picomatch": "^2.2.1"
|
||||
@ -740,9 +749,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "2.46.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.46.0.tgz",
|
||||
"integrity": "sha512-qPGoUBNl+Z8uNu0z7pD3WPTABWRbcOwIrO/5ccDJzmrtzn0LVf6Lj91+L5CcWhXl6iWf23FQ6m8Jkl2CmN1O7Q==",
|
||||
"version": "2.52.1",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.52.1.tgz",
|
||||
"integrity": "sha512-/SPqz8UGnp4P1hq6wc9gdTqA2bXQXGx13TtoL03GBm6qGRI6Hm3p4Io7GeiHNLl0BsQAne1JNYY+q/apcY933w==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"rollup": "dist/bin/rollup"
|
||||
@ -751,7 +760,7 @@
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.3.1"
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup-plugin-livereload": {
|
||||
@ -860,11 +869,11 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sirv": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.11.tgz",
|
||||
"integrity": "sha512-SR36i3/LSWja7AJNRBz4fF/Xjpn7lQFI30tZ434dIy+bitLYSP+ZEenHg36i23V2SGEz+kqjksg0uOGZ5LPiqg==",
|
||||
"version": "1.0.12",
|
||||
"resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.12.tgz",
|
||||
"integrity": "sha512-+jQoCxndz7L2tqQL4ZyzfDhky0W/4ZJip3XoOuxyQWnAwMxindLl3Xv1qT4x1YX/re0leShvTm8Uk0kQspGhBg==",
|
||||
"dependencies": {
|
||||
"@polka/url": "^1.0.0-next.9",
|
||||
"@polka/url": "^1.0.0-next.15",
|
||||
"mime": "^2.3.1",
|
||||
"totalist": "^1.0.0"
|
||||
},
|
||||
@ -873,9 +882,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sirv-cli": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-1.0.11.tgz",
|
||||
"integrity": "sha512-L8NILoRSBd38VcfFcERYCaVCnWPBLo9G6u/a37UJ8Ysv4DfjizMbFBcM+SswNnndJienhR6qy8KFuAEaeL4g8Q==",
|
||||
"version": "1.0.12",
|
||||
"resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-1.0.12.tgz",
|
||||
"integrity": "sha512-Rs5PvF3a48zuLmrl8vcqVv9xF/WWPES19QawVkpdzqx7vD5SMZS07+ece1gK4umbslXN43YeIksYtQM5csgIzQ==",
|
||||
"dependencies": {
|
||||
"console-clear": "^1.1.0",
|
||||
"get-port": "^3.2.0",
|
||||
@ -883,7 +892,7 @@
|
||||
"local-access": "^1.0.1",
|
||||
"sade": "^1.6.0",
|
||||
"semiver": "^1.0.0",
|
||||
"sirv": "^1.0.11",
|
||||
"sirv": "^1.0.12",
|
||||
"tinydate": "^1.0.0"
|
||||
},
|
||||
"bin": {
|
||||
@ -940,9 +949,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/svelte": {
|
||||
"version": "3.38.1",
|
||||
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.38.1.tgz",
|
||||
"integrity": "sha512-N3XLAyfzqrFxwRLevBeW7Dke9ZlHRVGSIed5abo4Drvj+zvd2OyWpFa1x4nQUc8Lnvt4Kcn8/5le1peRDybNqg==",
|
||||
"version": "3.38.2",
|
||||
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.38.2.tgz",
|
||||
"integrity": "sha512-q5Dq0/QHh4BLJyEVWGe7Cej5NWs040LWjMbicBGZ+3qpFWJ1YObRmUDZKbbovddLC9WW7THTj3kYbTOFmU9fbg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
@ -1000,9 +1009,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "7.4.5",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz",
|
||||
"integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==",
|
||||
"version": "7.5.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.0.tgz",
|
||||
"integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8.3.0"
|
||||
@ -1023,27 +1032,27 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/code-frame": {
|
||||
"version": "7.12.13",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
|
||||
"integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
|
||||
"version": "7.14.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
|
||||
"integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/highlight": "^7.12.13"
|
||||
"@babel/highlight": "^7.14.5"
|
||||
}
|
||||
},
|
||||
"@babel/helper-validator-identifier": {
|
||||
"version": "7.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
|
||||
"integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==",
|
||||
"version": "7.14.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
|
||||
"integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
|
||||
"dev": true
|
||||
},
|
||||
"@babel/highlight": {
|
||||
"version": "7.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz",
|
||||
"integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==",
|
||||
"version": "7.14.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
|
||||
"integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.14.0",
|
||||
"@babel/helper-validator-identifier": "^7.14.5",
|
||||
"chalk": "^2.0.0",
|
||||
"js-tokens": "^4.0.0"
|
||||
}
|
||||
@ -1061,15 +1070,15 @@
|
||||
"dev": true
|
||||
},
|
||||
"@iconify/svelte": {
|
||||
"version": "2.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-sJK4q/prxg96r+i8AWdVniNXt3p1uIaxOXec0royd/K/GBkJO7zdq/J9XxAan+RogUganqplYL07Ecet7jJsaA==",
|
||||
"version": "2.0.0-alpha.7",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.0.0-alpha.7.tgz",
|
||||
"integrity": "sha512-qxrGMKGrCQps8gDSvbi4MXkzDnc1znKxFnK3na9GlKtIla/1CzN0ss+pSSfrafsCiQdUs1eF2cNB4wsDXeR2xg==",
|
||||
"dev": true
|
||||
},
|
||||
"@polka/url": {
|
||||
"version": "1.0.0-next.12",
|
||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.12.tgz",
|
||||
"integrity": "sha512-6RglhutqrGFMO1MNUXp95RBuYIuc8wTnMAV5MUhLmjTOy78ncwOw7RgeQ/HeymkKXRhZd0s2DNrM1rL7unk3MQ=="
|
||||
"version": "1.0.0-next.15",
|
||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.15.tgz",
|
||||
"integrity": "sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA=="
|
||||
},
|
||||
"@rollup/plugin-commonjs": {
|
||||
"version": "16.0.0",
|
||||
@ -1126,9 +1135,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "15.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-15.0.1.tgz",
|
||||
"integrity": "sha512-TMkXt0Ck1y0KKsGr9gJtWGjttxlZnnvDtphxUOSd0bfaR6Q1jle+sPvrzNR1urqYTWMinoKvjKfXUGsumaO1PA==",
|
||||
"version": "15.12.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-15.12.4.tgz",
|
||||
"integrity": "sha512-zrNj1+yqYF4WskCMOHwN+w9iuD12+dGm0rQ35HLl9/Ouuq52cEtd0CH9qMgrdNmi5ejC1/V7vKEXYubB+65DkA==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/resolve": {
|
||||
@ -1214,19 +1223,19 @@
|
||||
}
|
||||
},
|
||||
"chokidar": {
|
||||
"version": "3.5.1",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
|
||||
"integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
|
||||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
|
||||
"integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"anymatch": "~3.1.1",
|
||||
"anymatch": "~3.1.2",
|
||||
"braces": "~3.0.2",
|
||||
"fsevents": "~2.3.1",
|
||||
"glob-parent": "~5.1.0",
|
||||
"fsevents": "~2.3.2",
|
||||
"glob-parent": "~5.1.2",
|
||||
"is-binary-path": "~2.1.0",
|
||||
"is-glob": "~4.0.1",
|
||||
"normalize-path": "~3.0.0",
|
||||
"readdirp": "~3.5.0"
|
||||
"readdirp": "~3.6.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
@ -1319,9 +1328,9 @@
|
||||
"integrity": "sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw="
|
||||
},
|
||||
"glob": {
|
||||
"version": "7.1.6",
|
||||
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
|
||||
"integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
|
||||
"version": "7.1.7",
|
||||
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
|
||||
"integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fs.realpath": "^1.0.0",
|
||||
@ -1382,9 +1391,9 @@
|
||||
}
|
||||
},
|
||||
"is-core-module": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.3.0.tgz",
|
||||
"integrity": "sha512-xSphU2KG9867tsYdLD4RWQ1VqdFl4HTO9Thf3I/3dLEfr0dbPTWKsuCKrgqMljg4nPE+Gq0VCnzT3gr0CyBmsw==",
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
|
||||
"integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has": "^1.0.3"
|
||||
@ -1550,15 +1559,15 @@
|
||||
"dev": true
|
||||
},
|
||||
"path-parse": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
|
||||
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
|
||||
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
|
||||
"dev": true
|
||||
},
|
||||
"picomatch": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz",
|
||||
"integrity": "sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==",
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
|
||||
"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
|
||||
"dev": true
|
||||
},
|
||||
"randombytes": {
|
||||
@ -1571,9 +1580,9 @@
|
||||
}
|
||||
},
|
||||
"readdirp": {
|
||||
"version": "3.5.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
|
||||
"integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
||||
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"picomatch": "^2.2.1"
|
||||
@ -1596,12 +1605,12 @@
|
||||
}
|
||||
},
|
||||
"rollup": {
|
||||
"version": "2.46.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.46.0.tgz",
|
||||
"integrity": "sha512-qPGoUBNl+Z8uNu0z7pD3WPTABWRbcOwIrO/5ccDJzmrtzn0LVf6Lj91+L5CcWhXl6iWf23FQ6m8Jkl2CmN1O7Q==",
|
||||
"version": "2.52.1",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.52.1.tgz",
|
||||
"integrity": "sha512-/SPqz8UGnp4P1hq6wc9gdTqA2bXQXGx13TtoL03GBm6qGRI6Hm3p4Io7GeiHNLl0BsQAne1JNYY+q/apcY933w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fsevents": "~2.3.1"
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"rollup-plugin-livereload": {
|
||||
@ -1682,19 +1691,19 @@
|
||||
}
|
||||
},
|
||||
"sirv": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.11.tgz",
|
||||
"integrity": "sha512-SR36i3/LSWja7AJNRBz4fF/Xjpn7lQFI30tZ434dIy+bitLYSP+ZEenHg36i23V2SGEz+kqjksg0uOGZ5LPiqg==",
|
||||
"version": "1.0.12",
|
||||
"resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.12.tgz",
|
||||
"integrity": "sha512-+jQoCxndz7L2tqQL4ZyzfDhky0W/4ZJip3XoOuxyQWnAwMxindLl3Xv1qT4x1YX/re0leShvTm8Uk0kQspGhBg==",
|
||||
"requires": {
|
||||
"@polka/url": "^1.0.0-next.9",
|
||||
"@polka/url": "^1.0.0-next.15",
|
||||
"mime": "^2.3.1",
|
||||
"totalist": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"sirv-cli": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-1.0.11.tgz",
|
||||
"integrity": "sha512-L8NILoRSBd38VcfFcERYCaVCnWPBLo9G6u/a37UJ8Ysv4DfjizMbFBcM+SswNnndJienhR6qy8KFuAEaeL4g8Q==",
|
||||
"version": "1.0.12",
|
||||
"resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-1.0.12.tgz",
|
||||
"integrity": "sha512-Rs5PvF3a48zuLmrl8vcqVv9xF/WWPES19QawVkpdzqx7vD5SMZS07+ece1gK4umbslXN43YeIksYtQM5csgIzQ==",
|
||||
"requires": {
|
||||
"console-clear": "^1.1.0",
|
||||
"get-port": "^3.2.0",
|
||||
@ -1702,7 +1711,7 @@
|
||||
"local-access": "^1.0.1",
|
||||
"sade": "^1.6.0",
|
||||
"semiver": "^1.0.0",
|
||||
"sirv": "^1.0.11",
|
||||
"sirv": "^1.0.12",
|
||||
"tinydate": "^1.0.0"
|
||||
}
|
||||
},
|
||||
@ -1746,9 +1755,9 @@
|
||||
}
|
||||
},
|
||||
"svelte": {
|
||||
"version": "3.38.1",
|
||||
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.38.1.tgz",
|
||||
"integrity": "sha512-N3XLAyfzqrFxwRLevBeW7Dke9ZlHRVGSIed5abo4Drvj+zvd2OyWpFa1x4nQUc8Lnvt4Kcn8/5le1peRDybNqg==",
|
||||
"version": "3.38.2",
|
||||
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.38.2.tgz",
|
||||
"integrity": "sha512-q5Dq0/QHh4BLJyEVWGe7Cej5NWs040LWjMbicBGZ+3qpFWJ1YObRmUDZKbbovddLC9WW7THTj3kYbTOFmU9fbg==",
|
||||
"dev": true
|
||||
},
|
||||
"terser": {
|
||||
@ -1788,9 +1797,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"ws": {
|
||||
"version": "7.4.5",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz",
|
||||
"integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==",
|
||||
"version": "7.5.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.0.tgz",
|
||||
"integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
}
|
||||
|
||||
@ -1,27 +1,23 @@
|
||||
# Iconify for Svelte
|
||||
|
||||
Note: this documentation is for version 1.0. It has not been updated for 2.0 yet.
|
||||
|
||||
Iconify for Svelte is not yet another icon component! There are many of them already.
|
||||
|
||||
Iconify is the most versatile icon framework.
|
||||
What you get with other components:
|
||||
|
||||
- Unified icon framework that can be used with any icon library.
|
||||
- Out of the box includes 80+ icon sets with more than 70,000 icons.
|
||||
- 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.
|
||||
- Limited set of icons.
|
||||
- Large bundle size because all icons are bundled.
|
||||
|
||||
For more information visit [https://iconify.design/](https://iconify.design/).
|
||||
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.
|
||||
|
||||
Iconify for Svelte is a part of Iconify framework that makes it easy to use many icon libraries with Svelte.
|
||||
That means:
|
||||
|
||||
Iconify for Svelte features:
|
||||
- One syntax for over 80,000 icons from 90+ 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.
|
||||
|
||||
- Easy to use.
|
||||
- Bundles only icons that you need.
|
||||
- Change icon size and colour by changing font size and colour.
|
||||
- Renders pixel-perfect SVG.
|
||||
For more information about Iconify project visit [https://iconify.design/](https://iconify.design/).
|
||||
|
||||
For extended documentation visit [Iconify for Svelte documentation](https://docs.iconify.design/icon-components/svelte/).
|
||||
|
||||
## Installation
|
||||
|
||||
@ -37,25 +33,117 @@ If you are using Yarn:
|
||||
yarn add --dev @iconify/svelte
|
||||
```
|
||||
|
||||
This package does not include icons. Icons are split into separate packages that available at NPM. See below.
|
||||
## Usage with API
|
||||
|
||||
## Usage
|
||||
|
||||
Install `@iconify/svelte` and packages for selected icon sets. Import component from `@iconify/svelte` and icon data for the icon you want to use:
|
||||
Install `@iconify/svelte` and import `Icon` as default export from it:
|
||||
|
||||
```js
|
||||
import IconifyIcon from '@iconify/svelte';
|
||||
import home from '@iconify-icons/mdi/home';
|
||||
import faceWithMonocle from '@iconify-icons/twemoji/face-with-monocle';
|
||||
import Icon from '@iconify/svelte';
|
||||
```
|
||||
|
||||
Then use component with icon data as "icon" parameter:
|
||||
|
||||
```jsx
|
||||
<IconifyIcon icon={home} />
|
||||
<p>This is some text with <IconifyIcon icon={faceWithMonocle} inline={true} /></p>
|
||||
<Icon icon="mdi-light:home" />
|
||||
```
|
||||
|
||||
Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over 80,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
|
||||
|
||||
## Offline Usage
|
||||
|
||||
Retrieving icon data from Iconify API requires visitor to be online. What if you want to use component offline or on local network?
|
||||
|
||||
If you want to use icon component without relying on public Iconify API, there are several options:
|
||||
|
||||
1. You can import icon data from Iconify Icons packages.
|
||||
2. You can create custom icon bundles (more efficient, but requires more coding).
|
||||
3. You can host your own Iconify API instead of relying on third party service.
|
||||
|
||||
See [Iconify for Svelte offline use documentation](https://docs.iconify.design/icon-components/svelte/offline.html) or [Iconify API documentation](https://docs.iconify.design/sources/api/).
|
||||
|
||||
## 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 Svelte icon names documentation](https://docs.iconify.design/icon-components/svelte/icon-name.html) for more detailed explanation.
|
||||
|
||||
## Using icon data
|
||||
|
||||
Instead of icon name, you can pass icon data to component:
|
||||
|
||||
```jsx
|
||||
import Icon from '@iconify/svelte';
|
||||
import home from '@iconify-icons/mdi-light/home';
|
||||
|
||||
function renderHomeIcon() {
|
||||
return <Icon icon={home} />;
|
||||
}
|
||||
```
|
||||
|
||||
See [icon packages documentation](https://docs.iconify.design/sources/npm/) for more details.
|
||||
|
||||
### ES / CommonJS packages
|
||||
|
||||
Example above might currently fail with some use cases. Package `@iconify-icons/mdi-light` uses ES modules that some software might not support yet. But do not worry, there is a simple solution: switch to CommonJS icon packages.
|
||||
|
||||
To switch to CommonJS package, replace this line in example above:
|
||||
|
||||
```js
|
||||
import home from '@iconify-icons/mdi-light/home';
|
||||
```
|
||||
|
||||
with
|
||||
|
||||
```js
|
||||
import home from '@iconify/icons-mdi-light/home';
|
||||
```
|
||||
|
||||
All icons are available as ES modules for modern bundler and as CommonJS modules for outdated bundlers. ES modules use format `@iconify-icons/{prefix}`, CommonJS modules use `@iconify/icons-{prefix}`.
|
||||
|
||||
For more details, see [icon packages documentation](https://docs.iconify.design/sources/npm/).
|
||||
|
||||
## Inline icon
|
||||
|
||||
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 either boolean `inline` property.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import Icon from '@iconify/svelte';
|
||||
</script>
|
||||
|
||||
<p>
|
||||
Block:
|
||||
<Icon icon="line-md:image-twotone" />
|
||||
<Icon icon="mdi:account-box-outline" />
|
||||
</p>
|
||||
<p>
|
||||
Inline:
|
||||
<Icon icon="line-md:image-twotone" inline={true} />
|
||||
<Icon icon="mdi:account-box-outline" inline={true} />
|
||||
</p>
|
||||
```
|
||||
|
||||
Visual example to show the difference between inline and block modes:
|
||||
|
||||
|
||||
|
||||
## Icon component attributes
|
||||
|
||||
`icon` attribute is mandatory. It tells component what icon to render. If the attribute value is invalid, the component will render an empty icon. The value must be an object containing the icon data.
|
||||
@ -68,6 +156,7 @@ The icon component has the following optional attributes:
|
||||
- `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 attributes and events
|
||||
|
||||
@ -93,11 +182,11 @@ If you set only one dimension, another dimension will be calculated using the ic
|
||||
You can use numbers for `width` and `height`.
|
||||
|
||||
```jsx
|
||||
<IconifyIcon icon={homeIcon} height={24} />
|
||||
<Icon icon={homeIcon} height={24} />
|
||||
```
|
||||
|
||||
```jsx
|
||||
<IconifyIcon icon={homeIcon} width={16} height={16} />
|
||||
<Icon 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".
|
||||
@ -107,7 +196,7 @@ Number values are treated as pixels. That means in examples above, values are id
|
||||
If you use strings without units, they are treated the same as numbers in an example above.
|
||||
|
||||
```jsx
|
||||
<IconifyIcon icon={homeIcon} height="24" />
|
||||
<Icon icon="mdi-light:home" height="24" />
|
||||
```
|
||||
|
||||
#### Dimensions as strings with units
|
||||
@ -115,7 +204,7 @@ If you use strings without units, they are treated the same as numbers in an exa
|
||||
You can use units in width and height values:
|
||||
|
||||
```jsx
|
||||
<IconifyIcon icon={homeIcon} height="2em" />
|
||||
<Icon 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.
|
||||
@ -125,7 +214,7 @@ Be careful when using `calc`, view port based units or percentages. In SVG eleme
|
||||
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.
|
||||
|
||||
```jsx
|
||||
<IconifyIcon icon={homeIcon} height="auto" />
|
||||
<Icon icon="mdi-light:home" height="auto" />
|
||||
```
|
||||
|
||||
### Icon colour
|
||||
@ -144,21 +233,21 @@ Examples:
|
||||
Using `color` attribute:
|
||||
|
||||
```jsx
|
||||
<IconifyIcon icon={alertIcon} color="red" />
|
||||
<IconifyIcon icon={alertIcon} color="#f00" />
|
||||
<Icon icon="eva:alert-triangle-fill" color="red" />
|
||||
<Icon icon="eva:alert-triangle-fill" color="#f00" />
|
||||
```
|
||||
|
||||
Using inline style:
|
||||
|
||||
```jsx
|
||||
<Icon icon={alertIcon} style="color: red;" />
|
||||
<Icon icon={alertIcon} style="color: #f00;" />
|
||||
<Icon icon="eva:alert-triangle-fill" style="color: red;" />
|
||||
<Icon icon="eva:alert-triangle-fill" style="color: #f00;" />
|
||||
```
|
||||
|
||||
Using stylesheet:
|
||||
|
||||
```jsx
|
||||
<Icon icon={alertIcon} class="red-icon" />
|
||||
<Icon icon="eva:alert-triangle-fill" class="red-icon" />
|
||||
```
|
||||
|
||||
```css
|
||||
@ -171,7 +260,7 @@ Using Svelte scoped style:
|
||||
|
||||
```jsx
|
||||
<script>
|
||||
import IconifyIcon from '@iconify/svelte';
|
||||
import Icon from '@iconify/svelte';
|
||||
import alertIcon from '@iconify-icons/mdi/alert';
|
||||
</script>
|
||||
|
||||
@ -182,7 +271,7 @@ import alertIcon from '@iconify-icons/mdi/alert';
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<IconifyIcon icon={alertIcon} class="red-icon" />
|
||||
<Icon icon={alertIcon} class="red-icon" />
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -202,7 +291,7 @@ Rotating 16x24 icon by 90 degrees results in:
|
||||
- CSS transformation keeps 16x24 bounding box, which might cause the icon to overlap text around it.
|
||||
- Icon transformation changes bounding box to 24x16, rotating content inside an icon.
|
||||
|
||||
_TODO: show visual example_
|
||||
See [icon transformations documentation](https://docs.iconify.design/icon-components/svelte/transform.html) for more details.
|
||||
|
||||
#### Flipping an icon
|
||||
|
||||
@ -217,22 +306,22 @@ Examples:
|
||||
Flip an icon horizontally:
|
||||
|
||||
```jsx
|
||||
<IconifyIcon icon={alertIcon} hFlip={true} />
|
||||
<IconifyIcon icon={alertIcon} flip="horizontal" />
|
||||
<Icon icon="eva:alert-triangle-fill" hFlip={true} />
|
||||
<Icon icon="eva:alert-triangle-fill" flip="horizontal" />
|
||||
```
|
||||
|
||||
Flip an icon vertically:
|
||||
|
||||
```jsx
|
||||
<IconifyIcon icon={alertIcon} vFlip={true} />
|
||||
<IconifyIcon icon={alertIcon} flip="vertical" />
|
||||
<Icon icon="eva:alert-triangle-fill" vFlip={true} />
|
||||
<Icon icon="eva:alert-triangle-fill" flip="vertical" />
|
||||
```
|
||||
|
||||
Flip an icon horizontally and vertically (the same as 180 degrees rotation):
|
||||
|
||||
```jsx
|
||||
<IconifyIcon icon={alertIcon} hFlip={true} vFlip={true} />
|
||||
<IconifyIcon icon={alertIcon} flip="horizontal,vertical" />
|
||||
<Icon icon="eva:alert-triangle-fill" hFlip={true} vFlip={true} />
|
||||
<Icon icon="eva:alert-triangle-fill" flip="horizontal,vertical" />
|
||||
```
|
||||
|
||||
#### Rotating an icon
|
||||
@ -246,76 +335,24 @@ Number values are 1 for 90 degrees, 2 for 180 degrees, 3 for 270 degrees.
|
||||
Examples of 90 degrees rotation:
|
||||
|
||||
```jsx
|
||||
<IconifyIcon icon={alertIcon} rotate={1} />
|
||||
<IconifyIcon icon={alertIcon} rotate="90deg" />
|
||||
<IconifyIcon icon={alertIcon} rotate="25%" />
|
||||
<Icon icon="eva:alert-triangle-fill" rotate={1} />
|
||||
<Icon icon="eva:alert-triangle-fill" rotate="90deg" />
|
||||
<Icon icon="eva:alert-triangle-fill" rotate="25%" />
|
||||
```
|
||||
|
||||
### Alignment
|
||||
### onLoad
|
||||
|
||||
Alignment matters only if you set the icon's width and height attributes that do not match the viewBox with and height.
|
||||
`onLoad` property is an optional callback function. It is called when icon data has been loaded.
|
||||
|
||||
For example, if the icon is 24x24 and you set the width to 32 and height to 24. You must set both `width` and `height` attributes for this to happen or use stylesheet to set both icon's width and height.
|
||||
It is not an event, such as `onClick` event for links, it is a simple callback function.
|
||||
|
||||
#### Stretching SVG
|
||||
When `onLoad` is called:
|
||||
|
||||
When you use incorrect width/height ratio for other images, browser stretches those images.
|
||||
- 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.
|
||||
|
||||
Unlike other images, SVG elements do not stretch. Instead, browser either adds space on sides of the icon (this is the default behaviour) or crops part of the icon.
|
||||
|
||||
|
||||
|
||||
#### Alignment attributes
|
||||
|
||||
You can control the behaviour of SVG when using incorrect width/height ratio by setting alignment attributes:
|
||||
|
||||
- `hAlign`: string attribute to set horizontal alignment. Possible values are "left", "center" and "right".
|
||||
- `vAlign`: string attribute to set vertical alignment. Possible values are "top", "middle" and "bottom".
|
||||
- `slice`: boolean attribute. See below.
|
||||
- `align`: shorthand string attribute. Value is the combination of vertical alignment values, horizontal alignment values, "meet" (same as `slice={false}`) and "slice" (same as `slice={true}`) separated by comma.
|
||||
|
||||
Example of aligning an icon to the left if icon is not square:
|
||||
|
||||
```jsx
|
||||
<IconifyIcon icon={alertIcon} width="1em" height="1em" hAlign="left" />
|
||||
```
|
||||
|
||||
#### Slice
|
||||
|
||||
Slice attribute tells the browser how to deal with extra space.
|
||||
|
||||
By default, `slice` is disabled. The browser will scale the icon to fit the bounding box.
|
||||
|
||||
Example showing the icon behaviour when `slice` is disabled with various alignment values:
|
||||
|
||||
|
||||
|
||||
If `slice` is enabled, the browser will scale the icon to fill the bounding box and hide parts that do not fit.
|
||||
|
||||
Example showing the icon behaviour when `slice` is enabled with various alignment values:
|
||||
|
||||
|
||||
|
||||
### Inline
|
||||
|
||||
The icon component renders `SVG` elements. By default, `SVG` behave like images, which is different from icon fonts.
|
||||
|
||||
Many developers are used to working with icon fonts. Icon fonts render icons as text, not as images. Browsers align text differently than images:
|
||||
|
||||
- Images are vertically aligned at baseline.
|
||||
- Text is vertically aligned slightly below baseline.
|
||||
|
||||
By adding `inline` attribute, icon behaves like text. In inline mode icon has vertical alignment set to "-0.125em". That puts icon just below baseline, similar to icon fonts.
|
||||
|
||||
Example:
|
||||
|
||||
```jsx
|
||||
<IconifyIcon icon={alertIcon} inline={true} />
|
||||
```
|
||||
|
||||
Visual example to show the difference between inline and block modes:
|
||||
|
||||
|
||||
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.
|
||||
|
||||
## Sapper
|
||||
|
||||
@ -332,7 +369,7 @@ Example:
|
||||
// Dynamically load icon component, icon data and render it on client side
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let IconifyIcon;
|
||||
let Icon;
|
||||
let postIcon;
|
||||
|
||||
onMount(async () => {
|
||||
@ -341,7 +378,7 @@ Example:
|
||||
import('@iconify-icons/bi/link-45deg'), // Icon #1
|
||||
];
|
||||
const results = await Promise.all(promises);
|
||||
IconifyIcon = results[0].default; // Component
|
||||
Icon = results[0].default; // Component
|
||||
postIcon = results[1].default; // Icon #1
|
||||
});
|
||||
|
||||
@ -351,7 +388,7 @@ Example:
|
||||
<ul>
|
||||
{#each posts as post}
|
||||
<li>
|
||||
<svelte:component this={IconifyIcon} icon={postIcon} />
|
||||
<svelte:component this={Icon} icon={postIcon} />
|
||||
<a rel="prefetch" href="blog/{post.slug}">{post.title}</a>
|
||||
</li>
|
||||
{/each}
|
||||
@ -360,139 +397,18 @@ Example:
|
||||
|
||||
This example adds an icon stored in `postIcon` to every list item. If it was rendered on the server, HTML would send SVG element multiple times. But because it is rendered in the browser, icon data and component needs to be sent to the browser only once.
|
||||
|
||||
Instead of using `<IconifyIcon />`, you must use `<svelte:component />` to make sure component is rendered dynamically.
|
||||
Instead of using `<Icon />`, you must use `<svelte:component />` to make sure component is rendered dynamically.
|
||||
|
||||
This example is based on the Iconify Sapper demo: https://github.com/iconify/iconify/blob/master/packages/sapper-demo/src/routes/blog/index.svelte
|
||||
|
||||
## Icon Sets
|
||||
## Full documentation
|
||||
|
||||
You can find all available icons at https://iconify.design/icon-sets/
|
||||
|
||||
Browse or search icons, click any icon and you will see a "Svelte" tab that will give you exact code for the Svelte component.
|
||||
|
||||
Import format for each icon is "@iconify-icons/{prefix}/{icon}" where {prefix} is collection prefix, and {icon} is the icon name.
|
||||
|
||||
Usage examples for a few popular icon sets:
|
||||
|
||||
### Bootstrap Icons
|
||||
|
||||
Package: https://www.npmjs.com/package/@iconify-icons/bi
|
||||
|
||||
Icons list: https://iconify.design/icon-sets/bi/
|
||||
|
||||
Installation:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify-icons/bi
|
||||
```
|
||||
|
||||
Usage:
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import IconifyIcon from '@iconify/svelte';
|
||||
import awardIcon from '@iconify-icons/bi/award';
|
||||
|
||||
function handleClick() {
|
||||
alert('Award link clicked!');
|
||||
}
|
||||
</script>
|
||||
|
||||
<a
|
||||
href="# "
|
||||
on:click|preventDefault="{handleClick}"
|
||||
>
|
||||
<IconifyIcon icon={awardIcon} />
|
||||
</a>
|
||||
```
|
||||
|
||||
### Remix Icons
|
||||
|
||||
Package: https://www.npmjs.com/package/@iconify-icons/ri
|
||||
|
||||
Icons list: https://iconify.design/icon-sets/ri/
|
||||
|
||||
Installation:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify-icons/ri
|
||||
```
|
||||
|
||||
Usage:
|
||||
|
||||
```html
|
||||
<script>
|
||||
import IconifyIcon from '@iconify/svelte';
|
||||
import alertLine from '@iconify-icons/ri/alert-line';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.alert {
|
||||
position: relative;
|
||||
margin: 8px;
|
||||
padding: 16px;
|
||||
padding-left: 48px;
|
||||
background: #ba3329;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.alert + div {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.alert :global(svg) {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
font-size: 24px;
|
||||
line-height: 1em;
|
||||
margin: -0.5em 0 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="alert">
|
||||
<IconifyIcon icon="{alertLine}" />
|
||||
Important notice with alert icon!
|
||||
</div>
|
||||
```
|
||||
|
||||
### Simple Icons (big collection of logos)
|
||||
|
||||
Package: https://www.npmjs.com/package/@iconify-icons/simple-icons
|
||||
|
||||
Icons list: https://iconify.design/icon-sets/simple-icons/
|
||||
|
||||
Installation:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify-icons/simple-icons
|
||||
```
|
||||
|
||||
Usage (in this example using string syntax):
|
||||
|
||||
```jsx
|
||||
<script>
|
||||
import IconifyIcon from '@iconify/svelte';
|
||||
import mozillafirefoxIcon from '@iconify-icons/simple-icons/mozillafirefox';
|
||||
</script>
|
||||
|
||||
<p>
|
||||
Mozilla Firefox <IconifyIcon icon={mozillafirefoxIcon} inline={true} /> is the
|
||||
best browser!
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
### Other icon sets
|
||||
|
||||
There are over 60 icon sets. This readme shows only a few examples. See [Iconify icon sets](http://iconify.design/icon-sets/) for a full list of available icon sets. Click any icon to see code.
|
||||
For extended documentation visit [Iconify for Svelte documentation](https://docs.iconify.design/icon-components/svelte/).
|
||||
|
||||
## License
|
||||
|
||||
The Svelte component is released with MIT license.
|
||||
|
||||
© 2020 Iconify OÜ
|
||||
© 2020, 2021 Iconify OÜ
|
||||
|
||||
See [Iconify icon sets page](https://iconify.design/icon-sets/) for list of collections and their licenses.
|
||||
|
||||
8452
packages/svelte/package-lock.json
generated
8452
packages/svelte/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
4
packages/utils/package-lock.json
generated
4
packages/utils/package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@iconify/utils",
|
||||
"version": "1.0.4",
|
||||
"version": "1.0.5",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@iconify/utils",
|
||||
"version": "1.0.4",
|
||||
"version": "1.0.5",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@iconify/types": "^1.0.6"
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"name": "@iconify/utils",
|
||||
"description": "Common functions for working with Iconify icon sets used by various packages.",
|
||||
"author": "Vjacheslav Trushkin",
|
||||
"version": "1.0.4",
|
||||
"version": "1.0.5",
|
||||
"license": "MIT",
|
||||
"bugs": "https://github.com/iconify/iconify/issues",
|
||||
"homepage": "https://iconify.design/",
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
"target": "ES2019",
|
||||
"module": "commonjs",
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"sourceMap": true,
|
||||
"declarationMap": false,
|
||||
"sourceMap": false,
|
||||
"composite": true,
|
||||
"strict": true,
|
||||
"moduleResolution": "node",
|
||||
|
||||
@ -21,6 +21,8 @@
|
||||
</section>
|
||||
|
||||
<InlineDemo />
|
||||
|
||||
<LoadingDemo />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -43,6 +45,8 @@ import OfflineUsageDemo from './demo-components/UsageOffline.vue';
|
||||
import FullOfflineUsageDemo from './demo-components/UsageFullOffline.vue';
|
||||
import FullUsageDemo from './demo-components/UsageFull.vue';
|
||||
|
||||
import LoadingDemo from './test-components/LoadingDemo.vue';
|
||||
|
||||
// Disable cache
|
||||
disableCache('all');
|
||||
|
||||
@ -56,14 +60,12 @@ addOnlineIcon('demo', bxShapes);
|
||||
addOfflineIcon('experiment2', {
|
||||
width: 16,
|
||||
height: 16,
|
||||
body:
|
||||
'<circle fill-opacity="0.2" cx="8" cy="8" r="7" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z" fill="currentColor"/><path d="M7 9L5 7L3.5 8.5L7 12L13 6L11.5 4.5L7 9Z" fill="currentColor"/>',
|
||||
body: '<circle fill-opacity="0.2" cx="8" cy="8" r="7" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z" fill="currentColor"/><path d="M7 9L5 7L3.5 8.5L7 12L13 6L11.5 4.5L7 9Z" fill="currentColor"/>',
|
||||
});
|
||||
addOnlineIcon('experiment2', {
|
||||
width: 16,
|
||||
height: 16,
|
||||
body:
|
||||
'<g fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 8.9c.1.6.2 1.1.4 1.7l.6 1.7l-.5.7H10c0 .5-.2 1-.6 1.4c-.4.4-.9.6-1.4.6c-.5 0-1.1-.2-1.4-.6c-.4-.4-.6-.9-.6-1.4H2.5l-.5-.7l.6-1.7c.2-.8.4-1.6.4-2.4V6c0-.7.1-1.4.4-2c.3-.7.7-1.2 1.2-1.7s1.1-.8 1.8-1C6.9 1.1 7.5 1 8 1c-.2.3-.4.7-.6 1.1c-.2 0-.4 0-.7.2c-.5.1-1 .4-1.4.8c-.4.3-.8.8-1 1.3c-.2.5-.3 1-.3 1.6v2.2c0 .9-.2 1.8-.4 2.7L3.2 12h9.6l-.4-1.1c-.175-.526-.274-1.13-.363-1.674L12 9c.4 0 .7 0 1-.1zM8 14c.2 0 .5-.1.7-.3c.2-.2.3-.4.3-.7H7c0 .3.1.5.3.7c.2.2.5.3.7.3zm7-10a3 3 0 1 1-6 0a3 3 0 0 1 6 0z"></path></g>',
|
||||
body: '<g fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 8.9c.1.6.2 1.1.4 1.7l.6 1.7l-.5.7H10c0 .5-.2 1-.6 1.4c-.4.4-.9.6-1.4.6c-.5 0-1.1-.2-1.4-.6c-.4-.4-.6-.9-.6-1.4H2.5l-.5-.7l.6-1.7c.2-.8.4-1.6.4-2.4V6c0-.7.1-1.4.4-2c.3-.7.7-1.2 1.2-1.7s1.1-.8 1.8-1C6.9 1.1 7.5 1 8 1c-.2.3-.4.7-.6 1.1c-.2 0-.4 0-.7.2c-.5.1-1 .4-1.4.8c-.4.3-.8.8-1 1.3c-.2.5-.3 1-.3 1.6v2.2c0 .9-.2 1.8-.4 2.7L3.2 12h9.6l-.4-1.1c-.175-.526-.274-1.13-.363-1.674L12 9c.4 0 .7 0 1-.1zM8 14c.2 0 .5-.1.7-.3c.2-.2.3-.4.3-.7H7c0 .3.1.5.3.7c.2.2.5.3.7.3zm7-10a3 3 0 1 1-6 0a3 3 0 0 1 6 0z"></path></g>',
|
||||
});
|
||||
|
||||
// Add few mdi-light: icons
|
||||
@ -71,12 +73,10 @@ 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"/>',
|
||||
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"/>',
|
||||
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,
|
||||
@ -86,12 +86,10 @@ 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"/>',
|
||||
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"/>',
|
||||
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,
|
||||
@ -106,6 +104,7 @@ export default {
|
||||
OfflineUsageDemo,
|
||||
FullOfflineUsageDemo,
|
||||
FullUsageDemo,
|
||||
LoadingDemo,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
19
packages/vue-demo/src/test-components/LoadingDemo.vue
Normal file
19
packages/vue-demo/src/test-components/LoadingDemo.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<section>
|
||||
<h1>Dynamically loading icons (test-components/LoadingDemo.vue)</h1>
|
||||
<div>
|
||||
Left arrow:
|
||||
<LoadingIcon icon="line-md:chevron-left"><</LoadingIcon>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import LoadingIcon from './LoadingIcon';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LoadingIcon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
65
packages/vue-demo/src/test-components/LoadingIcon.ts
Normal file
65
packages/vue-demo/src/test-components/LoadingIcon.ts
Normal file
@ -0,0 +1,65 @@
|
||||
import { Icon, getIcon, loadIcons } from '@iconify/vue';
|
||||
import { h, defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
props: ['icon'],
|
||||
setup() {
|
||||
// Variable to store function to cancel loading
|
||||
const loader = ref(null);
|
||||
|
||||
// Icon data
|
||||
const data = ref(null);
|
||||
|
||||
// Function to check icon data
|
||||
const check = (icon: string) => {
|
||||
const iconData = getIcon(icon);
|
||||
|
||||
// Cancel old loder
|
||||
if (loader.value) {
|
||||
loader.value();
|
||||
loader.value = null;
|
||||
}
|
||||
|
||||
if (iconData) {
|
||||
data.value = iconData;
|
||||
} else {
|
||||
loader.value = loadIcons([icon], () => {
|
||||
data.value = getIcon(icon);
|
||||
});
|
||||
}
|
||||
};
|
||||
return {
|
||||
loader,
|
||||
data,
|
||||
check,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
icon: {
|
||||
immediate: true,
|
||||
handler(value) {
|
||||
// Check new value
|
||||
this.check(value);
|
||||
},
|
||||
},
|
||||
},
|
||||
// Stop loading
|
||||
unmounted() {
|
||||
const loader = this.loader.value;
|
||||
if (loader) {
|
||||
loader();
|
||||
}
|
||||
},
|
||||
render() {
|
||||
const icon = this.data;
|
||||
if (icon) {
|
||||
return h(Icon, {
|
||||
icon,
|
||||
});
|
||||
}
|
||||
return this.$slots.default ? this.$slots.default() : null;
|
||||
},
|
||||
});
|
||||
63
packages/vue-demo/src/test-components/LoadingIcon2.ts
Normal file
63
packages/vue-demo/src/test-components/LoadingIcon2.ts
Normal file
@ -0,0 +1,63 @@
|
||||
import { Icon, iconExists, loadIcons } from '@iconify/vue';
|
||||
import { h, defineComponent, ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
props: ['icon'],
|
||||
setup() {
|
||||
// Variable to store function to cancel loading
|
||||
const loader = ref(null);
|
||||
|
||||
// Icon status
|
||||
const loaded = ref(null);
|
||||
|
||||
// Function to check if icon exists
|
||||
const check = (icon: string) => {
|
||||
const isLoaded = (loaded.value = iconExists(icon));
|
||||
|
||||
// Cancel old loder
|
||||
if (loader.value) {
|
||||
loader.value();
|
||||
loader.value = null;
|
||||
}
|
||||
|
||||
if (!isLoaded) {
|
||||
loader.value = loadIcons([icon], () => {
|
||||
loaded.value = iconExists(icon);
|
||||
});
|
||||
}
|
||||
};
|
||||
return {
|
||||
loader,
|
||||
loaded,
|
||||
check,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
icon: {
|
||||
immediate: true,
|
||||
handler(value) {
|
||||
// Check new value
|
||||
this.check(value);
|
||||
},
|
||||
},
|
||||
},
|
||||
// Stop loading
|
||||
unmounted() {
|
||||
const loader = this.loader.value;
|
||||
if (loader) {
|
||||
loader();
|
||||
}
|
||||
},
|
||||
render() {
|
||||
const loaded = this.loaded;
|
||||
if (loaded) {
|
||||
return h(Icon, {
|
||||
icon: this.icon,
|
||||
});
|
||||
}
|
||||
return this.$slots.default ? this.$slots.default() : null;
|
||||
},
|
||||
});
|
||||
@ -1,71 +1,92 @@
|
||||
# Iconify for Vue
|
||||
|
||||
Note: this documentation is for version 2.0. It has not been updated for 3.0 yet.
|
||||
|
||||
Iconify for Vue is not yet another icon component! There are many of them already.
|
||||
|
||||
Iconify is the most versatile icon framework.
|
||||
What you get with other components:
|
||||
|
||||
- Unified icon framework that can be used with any icon library.
|
||||
- Out of the box includes 80+ icon sets with more than 70,000 icons.
|
||||
- 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.
|
||||
- Limited set of icons.
|
||||
- Large bundle size because all icons are bundled.
|
||||
|
||||
For more information visit [https://iconify.design/](https://iconify.design/).
|
||||
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.
|
||||
|
||||
Iconify for Vue is a part of Iconify framework that makes it easy to use many icon libraries with Vue.
|
||||
That means:
|
||||
|
||||
Iconify for Vue features:
|
||||
- One syntax for over 80,000 icons from 90+ 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.
|
||||
|
||||
- Easy to use.
|
||||
- Bundles only icons that you need.
|
||||
- Change icon size and colour by changing font size and colour.
|
||||
- Renders pixel-perfect SVG.
|
||||
For more information about Iconify project visit [https://iconify.design/](https://iconify.design/).
|
||||
|
||||
For extended documentation visit [Iconify for Vue documentation](https://docs.iconify.design/icon-components/vue/).
|
||||
|
||||
## Installation
|
||||
|
||||
If you are using NPM:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify/vue@beta
|
||||
npm install --save-dev @iconify/vue
|
||||
```
|
||||
|
||||
If you are using Yarn:
|
||||
|
||||
```bash
|
||||
yarn add --dev @iconify/vue@beta
|
||||
yarn add --dev @iconify/vue
|
||||
```
|
||||
|
||||
Make sure you are installing `@iconify/vue@beta`, not `@iconify/vue` because `@iconify/vue` is for Vue 2. It will change when Vue 3.0.0 is published.
|
||||
|
||||
This package does not include icons. Icons are split into separate packages that available at NPM. See below.
|
||||
|
||||
### Vue 2 compatibility
|
||||
|
||||
This component is not backwards compatible with Vue 2.
|
||||
|
||||
If you are using Vue 2, you need to install version 1.0 of Iconify component.
|
||||
If you are using Vue 2, you need to install `@iconify/vue2` component. It is almost identical to this component, but for Vue 2.
|
||||
|
||||
See [Vue 2 component](https://github.com/iconify/iconify/tree/master/archive/vue2) for details.
|
||||
See [Iconify for Vue 2 documentation](https://docs.iconify.design/icon-components/vue2/).
|
||||
|
||||
## Usage
|
||||
## Usage with API
|
||||
|
||||
Install `@iconify/vue` and packages for selected icon sets. Import component from `@iconify/vue` and icon data for the icon you want to use:
|
||||
Install `@iconify/vue` and import `Icon` from it:
|
||||
|
||||
```js
|
||||
import { Icon } from '@iconify/vue';
|
||||
import home from '@iconify-icons/mdi/home';
|
||||
import faceWithMonocle from '@iconify-icons/twemoji/face-with-monocle';
|
||||
```
|
||||
|
||||
Then you need to add component and icon.
|
||||
Then use `Icon` component in template with icon name or data as "icon" parameter:
|
||||
|
||||
There are two ways to use an icon: by icon name that you assign or by icon object.
|
||||
```jsx
|
||||
<Icon icon="mdi-light:home" />
|
||||
```
|
||||
|
||||
### Object syntax
|
||||
Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over 80,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
|
||||
|
||||
Object syntax passes icon data to the component.
|
||||
## Offline Usage
|
||||
|
||||
Retrieving icon data from Iconify API requires visitor to be online. What if you want to use component offline or on local network?
|
||||
|
||||
If you want to use icon component without relying on public Iconify API, there are several options:
|
||||
|
||||
1. You can import icon data from Iconify Icons packages.
|
||||
2. You can create custom icon bundles (more efficient, but requires more coding).
|
||||
3. You can host your own Iconify API instead of relying on third party service.
|
||||
|
||||
See [Iconify for Vue offline use documentation](https://docs.iconify.design/icon-components/vue/offline.html) or [Iconify API documentation](https://docs.iconify.design/sources/api/).
|
||||
|
||||
## 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 Vue icon names documentation](https://docs.iconify.design/icon-components/vue/icon-name.html) for more detailed explanation.
|
||||
|
||||
## Using icon data
|
||||
|
||||
Instead of icon name, you can pass icon data to component:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
@ -82,6 +103,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// Assign icon data to icons.chart
|
||||
icons: {
|
||||
chart: areaChartOutlined,
|
||||
},
|
||||
@ -91,50 +113,58 @@ export default {
|
||||
</script>
|
||||
```
|
||||
|
||||
The icon must be included in `data` function, so it could be referenced in the template.
|
||||
See [icon packages documentation](https://docs.iconify.design/sources/npm/) for more details.
|
||||
|
||||
The same example without TypeScript:
|
||||
### ES / CommonJS packages
|
||||
|
||||
Example above might currently fail with some use cases. Package `@iconify-icons/mdi-light` uses ES modules that some software might not support yet. But do not worry, there is a simple solution: switch to CommonJS icon packages.
|
||||
|
||||
To switch to CommonJS package, replace this line in example above:
|
||||
|
||||
```js
|
||||
import home from '@iconify-icons/mdi-light/home';
|
||||
```
|
||||
|
||||
with
|
||||
|
||||
```js
|
||||
import home from '@iconify/icons-mdi-light/home';
|
||||
```
|
||||
|
||||
All icons are available as ES modules for modern bundler and as CommonJS modules for outdated bundlers. ES modules use format `@iconify-icons/{prefix}`, CommonJS modules use `@iconify/icons-{prefix}`.
|
||||
|
||||
For more details, see [icon packages documentation](https://docs.iconify.design/sources/npm/).
|
||||
|
||||
### Inline
|
||||
|
||||
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 either use `InlineIcon` or use boolean `inline` property:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Icon :icon="icons.chart" height="24" :style="{ color: 'green' }" />
|
||||
<div>
|
||||
<p>
|
||||
Block:
|
||||
<Icon icon="line-md:image-twotone" />
|
||||
<Icon icon="mdi:account-box-outline" />
|
||||
</p>
|
||||
<p>
|
||||
Inline:
|
||||
<Icon icon="line-md:image-twotone" :inline="true" />
|
||||
<Icon icon="mdi:account-box-outline" :inline="true" />
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Icon } from '@iconify/vue';
|
||||
import areaChartOutlined from '@iconify-icons/ant-design/area-chart-outlined';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: {
|
||||
chart: areaChartOutlined,
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### String syntax
|
||||
|
||||
String syntax passes icon name to the component.
|
||||
|
||||
With this method the icon needs to be added only once. That means if you have multiple components using 'chart' icon, you can add it only in your main component. This makes it easy to swap icons for an entire application.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Icon icon="chart" height="24" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Icon, addIcon } from '@iconify/vue';
|
||||
import areaChartOutlined from '@iconify-icons/ant-design/area-chart-outlined';
|
||||
|
||||
addIcon('chart', areaChartOutlined);
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -144,109 +174,9 @@ export default {
|
||||
</script>
|
||||
```
|
||||
|
||||
The icon must be registered using `addIcon` function imported from `@iconify/vue`. You can assign any name to the icon.
|
||||
Visual example to show the difference between inline and block modes:
|
||||
|
||||
The same example without TypeScript:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Icon icon="chart" height="24" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Icon, addIcon } from '@iconify/vue';
|
||||
import areaChartOutlined from '@iconify-icons/ant-design/area-chart-outlined';
|
||||
|
||||
addIcon('chart', areaChartOutlined);
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
Instead of adding icons one by one using `addIcon` function, you can import an entire icon set using `addCollection` function:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Icon icon="jam:home" height="24" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Icon, addCollection } from '@iconify/vue';
|
||||
|
||||
// Import requires bundler that can import JSON files
|
||||
import jamIcons from '@iconify/json/json/jam.json';
|
||||
|
||||
// Function automatically adds prefix from icon set, which in this case is 'jam', followed by ':', so
|
||||
// icon names added by function should be called with prefix, such as 'jam:home'
|
||||
addCollection(jamIcons);
|
||||
|
||||
// Example without prefix, all icons will have names as is, such as 'home'
|
||||
// addCollection(jamIcons, false);
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
Example above imports an entire icon set. To learn how to create smaller bundles, check out Iconify documentation: https://docs.iconify.design/sources/bundles/
|
||||
|
||||
## Migration from Vue 2
|
||||
|
||||
If you are migrating from version 1 of this component, which was designed for Vue 2, there are some big differences in usage:
|
||||
|
||||
- Component was a default export. In new version `Icon` is a named export.
|
||||
- `addIcon()` and `addCollection()` were properties of component. In new version they are separate named exports.
|
||||
- New `InlineIcon` component (see "inline" section below) for easier use inside text.
|
||||
|
||||
Example code for Vue 2:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<IconifyIcon icon="chart" height="24" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import areaChartOutlined from '@iconify-icons/ant-design/area-chart-outlined';
|
||||
|
||||
IconifyIcon.addIcon('chart', areaChartOutlined);
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
The same code for Vue 3:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Icon icon="chart" height="24" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Icon, addIcon } from '@iconify/vue';
|
||||
import areaChartOutlined from '@iconify-icons/ant-design/area-chart-outlined';
|
||||
|
||||
addIcon('chart', areaChartOutlined);
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
## Icon component properties
|
||||
|
||||
@ -260,12 +190,13 @@ The icon component has the following optional properties:
|
||||
- `flip`, `horizontalFlip`, `verticalFlip`. Flip icon horizontally and/or vertically. See "Transformations" section below.
|
||||
- `rotate`. Rotate icon by 90, 180 or 270 degrees. See "Transformations" section below.
|
||||
- `align`, `verticalAlign`, `horizontalAlign`, `slice`. Icon alignment. See "Alignment" section below.
|
||||
- `onLoad`. Callback function that is called when icon data has been loaded. See "onLoad" section below.
|
||||
|
||||
Note: in templates you can use "camelCase" properties as "kebab-case". For example, `hFlip` can be used as `h-flip`.
|
||||
Note: in templates you can use "camelCase" properties as "kebab-case". For example, `horizontalFlip` can be used as `horizontal-flip`.
|
||||
|
||||
### Other properties and events
|
||||
|
||||
In addition to the properties mentioned above, the icon component accepts any other properties and events. All other properties and events will be passed to generated `SVG` element, so you can do stuff like assigning click event, setting the inline style, create element reference, add title and so on.
|
||||
In addition to the properties mentioned above, the icon component accepts any other properties and events. All other properties and events will be passed to generated `SVG` element, so you can do stuff like assigning click event, setting the inline style, add title and so on.
|
||||
|
||||
### Dimensions
|
||||
|
||||
@ -285,11 +216,11 @@ If you set only one dimension, another dimension will be calculated using the ic
|
||||
You can use numbers for `width` and `height`.
|
||||
|
||||
```html
|
||||
<Icon icon="experiment" :height="24" />
|
||||
<Icon icon="mdi-light:home" :height="24" />
|
||||
```
|
||||
|
||||
```html
|
||||
<Icon icon="experiment" :width="16" :height="16" />
|
||||
<Icon icon="mdi-light:home" :width="16" :height="16" />
|
||||
```
|
||||
|
||||
Note ":" before attribute - in Vue it changes the value to expression, so "20" is a number, not a string.
|
||||
@ -301,11 +232,11 @@ Number values are treated as pixels. That means in examples above, values are id
|
||||
If you use strings without units, they are treated the same as numbers in an example above.
|
||||
|
||||
```html
|
||||
<Icon icon="experiment" height="24" />
|
||||
<Icon icon="mdi-light:home" height="24" />
|
||||
```
|
||||
|
||||
```html
|
||||
<Icon icon="experiment" width="16" height="16" />
|
||||
<Icon icon="mdi-light:home" width="16" height="16" />
|
||||
```
|
||||
|
||||
#### Dimensions as strings with units
|
||||
@ -313,7 +244,7 @@ If you use strings without units, they are treated the same as numbers in an exa
|
||||
You can use units in width and height values:
|
||||
|
||||
```html
|
||||
<Icon icon="experiment" height="2em" />
|
||||
<Icon 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.
|
||||
@ -323,7 +254,7 @@ Be careful when using `calc`, view port based units or percentages. In SVG eleme
|
||||
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.
|
||||
|
||||
```html
|
||||
<Icon icon="experiment" height="auto" />
|
||||
<Icon icon="mdi-light:home" height="auto" />
|
||||
```
|
||||
|
||||
### Icon colour
|
||||
@ -334,7 +265,7 @@ Icons that do have a palette, such as emojis, cannot be customised. Setting colo
|
||||
|
||||
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, not `iconify-icon`.
|
||||
- Set `color` style or use stylesheet to target icon. If you are using the stylesheet, target `svg` element.
|
||||
- Add `color` property.
|
||||
|
||||
Examples:
|
||||
@ -342,22 +273,23 @@ Examples:
|
||||
Using `color` property:
|
||||
|
||||
```html
|
||||
<Icon icon="experiment" color="red" /> <Icon icon="experiment" color="#f00" />
|
||||
<Icon icon="eva:alert-triangle-fill" color="red" />
|
||||
<Icon icon="eva:alert-triangle-fill" color="#f00" />
|
||||
```
|
||||
|
||||
Using inline style:
|
||||
|
||||
```html
|
||||
<Icon icon="experiment" style="color: red;" />
|
||||
<Icon icon="experiment" :style="{color: 'red'}" />
|
||||
<Icon icon="experiment" :style="{color: '#f00'}" />
|
||||
<Icon icon="eva:alert-triangle-fill" style="color: red;" />
|
||||
<Icon icon="eva:alert-triangle-fill" :style="{color: 'red'}" />
|
||||
<Icon icon="eva:alert-triangle-fill" :style="{color: '#f00'}" />
|
||||
```
|
||||
|
||||
Using stylesheet:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Icon icon="experiment" class="red-icon" />
|
||||
<Icon icon="eva:alert-triangle-fill" class="red-icon" />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@ -383,7 +315,7 @@ Rotating 16x24 icon by 90 degrees results in:
|
||||
- CSS transformation keeps 16x24 bounding box, which might cause the icon to overlap text around it.
|
||||
- Icon transformation changes bounding box to 24x16, rotating content inside an icon.
|
||||
|
||||
_TODO: show visual example_
|
||||
See [icon transformations documentation](https://docs.iconify.design/icon-components/vue/transform.html) for more details.
|
||||
|
||||
#### Flipping an icon
|
||||
|
||||
@ -398,25 +330,29 @@ Examples:
|
||||
Flip an icon horizontally:
|
||||
|
||||
```html
|
||||
<Icon icon="experiment" :h-flip="true" />
|
||||
<Icon icon="experiment" :horizontal-flip="true" />
|
||||
<Icon icon="experiment" flip="horizontal" />
|
||||
<Icon icon="eva:alert-triangle-fill" :h-flip="true" />
|
||||
<Icon icon="eva:alert-triangle-fill" :horizontal-flip="true" />
|
||||
<Icon icon="eva:alert-triangle-fill" flip="horizontal" />
|
||||
```
|
||||
|
||||
Flip an icon vertically:
|
||||
|
||||
```html
|
||||
<Icon icon="experiment" :v-flip="true" />
|
||||
<Icon icon="experiment" :vertical-flip="true" />
|
||||
<Icon icon="experiment" flip="vertical" />
|
||||
<Icon icon="eva:alert-triangle-fill" :v-flip="true" />
|
||||
<Icon icon="eva:alert-triangle-fill" :vertical-flip="true" />
|
||||
<Icon icon="eva:alert-triangle-fill" flip="vertical" />
|
||||
```
|
||||
|
||||
Flip an icon horizontally and vertically (the same as 180 degrees rotation):
|
||||
|
||||
```html
|
||||
<Icon icon="experiment" :h-flip="true" :v-flip="true" />
|
||||
<Icon icon="experiment" :horizontal-flip="true" :vertical-flip="true" />
|
||||
<Icon icon="experiment" flip="horizontal,vertical" />
|
||||
<Icon icon="eva:alert-triangle-fill" :h-flip="true" :v-flip="true" />
|
||||
<Icon
|
||||
icon="eva:alert-triangle-fill"
|
||||
:horizontal-flip="true"
|
||||
:vertical-flip="true"
|
||||
/>
|
||||
<Icon icon="eva:alert-triangle-fill" flip="horizontal,vertical" />
|
||||
```
|
||||
|
||||
Why are there multiple boolean properties for flipping an icon? See "Alignment" section below for the explanation.
|
||||
@ -432,283 +368,33 @@ Number values are 1 for 90 degrees, 2 for 180 degrees, 3 for 270 degrees.
|
||||
Examples of 90 degrees rotation:
|
||||
|
||||
```html
|
||||
<Icon icon="experiment" :rotate="1" />
|
||||
<Icon icon="experiment" rotate="90deg" />
|
||||
<Icon icon="experiment" rotate="25%" />
|
||||
<Icon icon="eva:alert-triangle-fill" :rotate="1" />
|
||||
<Icon icon="eva:alert-triangle-fill" rotate="90deg" />
|
||||
<Icon icon="eva:alert-triangle-fill" rotate="25%" />
|
||||
```
|
||||
|
||||
### Alignment
|
||||
### onLoad
|
||||
|
||||
Alignment matters only if you set the icon's width and height properties that do not match the viewBox with and height.
|
||||
`onLoad` property is an optional callback function. It is called when icon data has been loaded.
|
||||
|
||||
For example, if the icon is 24x24 and you set the width to 32 and height to 24. You must set both `width` and `height` properties for this to happen or use stylesheet to set both icon's width and height.
|
||||
It is not an event, such as `onClick` event for links, it is a simple callback function.
|
||||
|
||||
#### Stretching SVG
|
||||
When `onLoad` is called:
|
||||
|
||||
When you use incorrect width/height ratio for other images, browser stretches those images.
|
||||
- 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.
|
||||
|
||||
Unlike other images, SVG elements do not stretch. Instead, browser either adds space on sides of the icon (this is the default behaviour) or crops part of the icon.
|
||||
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
|
||||
|
||||
#### Alignment properties
|
||||
|
||||
You can control the behaviour of SVG when using incorrect width/height ratio by setting alignment properties:
|
||||
|
||||
- `horizontal-align` or `h-align`: string property to set horizontal alignment. Possible values are "left", "center" and "right".
|
||||
- `vertical-align` or `v-align`: string property to set vertical alignment. Possible values are "top", "middle" and "bottom".
|
||||
- `slice`: boolean property. See below.
|
||||
- `align`: shorthand string property. Value is the combination of vertical alignment values, horizontal alignment values, "meet" (same as `:slice="false"`) and "slice" (same as `:slice="true"`) separated by comma.
|
||||
|
||||
Why are there aliases for `h-align` and `v-align` properties? Because in Vue properties that start with `v-` are treated as directives. It is possible to use `v-align` property using a weird syntax (see example below), but it is much cleaner to have a different name for that property, so that is why Vue component has aliases for those properties. For more consistent properties, similar aliases were added to `h-flip` and `v-flip` properties.
|
||||
|
||||
Example of aligning an icon to the left if icon is not square:
|
||||
|
||||
```html
|
||||
<Icon icon="experiment" width="1em" height="1em" h-align="left" />
|
||||
```
|
||||
|
||||
#### Slice
|
||||
|
||||
Slice property tells the browser how to deal with extra space.
|
||||
|
||||
By default, `slice` is disabled. The browser will scale the icon to fit the bounding box.
|
||||
|
||||
Example showing the icon behaviour when `slice` is disabled with various alignment values:
|
||||
|
||||
|
||||
|
||||
If `slice` is enabled, the browser will scale the icon to fill the bounding box and hide parts that do not fit.
|
||||
|
||||
Example showing the icon behaviour when `slice` is enabled with various alignment values:
|
||||
|
||||
|
||||
|
||||
### Inline
|
||||
|
||||
The icon component renders `SVG` elements. By default, `SVG` behave like images, which is different from icon fonts.
|
||||
|
||||
Many developers are used to working with icon fonts. Icon fonts render icons as text, not as images. Browsers align text differently than images:
|
||||
|
||||
- Images are vertically aligned at baseline.
|
||||
- Text is vertically aligned slightly below baseline.
|
||||
|
||||
By adding `inline` property, icon behaves like text. In inline mode icon has vertical alignment set to "-0.125em". That puts icon just below baseline, similar to icon fonts.
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<Icon icon="experiment" :inline="true" />
|
||||
```
|
||||
|
||||
Value is boolean, therefore ":" must be added before property name, changing the value from string to expression.
|
||||
|
||||
Visual example to show the difference between inline and block modes:
|
||||
|
||||
|
||||
|
||||
You can also use `InlineIcon` component that is identical to `Icon` component, but with default value for `inline` property set to `true`:
|
||||
|
||||
```js
|
||||
import { InlineIcon } from '@iconify/vue';
|
||||
```
|
||||
|
||||
```html
|
||||
<InlineIcon icon="experiment" />
|
||||
```
|
||||
|
||||
## Icon Sets
|
||||
|
||||
You can find all available icons at https://iconify.design/icon-sets/
|
||||
|
||||
Browse or search icons, click any icon and you will see a "Vue" tab that will give you exact code for the Vue component.
|
||||
|
||||
Import format for each icon is "@iconify-icons/{prefix}/{icon}" where {prefix} is collection prefix, and {icon} is the icon name.
|
||||
|
||||
Usage examples for a few popular icon sets:
|
||||
|
||||
### Material Design Icons
|
||||
|
||||
Package: https://www.npmjs.com/package/@iconify-icons/mdi
|
||||
|
||||
Icons list: https://iconify.design/icon-sets/mdi/
|
||||
|
||||
Installation:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify-icons/mdi
|
||||
```
|
||||
|
||||
Usage (in this example using object syntax):
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Icon :icon="icons.account" />
|
||||
<Icon :icon="icons.home" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Icon } from '@iconify/vue';
|
||||
import homeIcon from '@iconify-icons/mdi/home';
|
||||
import accountIcon from '@iconify-icons/mdi/account';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: {
|
||||
home: homeIcon,
|
||||
account: accountIcon,
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### Simple Icons (big collection of logos)
|
||||
|
||||
Package: https://www.npmjs.com/package/@iconify-icons/simple-icons
|
||||
|
||||
Icons list: https://iconify.design/icon-sets/simple-icons/
|
||||
|
||||
Installation:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify-icons/simple-icons
|
||||
```
|
||||
|
||||
Usage (in this example using string syntax):
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<p>Mozilla Firefox <InlineIcon icon="firefox" /> is the best browser!</p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { InlineIcon, addIcon } from '@iconify/vue';
|
||||
import mozillafirefoxIcon from '@iconify-icons/simple-icons/mozillafirefox';
|
||||
|
||||
addIcon('firefox', mozillafirefoxIcon);
|
||||
|
||||
export default {
|
||||
components: {
|
||||
InlineIcon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### DashIcons
|
||||
|
||||
Package: https://www.npmjs.com/package/@iconify-icons/dashicons
|
||||
|
||||
Icons list: https://iconify.design/icon-sets/dashicons/
|
||||
|
||||
Installation:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify-icons/dashicons
|
||||
```
|
||||
|
||||
Usage (in this example using object syntax with TypeScript):
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<p>
|
||||
<Icon :icon="icons.rotate" />
|
||||
Rotate!
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Icon } from '@iconify/vue';
|
||||
import imageRotate from '@iconify-icons/dashicons/image-rotate';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: {
|
||||
rotate: imageRotate,
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
svg {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
vertical-align: -0.25em; /* moves icon 5px below baseline */
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### OpenMoji
|
||||
|
||||
Package: https://www.npmjs.com/package/@iconify-icons/openmoji
|
||||
|
||||
Icons list: https://iconify.design/icon-sets/openmoji/
|
||||
|
||||
Installation:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify-icons/openmoji
|
||||
```
|
||||
|
||||
Usage:
|
||||
|
||||
Usage (in this example using string syntax with TypeScript):
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<p><InlineIcon icon="autonomous-car" /> Autonomous cars are the future!</p>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { InlineIcon, addIcon } from '@iconify/vue';
|
||||
import autonomousCar from '@iconify-icons/openmoji/autonomous-car';
|
||||
import exhaustGasesCar from '@iconify-icons/openmoji/exhaust-gases-car';
|
||||
|
||||
addIcon('autonomous-car', autonomousCar);
|
||||
addIcon('gas-car', exhaustGasesCar);
|
||||
|
||||
export default {
|
||||
components: {
|
||||
InlineIcon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
svg {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
vertical-align: -0.25em; /* moves icon 5px below baseline */
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Other icon sets
|
||||
|
||||
There are over 80 icon sets. This readme shows only a few examples. See [Iconify icon sets](http://iconify.design/icon-sets/) for a full list of available icon sets. Click any icon to see code.
|
||||
For extended documentation visit [Iconify for Vue documentation](https://docs.iconify.design/icon-components/vue/).
|
||||
|
||||
## License
|
||||
|
||||
Vue component is released with MIT license.
|
||||
|
||||
© 2020 Iconify OÜ
|
||||
© 2020, 2021 Iconify OÜ
|
||||
|
||||
See [Iconify icon sets page](https://iconify.design/icon-sets/) for list of collections and their licenses.
|
||||
|
||||
1788
packages/vue/package-lock.json
generated
1788
packages/vue/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
15022
packages/vue2-demo/package-lock.json
generated
15022
packages/vue2-demo/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,114 +1,109 @@
|
||||
# Iconify for Vue 2
|
||||
|
||||
Note: this documentation is for `@iconify/vue` package version 1. It has not been updated for `@iconify/vue2` yet.
|
||||
Iconify for Vue is not yet another icon component! There are many of them already.
|
||||
|
||||
Iconify for Vue 2 is not yet another icon component! There are many of them already.
|
||||
What you get with other components:
|
||||
|
||||
Iconify is the most versatile icon framework.
|
||||
- Limited set of icons.
|
||||
- Large bundle size because all icons are bundled.
|
||||
|
||||
- Unified icon framework that can be used with any icon library.
|
||||
- Out of the box includes 80+ icon sets with more than 70,000 icons.
|
||||
- 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.
|
||||
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.
|
||||
|
||||
For more information visit [https://iconify.design/](https://iconify.design/).
|
||||
That means:
|
||||
|
||||
Iconify for Vue is a part of Iconify framework that makes it easy to use many icon libraries with Vue.
|
||||
- One syntax for over 80,000 icons from 90+ 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.
|
||||
|
||||
Iconify for Vue features:
|
||||
For more information about Iconify project visit [https://iconify.design/](https://iconify.design/).
|
||||
|
||||
- Easy to use.
|
||||
- Bundles only icons that you need.
|
||||
- Change icon size and colour by changing font size and colour.
|
||||
- Renders pixel-perfect SVG.
|
||||
For extended documentation visit [Iconify for Vue 2 documentation](https://docs.iconify.design/icon-components/vue2/).
|
||||
|
||||
## Installation
|
||||
|
||||
If you are using NPM:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify/vue@^1
|
||||
npm install --save-dev @iconify/vue2
|
||||
```
|
||||
|
||||
If you are using Yarn:
|
||||
|
||||
```bash
|
||||
yarn add --dev @iconify/vue@^1
|
||||
yarn add --dev @iconify/vue2
|
||||
```
|
||||
|
||||
If you are using Vue 2, it is important that you install `@iconify/vue@^1`, not `@iconify/vue`, because `@iconify/vue` requires Vue 3.
|
||||
|
||||
This package does not include icons. Icons are split into separate packages that available at NPM. See below.
|
||||
|
||||
### Vue 3 compatibility
|
||||
|
||||
In Vue 3 functional components have changed and are not backwards compatible. Because of that, this component is not compatible with Vue 3.
|
||||
This component will not work with Vue 3.
|
||||
|
||||
Check out [Vue 3 version of icon component](https://github.com/iconify/iconify/tree/master/packages/vue).
|
||||
If you are using Vue 3, you need to install `@iconify/vue` component. It is almost identical to this component, but for Vue 3.
|
||||
|
||||
## Usage
|
||||
See [Iconify for Vue 3 documentation](https://docs.iconify.design/icon-components/vue/).
|
||||
|
||||
Install `@iconify/vue` and packages for selected icon sets. Import component from `@iconify/vue` and icon data for the icon you want to use:
|
||||
## Usage with aPI
|
||||
|
||||
Install `@iconify/vue2` and import `Icon` from it:
|
||||
|
||||
```js
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import home from '@iconify-icons/mdi/home';
|
||||
import faceWithMonocle from '@iconify-icons/twemoji/face-with-monocle';
|
||||
import { Icon } from '@iconify/vue2';
|
||||
```
|
||||
|
||||
Then you need to add component and icon.
|
||||
Then use `Icon` component in template with icon name or data as "icon" parameter:
|
||||
|
||||
There are two ways to use an icon: by icon name that you assign or by icon object.
|
||||
```jsx
|
||||
<Icon icon="mdi-light:home" />
|
||||
```
|
||||
|
||||
### Object syntax
|
||||
Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over 80,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
|
||||
|
||||
Object syntax passes icon data to the component.
|
||||
## Offline Usage
|
||||
|
||||
Retrieving icon data from Iconify API requires visitor to be online. What if you want to use component offline or on local network?
|
||||
|
||||
If you want to use icon component without relying on public Iconify API, there are several options:
|
||||
|
||||
1. You can import icon data from Iconify Icons packages.
|
||||
2. You can create custom icon bundles (more efficient, but requires more coding).
|
||||
3. You can host your own Iconify API instead of relying on third party service.
|
||||
|
||||
See [Iconify for Vue offline use documentation](https://docs.iconify.design/icon-components/vue2/offline.html) or [Iconify API documentation](https://docs.iconify.design/sources/api/).
|
||||
|
||||
## 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 Vue icon names documentation](https://docs.iconify.design/icon-components/vue2/icon-name.html) for more detailed explanation.
|
||||
|
||||
## Using icon data
|
||||
|
||||
Instead of icon name, you can pass icon data to component:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<iconify-icon :icon="icons.chart" height="24" />
|
||||
<Icon :icon="icons.chart" height="24" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import areaChartOutlined from '@iconify-icons/ant-design/area-chart-outlined';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: {
|
||||
chart: areaChartOutlined,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
The icon must be included in `data` function, so it could be referenced in the template.
|
||||
|
||||
The same example without TypeScript:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<iconify-icon :icon="icons.chart" height="24" :style="{ color: 'green' }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import { Icon } from '@iconify/vue2';
|
||||
import areaChartOutlined from '@iconify-icons/ant-design/area-chart-outlined';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// Assign icon data to icons.chart
|
||||
icons: {
|
||||
chart: areaChartOutlined,
|
||||
},
|
||||
@ -118,102 +113,70 @@ export default {
|
||||
</script>
|
||||
```
|
||||
|
||||
### String syntax
|
||||
See [icon packages documentation](https://docs.iconify.design/sources/npm/) for more details.
|
||||
|
||||
String syntax passes icon name to the component.
|
||||
### ES / CommonJS packages
|
||||
|
||||
With this method the icon needs to be added only once. That means if you have multiple components using 'chart' icon, you can add it only in your main component. This makes it easy to swap icons for an entire application.
|
||||
Example above might currently fail with some use cases. Package `@iconify-icons/mdi-light` uses ES modules that some software might not support yet. But do not worry, there is a simple solution: switch to CommonJS icon packages.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<iconify-icon icon="chart" height="24" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import areaChartOutlined from '@iconify-icons/ant-design/area-chart-outlined';
|
||||
|
||||
IconifyIcon.addIcon('chart', areaChartOutlined);
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
The icon must be registered using `addIcon` function of the component. You can assign any name to the icon.
|
||||
|
||||
The same example without TypeScript:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<iconify-icon icon="chart" height="24" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import areaChartOutlined from '@iconify-icons/ant-design/area-chart-outlined';
|
||||
|
||||
IconifyIcon.addIcon('chart', areaChartOutlined);
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
Instead of adding icons one by one using `addIcon` function, you can import an entire icon set using `addCollection` function:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<iconify-icon icon="jam:home" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
|
||||
// Import requires bundler that can import JSON files
|
||||
import jamIcons from '@iconify/json/json/jam.json';
|
||||
|
||||
// Function automatically adds prefix from icon set, which in this case is 'jam', followed by ':', so
|
||||
// icon names added by function should be called with prefix, such as 'jam:home'
|
||||
IconifyIcon.addCollection(jamIcons);
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
Example above imports an entire icon set. To learn how to create smaller bundles, check out Iconify documentation: https://docs.iconify.design/sources/bundles/
|
||||
|
||||
## Component installation
|
||||
|
||||
You can install the icon component using `Vue.use()`, then you will no longer need to add it to every component that uses icons.
|
||||
To switch to CommonJS package, replace this line in example above:
|
||||
|
||||
```js
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
|
||||
Vue.use(IconifyIcon);
|
||||
import home from '@iconify-icons/mdi-light/home';
|
||||
```
|
||||
|
||||
If you are using TypeScript with Vue, it becomes a bit more complex. You need to import type `PluginObject` from Vue and do some shenanigans with type casting:
|
||||
with
|
||||
|
||||
```ts
|
||||
import { PluginObject } from 'vue';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
|
||||
Vue.use((IconifyIcon as unknown) as PluginObject<unknown>);
|
||||
```js
|
||||
import home from '@iconify/icons-mdi-light/home';
|
||||
```
|
||||
|
||||
After installing the icon component, you no longer need to list `IconifyIcon` in components list every time you use it.
|
||||
All icons are available as ES modules for modern bundler and as CommonJS modules for outdated bundlers. ES modules use format `@iconify-icons/{prefix}`, CommonJS modules use `@iconify/icons-{prefix}`.
|
||||
|
||||
For more details, see [icon packages documentation](https://docs.iconify.design/sources/npm/).
|
||||
|
||||
### Inline
|
||||
|
||||
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 either use `InlineIcon` or use boolean `inline` property:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<p>
|
||||
Block:
|
||||
<Icon icon="line-md:image-twotone" />
|
||||
<Icon icon="mdi:account-box-outline" />
|
||||
</p>
|
||||
<p>
|
||||
Inline:
|
||||
<Icon icon="line-md:image-twotone" :inline="true" />
|
||||
<Icon icon="mdi:account-box-outline" :inline="true" />
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Icon } from '@iconify/vue2';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
Visual example to show the difference between inline and block modes:
|
||||
|
||||
|
||||
|
||||
## Icon component properties
|
||||
|
||||
@ -227,12 +190,13 @@ The icon component has the following optional properties:
|
||||
- `flip`, `horizontalFlip`, `verticalFlip`. Flip icon horizontally and/or vertically. See "Transformations" section below.
|
||||
- `rotate`. Rotate icon by 90, 180 or 270 degrees. See "Transformations" section below.
|
||||
- `align`, `verticalAlign`, `horizontalAlign`, `slice`. Icon alignment. See "Alignment" section below.
|
||||
- `onLoad`. Callback function that is called when icon data has been loaded. See "onLoad" section below.
|
||||
|
||||
Note: in templates you can use "camelCase" properties as "kebab-case". For example, `hFlip` can be used as `h-flip`.
|
||||
Note: in templates you can use "camelCase" properties as "kebab-case". For example, `horizontalFlip` can be used as `horizontal-flip`.
|
||||
|
||||
### Other properties and events
|
||||
|
||||
In addition to the properties mentioned above, the icon component accepts any other properties and events. All other properties and events will be passed to generated `SVG` element, so you can do stuff like assigning click event, setting the inline style, create element reference, add title and so on.
|
||||
In addition to the properties mentioned above, the icon component accepts any other properties and events. All other properties and events will be passed to generated `SVG` element, so you can do stuff like assigning click event, setting the inline style, add title and so on.
|
||||
|
||||
### Dimensions
|
||||
|
||||
@ -252,11 +216,11 @@ If you set only one dimension, another dimension will be calculated using the ic
|
||||
You can use numbers for `width` and `height`.
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" :height="24" />
|
||||
<Icon icon="mdi-light:home" :height="24" />
|
||||
```
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" :width="16" :height="16" />
|
||||
<Icon icon="mdi-light:home" :width="16" :height="16" />
|
||||
```
|
||||
|
||||
Note ":" before attribute - in Vue it changes the value to expression, so "20" is a number, not a string.
|
||||
@ -268,11 +232,11 @@ Number values are treated as pixels. That means in examples above, values are id
|
||||
If you use strings without units, they are treated the same as numbers in an example above.
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" height="24" />
|
||||
<Icon icon="mdi-light:home" height="24" />
|
||||
```
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" width="16" height="16" />
|
||||
<Icon icon="mdi-light:home" width="16" height="16" />
|
||||
```
|
||||
|
||||
#### Dimensions as strings with units
|
||||
@ -280,7 +244,7 @@ If you use strings without units, they are treated the same as numbers in an exa
|
||||
You can use units in width and height values:
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" height="2em" />
|
||||
<Icon 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.
|
||||
@ -290,7 +254,7 @@ Be careful when using `calc`, view port based units or percentages. In SVG eleme
|
||||
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.
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" height="auto" />
|
||||
<Icon icon="mdi-light:home" height="auto" />
|
||||
```
|
||||
|
||||
### Icon colour
|
||||
@ -301,7 +265,7 @@ Icons that do have a palette, such as emojis, cannot be customised. Setting colo
|
||||
|
||||
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, not `iconify-icon`.
|
||||
- Set `color` style or use stylesheet to target icon. If you are using the stylesheet, target `svg` element.
|
||||
- Add `color` property.
|
||||
|
||||
Examples:
|
||||
@ -309,23 +273,23 @@ Examples:
|
||||
Using `color` property:
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" color="red" />
|
||||
<iconify-icon icon="experiment" color="#f00" />
|
||||
<Icon icon="eva:alert-triangle-fill" color="red" />
|
||||
<Icon icon="eva:alert-triangle-fill" color="#f00" />
|
||||
```
|
||||
|
||||
Using inline style:
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" style="color: red;" />
|
||||
<iconify-icon icon="experiment" :style="{color: 'red'}" />
|
||||
<iconify-icon icon="experiment" :style="{color: '#f00'}" />
|
||||
<Icon icon="eva:alert-triangle-fill" style="color: red;" />
|
||||
<Icon icon="eva:alert-triangle-fill" :style="{color: 'red'}" />
|
||||
<Icon icon="eva:alert-triangle-fill" :style="{color: '#f00'}" />
|
||||
```
|
||||
|
||||
Using stylesheet:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<iconify-icon icon="experiment" class="red-icon" />
|
||||
<Icon icon="eva:alert-triangle-fill" class="red-icon" />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@ -351,7 +315,7 @@ Rotating 16x24 icon by 90 degrees results in:
|
||||
- CSS transformation keeps 16x24 bounding box, which might cause the icon to overlap text around it.
|
||||
- Icon transformation changes bounding box to 24x16, rotating content inside an icon.
|
||||
|
||||
_TODO: show visual example_
|
||||
See [icon transformations documentation](https://docs.iconify.design/icon-components/vue2/transform.html) for more details.
|
||||
|
||||
#### Flipping an icon
|
||||
|
||||
@ -366,25 +330,29 @@ Examples:
|
||||
Flip an icon horizontally:
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" :h-flip="true" />
|
||||
<iconify-icon icon="experiment" :horizontal-flip="true" />
|
||||
<iconify-icon icon="experiment" flip="horizontal" />
|
||||
<Icon icon="eva:alert-triangle-fill" :h-flip="true" />
|
||||
<Icon icon="eva:alert-triangle-fill" :horizontal-flip="true" />
|
||||
<Icon icon="eva:alert-triangle-fill" flip="horizontal" />
|
||||
```
|
||||
|
||||
Flip an icon vertically:
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" :v-flip="true" />
|
||||
<iconify-icon icon="experiment" :vertical-flip="true" />
|
||||
<iconify-icon icon="experiment" flip="vertical" />
|
||||
<Icon icon="eva:alert-triangle-fill" :v-flip="true" />
|
||||
<Icon icon="eva:alert-triangle-fill" :vertical-flip="true" />
|
||||
<Icon icon="eva:alert-triangle-fill" flip="vertical" />
|
||||
```
|
||||
|
||||
Flip an icon horizontally and vertically (the same as 180 degrees rotation):
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" :h-flip="true" :v-flip="true" />
|
||||
<iconify-icon icon="experiment" :horizontal-flip="true" :vertical-flip="true" />
|
||||
<iconify-icon icon="experiment" flip="horizontal,vertical" />
|
||||
<Icon icon="eva:alert-triangle-fill" :h-flip="true" :v-flip="true" />
|
||||
<Icon
|
||||
icon="eva:alert-triangle-fill"
|
||||
:horizontal-flip="true"
|
||||
:vertical-flip="true"
|
||||
/>
|
||||
<Icon icon="eva:alert-triangle-fill" flip="horizontal,vertical" />
|
||||
```
|
||||
|
||||
Why are there multiple boolean properties for flipping an icon? See "Alignment" section below for the explanation.
|
||||
@ -400,280 +368,33 @@ Number values are 1 for 90 degrees, 2 for 180 degrees, 3 for 270 degrees.
|
||||
Examples of 90 degrees rotation:
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" :rotate="1" />
|
||||
<iconify-icon icon="experiment" rotate="90deg" />
|
||||
<iconify-icon icon="experiment" rotate="25%" />
|
||||
<Icon icon="eva:alert-triangle-fill" :rotate="1" />
|
||||
<Icon icon="eva:alert-triangle-fill" rotate="90deg" />
|
||||
<Icon icon="eva:alert-triangle-fill" rotate="25%" />
|
||||
```
|
||||
|
||||
### Alignment
|
||||
### onLoad
|
||||
|
||||
Alignment matters only if you set the icon's width and height properties that do not match the viewBox with and height.
|
||||
`onLoad` property is an optional callback function. It is called when icon data has been loaded.
|
||||
|
||||
For example, if the icon is 24x24 and you set the width to 32 and height to 24. You must set both `width` and `height` properties for this to happen or use stylesheet to set both icon's width and height.
|
||||
It is not an event, such as `onClick` event for links, it is a simple callback function.
|
||||
|
||||
#### Stretching SVG
|
||||
When `onLoad` is called:
|
||||
|
||||
When you use incorrect width/height ratio for other images, browser stretches those images.
|
||||
- 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.
|
||||
|
||||
Unlike other images, SVG elements do not stretch. Instead, browser either adds space on sides of the icon (this is the default behaviour) or crops part of the icon.
|
||||
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
|
||||
|
||||
#### Alignment properties
|
||||
|
||||
You can control the behaviour of SVG when using incorrect width/height ratio by setting alignment properties:
|
||||
|
||||
- `horizontal-align` or `h-align`: string property to set horizontal alignment. Possible values are "left", "center" and "right".
|
||||
- `vertical-align` or `v-align`: string property to set vertical alignment. Possible values are "top", "middle" and "bottom".
|
||||
- `slice`: boolean property. See below.
|
||||
- `align`: shorthand string property. Value is the combination of vertical alignment values, horizontal alignment values, "meet" (same as `:slice="false"`) and "slice" (same as `:slice="true"`) separated by comma.
|
||||
|
||||
Why are there aliases for `h-align` and `v-align` properties? Because in Vue properties that start with `v-` are treated as directives. It is possible to use `v-align` property using a weird syntax (see example below), but it is much cleaner to have a different name for that property, so that is why Vue component has aliases for those properties. For more consistent properties, similar aliases were added to `h-flip` and `v-flip` properties.
|
||||
|
||||
Example of aligning an icon to the left if icon is not square:
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" width="1em" height="1em" h-align="left" />
|
||||
```
|
||||
|
||||
#### Slice
|
||||
|
||||
Slice property tells the browser how to deal with extra space.
|
||||
|
||||
By default, `slice` is disabled. The browser will scale the icon to fit the bounding box.
|
||||
|
||||
Example showing the icon behaviour when `slice` is disabled with various alignment values:
|
||||
|
||||
|
||||
|
||||
If `slice` is enabled, the browser will scale the icon to fill the bounding box and hide parts that do not fit.
|
||||
|
||||
Example showing the icon behaviour when `slice` is enabled with various alignment values:
|
||||
|
||||
|
||||
|
||||
### Inline
|
||||
|
||||
The icon component renders `SVG` elements. By default, `SVG` behave like images, which is different from icon fonts.
|
||||
|
||||
Many developers are used to working with icon fonts. Icon fonts render icons as text, not as images. Browsers align text differently than images:
|
||||
|
||||
- Images are vertically aligned at baseline.
|
||||
- Text is vertically aligned slightly below baseline.
|
||||
|
||||
By adding `inline` property, icon behaves like text. In inline mode icon has vertical alignment set to "-0.125em". That puts icon just below baseline, similar to icon fonts.
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" :inline="true" />
|
||||
```
|
||||
|
||||
Value is boolean, therefore ":" must be added before property name, changing the value from string to expression.
|
||||
|
||||
Visual example to show the difference between inline and block modes:
|
||||
|
||||
|
||||
|
||||
## Icon Sets
|
||||
|
||||
You can find all available icons at https://iconify.design/icon-sets/
|
||||
|
||||
Browse or search icons, click any icon and you will see a "Vue" tab that will give you exact code for the Vue component.
|
||||
|
||||
Import format for each icon is "@iconify-icons/{prefix}/{icon}" where {prefix} is collection prefix, and {icon} is the icon name.
|
||||
|
||||
Usage examples for a few popular icon sets:
|
||||
|
||||
### Material Design Icons
|
||||
|
||||
Package: https://www.npmjs.com/package/@iconify-icons/mdi
|
||||
|
||||
Icons list: https://iconify.design/icon-sets/mdi/
|
||||
|
||||
Installation:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify-icons/mdi
|
||||
```
|
||||
|
||||
Usage (in this example using object syntax):
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<iconify-icon :icon="icons.account" />
|
||||
<iconify-icon :icon="icons.home" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import homeIcon from '@iconify-icons/mdi/home';
|
||||
import accountIcon from '@iconify-icons/mdi/account';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: {
|
||||
home: homeIcon,
|
||||
account: accountIcon,
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### Simple Icons (big collection of logos)
|
||||
|
||||
Package: https://www.npmjs.com/package/@iconify-icons/simple-icons
|
||||
|
||||
Icons list: https://iconify.design/icon-sets/simple-icons/
|
||||
|
||||
Installation:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify-icons/simple-icons
|
||||
```
|
||||
|
||||
Usage (in this example using string syntax):
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<p>
|
||||
Mozilla Firefox <iconify-icon icon="firefox" :inline="true" /> is the
|
||||
best browser!
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import mozillafirefoxIcon from '@iconify-icons/simple-icons/mozillafirefox';
|
||||
|
||||
IconifyIcon.addIcon('firefox', mozillafirefoxIcon);
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### DashIcons
|
||||
|
||||
Package: https://www.npmjs.com/package/@iconify-icons/dashicons
|
||||
|
||||
Icons list: https://iconify.design/icon-sets/dashicons/
|
||||
|
||||
Installation:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify-icons/dashicons
|
||||
```
|
||||
|
||||
Usage (in this example using object syntax with TypeScript):
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<p>
|
||||
<iconify-icon :icon="icons.rotate" />
|
||||
Rotate!
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import imageRotate from '@iconify-icons/dashicons/image-rotate';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: {
|
||||
rotate: imageRotate,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
svg {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
vertical-align: -0.25em; /* moves icon 5px below baseline */
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### OpenMoji
|
||||
|
||||
Package: https://www.npmjs.com/package/@iconify-icons/openmoji
|
||||
|
||||
Icons list: https://iconify.design/icon-sets/openmoji/
|
||||
|
||||
Installation:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify-icons/openmoji
|
||||
```
|
||||
|
||||
Usage:
|
||||
|
||||
Usage (in this example using string syntax with TypeScript):
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<p>
|
||||
<iconify-icon icon="autonomous-car" /> Autonomous cars are the future!
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import autonomousCar from '@iconify-icons/openmoji/autonomous-car';
|
||||
import exhaustGasesCar from '@iconify-icons/openmoji/exhaust-gases-car';
|
||||
|
||||
IconifyIcon.addIcon('autonomous-car', autonomousCar);
|
||||
IconifyIcon.addIcon('gas-car', exhaustGasesCar);
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
svg {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
vertical-align: -0.25em; /* moves icon 5px below baseline */
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Other icon sets
|
||||
|
||||
There are over 80 icon sets. This readme shows only a few examples. See [Iconify icon sets](http://iconify.design/icon-sets/) for a full list of available icon sets. Click any icon to see code.
|
||||
For extended documentation visit [Iconify for Vue documentation](https://docs.iconify.design/icon-components/vue2/).
|
||||
|
||||
## License
|
||||
|
||||
Vue component is released with MIT license.
|
||||
|
||||
© 2020 Iconify OÜ
|
||||
© 2020, 2021 Iconify OÜ
|
||||
|
||||
See [Iconify icon sets page](https://iconify.design/icon-sets/) for list of collections and their licenses.
|
||||
|
||||
8245
packages/vue2/package-lock.json
generated
8245
packages/vue2/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user