Publish Svelte component, fix few typos in Vue and React documentation and demo

2025-01-06 07:20:40 +00:00 · 2020-04-28 22:40:05 +03:00 · 2020-04-28 22:40:05 +03:00 · 8639d52586
commit 8639d52586
parent 1dd49d6455
31 changed files with 4141 additions and 38 deletions
--- a/README.md
+++ b/README.md
@ -53,11 +53,12 @@ Iconify API provides icon data to Iconify SVG framework and other implementation

 There are several Iconify implementations included in this repository:

-| Implementation                       | Usage | with API | without API |
-| ------------------------------------ | ----- | :------: | :---------: |
-| [SVG Framework](./packages/iconify/) | HTML  |    +     |      +      |
-| [React component](./packages/react/) | React |    -     |      +      |
-| [Vue component](./packages/vue/)     | Vue   |    -     |      +      |
+| Implementation                         | Usage  | with API | without API |
+| -------------------------------------- | ------ | :------: | :---------: |
+| [SVG Framework](./packages/iconify/)   | HTML   |    +     |      +      |
+| [React component](./packages/react/)   | React  |    -     |      +      |
+| [Vue component](./packages/vue/)       | Vue    |    -     |      +      |
+| [Svelte component](./packages/svelte/) | Svelte |    -     |      +      |

 Other packages:

@ -65,6 +66,7 @@ Other packages:
 -   [Iconify core](./packages/core/) - common files used by various implementations.
 -   [React demo](./packages/react-demo/) - demo for React component. Run `npm start` to start demo.
 -   [Vue demo](./packages/vue-demo/) - demo for Vue component. Run `npm serve` to start demo.
+-   [Svelte demo](./packages/svelte-demo/) - demo for Svelte component. Run `npm run dev` to start demo.
 -   [Browser tests](./packages/browser-tests/) - unit tests for SVG framework. Must be ran in browser.

 ## Installation
--- a/packages/iconify/package-lock.json
+++ b/packages/iconify/package-lock.json
@ -1,6 +1,6 @@
 {
 	"name": "@iconify/iconify",
-	"version": "2.0.0-beta.0",
+	"version": "2.0.0-beta.1",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
@ -30,6 +30,17 @@
 			"integrity": "sha512-/tx5GpGSyMn5FrOSggDSm9yJDLcEXiK0+zdCBssST6w9QgdJjoQ9lRBSxql/3vgQoI+7XbubWsP86jjbuVnFcA==",
 			"dev": true
 		},
+		"@iconify/core": {
+			"version": "1.0.0-beta.0",
+			"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-beta.0.tgz",
+			"integrity": "sha512-vQT4LeVYI4yA3pH66+8k53WYt++fnctsMhvssTeu11ASO7L8SY12Q/fq03g9MVWNTHw036YwQjqprwUu2h+NBA==",
+			"dev": true,
+			"requires": {
+				"@cyberalien/redundancy": "^1.0.0",
+				"@iconify/types": "^1.0.2",
+				"axios": "^0.19.2"
+			}
+		},
 		"@iconify/types": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.0.2.tgz",
@ -257,6 +268,16 @@
 				"sprintf-js": "~1.0.2"
 			}
 		},
+		"axios": {
+			"version": "0.19.2",
+			"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+			"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+			"dev": true,
+			"optional": true,
+			"requires": {
+				"follow-redirects": "1.5.10"
+			}
+		},
 		"balanced-match": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@ -359,6 +380,16 @@
 			"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
 			"dev": true
 		},
+		"debug": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+			"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+			"dev": true,
+			"optional": true,
+			"requires": {
+				"ms": "2.0.0"
+			}
+		},
 		"escape-string-regexp": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@ -386,6 +417,16 @@
 				"to-regex-range": "^5.0.1"
 			}
 		},
+		"follow-redirects": {
+			"version": "1.5.10",
+			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+			"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+			"dev": true,
+			"optional": true,
+			"requires": {
+				"debug": "=3.1.0"
+			}
+		},
 		"fs-extra": {
 			"version": "7.0.1",
 			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
@ -572,6 +613,13 @@
 			"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
 			"dev": true
 		},
+		"ms": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+			"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+			"dev": true,
+			"optional": true
+		},
 		"once": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
--- a/packages/react-demo/package.json
+++ b/packages/react-demo/package.json
@ -1,5 +1,5 @@
 {
-	"name": "iconify-react-demo",
+	"name": "@iconify/react-demo",
 	"version": "0.1.0",
 	"private": true,
 	"dependencies": {
--- a/packages/react/readme.md
+++ b/packages/react/readme.md
@ -88,7 +88,7 @@ Visual example to show the difference between inline and block modes:

 ## Icon component properties

-`icon` property is mandatory. It tells component what icon to render. If the property value is invalid, the component will render an empty icon. Value can be a string containing the icon name (icon must be registered before use by calling `addIcon`, see instructions above) or an object containing the icon data.
+`icon` property is mandatory. It tells component what icon to render. If the property value is invalid, the component will render an empty icon. The value can be a string containing the icon name (icon must be registered before use by calling `addIcon`, see instructions above) or an object containing the icon data.

 The icon component has the following optional properties:

--- a/packages/svelte-demo/.gitignore
+++ b/packages/svelte-demo/.gitignore
@ -0,0 +1,4 @@
+/node_modules/
+/public/build/
+
+.DS_Store
--- a/packages/svelte-demo/README.md
+++ b/packages/svelte-demo/README.md
@ -0,0 +1,93 @@
+*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
+
+---
+
+# svelte app
+
+This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
+
+To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
+
+```bash
+npx degit sveltejs/template svelte-app
+cd svelte-app
+```
+
+*Note that you will need to have [Node.js](https://nodejs.org) installed.*
+
+
+## Get started
+
+Install the dependencies...
+
+```bash
+cd svelte-app
+npm install
+```
+
+...then start [Rollup](https://rollupjs.org):
+
+```bash
+npm run dev
+```
+
+Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
+
+By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
+
+
+## Building and running in production mode
+
+To create an optimised version of the app:
+
+```bash
+npm run build
+```
+
+You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
+
+
+## Single-page app mode
+
+By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
+
+If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
+
+```js
+"start": "sirv public --single"
+```
+
+
+## Deploying to the web
+
+### With [now](https://zeit.co/now)
+
+Install `now` if you haven't already:
+
+```bash
+npm install -g now
+```
+
+Then, from within your project folder:
+
+```bash
+cd public
+now deploy --name my-project
+```
+
+As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.
+
+### With [surge](https://surge.sh/)
+
+Install `surge` if you haven't already:
+
+```bash
+npm install -g surge
+```
+
+Then, from within your project folder:
+
+```bash
+npm run build
+surge public my-project.surge.sh
+```
--- a/packages/svelte-demo/package-lock.json
+++ b/packages/svelte-demo/package-lock.json
@ -0,0 +1,620 @@
+{
+	"name": "@iconify/svelte-demo",
+	"version": "1.0.0",
+	"lockfileVersion": 1,
+	"requires": true,
+	"dependencies": {
+		"@babel/code-frame": {
+			"version": "7.8.3",
+			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
+			"integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
+			"dev": true,
+			"requires": {
+				"@babel/highlight": "^7.8.3"
+			}
+		},
+		"@babel/helper-validator-identifier": {
+			"version": "7.9.5",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz",
+			"integrity": "sha512-/8arLKUFq882w4tWGj9JYzRpAlZgiWUJ+dtteNTDqrRBz9Iguck9Rn3ykuBDoUwh2TO4tSAJlrxDUOXWklJe4g==",
+			"dev": true
+		},
+		"@babel/highlight": {
+			"version": "7.9.0",
+			"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz",
+			"integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==",
+			"dev": true,
+			"requires": {
+				"@babel/helper-validator-identifier": "^7.9.0",
+				"chalk": "^2.0.0",
+				"js-tokens": "^4.0.0"
+			}
+		},
+		"@iconify/icons-bx": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@iconify/icons-bx/-/icons-bx-1.0.3.tgz",
+			"integrity": "sha512-CgqM+XcypQDRCmuTZj3SlbZUGr0uK69vFc7GeBfJUKBZW/yelZ35I6ot1tVpkF/UrQebpRGRDmOFGRp/3z/SnQ==",
+			"dev": true
+		},
+		"@iconify/icons-dashicons": {
+			"version": "1.0.9",
+			"resolved": "https://registry.npmjs.org/@iconify/icons-dashicons/-/icons-dashicons-1.0.9.tgz",
+			"integrity": "sha512-GtHuLxtf6hAZzuruMbNaj55LKW0VMqoD4IWLnxNw4GF9DTu/HowdapTIMb4qan/tjej3+AGyWbxn2stJXfJiSg==",
+			"dev": true
+		},
+		"@polka/url": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmjs.org/@polka/url/-/url-0.5.0.tgz",
+			"integrity": "sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw=="
+		},
+		"@rollup/plugin-commonjs": {
+			"version": "11.0.2",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-11.0.2.tgz",
+			"integrity": "sha512-MPYGZr0qdbV5zZj8/2AuomVpnRVXRU5XKXb3HVniwRoRCreGlf5kOE081isNWeiLIi6IYkwTX9zE0/c7V8g81g==",
+			"dev": true,
+			"requires": {
+				"@rollup/pluginutils": "^3.0.0",
+				"estree-walker": "^1.0.1",
+				"is-reference": "^1.1.2",
+				"magic-string": "^0.25.2",
+				"resolve": "^1.11.0"
+			}
+		},
+		"@rollup/plugin-node-resolve": {
+			"version": "7.1.3",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
+			"integrity": "sha512-RxtSL3XmdTAE2byxekYLnx+98kEUOrPHF/KRVjLH+DEIHy6kjIw7YINQzn+NXiH/NTrQLAwYs0GWB+csWygA9Q==",
+			"dev": true,
+			"requires": {
+				"@rollup/pluginutils": "^3.0.8",
+				"@types/resolve": "0.0.8",
+				"builtin-modules": "^3.1.0",
+				"is-module": "^1.0.0",
+				"resolve": "^1.14.2"
+			}
+		},
+		"@rollup/pluginutils": {
+			"version": "3.0.9",
+			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.0.9.tgz",
+			"integrity": "sha512-TLZavlfPAZYI7v33wQh4mTP6zojne14yok3DNSLcjoG/Hirxfkonn6icP5rrNWRn8nZsirJBFFpijVOJzkUHDg==",
+			"dev": true,
+			"requires": {
+				"@types/estree": "0.0.39",
+				"estree-walker": "^1.0.1",
+				"micromatch": "^4.0.2"
+			}
+		},
+		"@types/estree": {
+			"version": "0.0.39",
+			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+			"integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+			"dev": true
+		},
+		"@types/node": {
+			"version": "13.13.4",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.4.tgz",
+			"integrity": "sha512-x26ur3dSXgv5AwKS0lNfbjpCakGIduWU1DU91Zz58ONRWrIKGunmZBNv4P7N+e27sJkiGDsw/3fT4AtsqQBrBA==",
+			"dev": true
+		},
+		"@types/resolve": {
+			"version": "0.0.8",
+			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
+			"integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==",
+			"dev": true,
+			"requires": {
+				"@types/node": "*"
+			}
+		},
+		"acorn": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
+			"integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==",
+			"dev": true
+		},
+		"ansi-styles": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+			"dev": true,
+			"requires": {
+				"color-convert": "^1.9.0"
+			}
+		},
+		"anymatch": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
+			"integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
+			"dev": true,
+			"requires": {
+				"normalize-path": "^3.0.0",
+				"picomatch": "^2.0.4"
+			}
+		},
+		"async-limiter": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
+			"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
+			"dev": true
+		},
+		"binary-extensions": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
+			"integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
+			"dev": true
+		},
+		"braces": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+			"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+			"dev": true,
+			"requires": {
+				"fill-range": "^7.0.1"
+			}
+		},
+		"buffer-from": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+			"integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
+			"dev": true
+		},
+		"builtin-modules": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz",
+			"integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==",
+			"dev": true
+		},
+		"chalk": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+			"dev": true,
+			"requires": {
+				"ansi-styles": "^3.2.1",
+				"escape-string-regexp": "^1.0.5",
+				"supports-color": "^5.3.0"
+			}
+		},
+		"chokidar": {
+			"version": "3.4.0",
+			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.0.tgz",
+			"integrity": "sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==",
+			"dev": true,
+			"requires": {
+				"anymatch": "~3.1.1",
+				"braces": "~3.0.2",
+				"fsevents": "~2.1.2",
+				"glob-parent": "~5.1.0",
+				"is-binary-path": "~2.1.0",
+				"is-glob": "~4.0.1",
+				"normalize-path": "~3.0.0",
+				"readdirp": "~3.4.0"
+			}
+		},
+		"color-convert": {
+			"version": "1.9.3",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+			"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+			"dev": true,
+			"requires": {
+				"color-name": "1.1.3"
+			}
+		},
+		"color-name": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+			"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+			"dev": true
+		},
+		"commander": {
+			"version": "2.20.3",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+			"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+			"dev": true
+		},
+		"console-clear": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz",
+			"integrity": "sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ=="
+		},
+		"escape-string-regexp": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+			"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+			"dev": true
+		},
+		"estree-walker": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+			"integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+			"dev": true
+		},
+		"fill-range": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+			"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+			"dev": true,
+			"requires": {
+				"to-regex-range": "^5.0.1"
+			}
+		},
+		"fsevents": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
+			"integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
+			"dev": true,
+			"optional": true
+		},
+		"get-port": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz",
+			"integrity": "sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw="
+		},
+		"glob-parent": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
+			"integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+			"dev": true,
+			"requires": {
+				"is-glob": "^4.0.1"
+			}
+		},
+		"has-flag": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+			"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+			"dev": true
+		},
+		"is-binary-path": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+			"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+			"dev": true,
+			"requires": {
+				"binary-extensions": "^2.0.0"
+			}
+		},
+		"is-extglob": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+			"integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+			"dev": true
+		},
+		"is-glob": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+			"integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+			"dev": true,
+			"requires": {
+				"is-extglob": "^2.1.1"
+			}
+		},
+		"is-module": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+			"integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
+			"dev": true
+		},
+		"is-number": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+			"dev": true
+		},
+		"is-reference": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.1.4.tgz",
+			"integrity": "sha512-uJA/CDPO3Tao3GTrxYn6AwkM4nUPJiGGYu5+cB8qbC7WGFlrKZbiRo7SFKxUAEpFUfiHofWCXBUNhvYJMh+6zw==",
+			"dev": true,
+			"requires": {
+				"@types/estree": "0.0.39"
+			}
+		},
+		"jest-worker": {
+			"version": "24.9.0",
+			"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-24.9.0.tgz",
+			"integrity": "sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==",
+			"dev": true,
+			"requires": {
+				"merge-stream": "^2.0.0",
+				"supports-color": "^6.1.0"
+			},
+			"dependencies": {
+				"supports-color": {
+					"version": "6.1.0",
+					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+					"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+					"dev": true,
+					"requires": {
+						"has-flag": "^3.0.0"
+					}
+				}
+			}
+		},
+		"js-tokens": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+			"dev": true
+		},
+		"kleur": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+			"integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="
+		},
+		"livereload": {
+			"version": "0.9.1",
+			"resolved": "https://registry.npmjs.org/livereload/-/livereload-0.9.1.tgz",
+			"integrity": "sha512-9g7sua11kkyZNo2hLRCG3LuZZwqexoyEyecSlV8cAsfAVVCZqLzVir6XDqmH0r+Vzgnd5LrdHDMyjtFnJQLAYw==",
+			"dev": true,
+			"requires": {
+				"chokidar": "^3.3.0",
+				"livereload-js": "^3.1.0",
+				"opts": ">= 1.2.0",
+				"ws": "^6.2.1"
+			}
+		},
+		"livereload-js": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-3.2.2.tgz",
+			"integrity": "sha512-xhScbNeC687ZINjEf/bD+BMiPx4s4q0mehcLb3zCc8+mykOtmaBR4vqzyIV9rIGdG9JjHaT0LiFdscvivCjX1Q==",
+			"dev": true
+		},
+		"local-access": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/local-access/-/local-access-1.0.1.tgz",
+			"integrity": "sha512-ykt2pgN0aqIy6KQC1CqdWTWkmUwNgaOS6dcpHVjyBJONA+Xi7AtSB1vuxC/U/0tjIP3wcRudwQk1YYzUvzk2bA=="
+		},
+		"magic-string": {
+			"version": "0.25.7",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
+			"integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+			"dev": true,
+			"requires": {
+				"sourcemap-codec": "^1.4.4"
+			}
+		},
+		"merge-stream": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+			"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+			"dev": true
+		},
+		"micromatch": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+			"integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+			"dev": true,
+			"requires": {
+				"braces": "^3.0.1",
+				"picomatch": "^2.0.5"
+			}
+		},
+		"mime": {
+			"version": "2.4.4",
+			"resolved": "https://registry.npmjs.org/mime/-/mime-2.4.4.tgz",
+			"integrity": "sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA=="
+		},
+		"mri": {
+			"version": "1.1.5",
+			"resolved": "https://registry.npmjs.org/mri/-/mri-1.1.5.tgz",
+			"integrity": "sha512-d2RKzMD4JNyHMbnbWnznPaa8vbdlq/4pNZ3IgdaGrVbBhebBsGUUE/6qorTMYNS6TwuH3ilfOlD2bf4Igh8CKg=="
+		},
+		"normalize-path": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+			"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+			"dev": true
+		},
+		"opts": {
+			"version": "1.2.7",
+			"resolved": "https://registry.npmjs.org/opts/-/opts-1.2.7.tgz",
+			"integrity": "sha512-hwZhzGGG/GQ7igxAVFOEun2N4fWul31qE9nfBdCnZGQCB5+L7tN9xZ+94B4aUpLOJx/of3zZs5XsuubayQYQjA==",
+			"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==",
+			"dev": true
+		},
+		"picomatch": {
+			"version": "2.2.2",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
+			"integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
+			"dev": true
+		},
+		"readdirp": {
+			"version": "3.4.0",
+			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz",
+			"integrity": "sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==",
+			"dev": true,
+			"requires": {
+				"picomatch": "^2.2.1"
+			}
+		},
+		"require-relative": {
+			"version": "0.8.7",
+			"resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz",
+			"integrity": "sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=",
+			"dev": true
+		},
+		"resolve": {
+			"version": "1.17.0",
+			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
+			"integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
+			"dev": true,
+			"requires": {
+				"path-parse": "^1.0.6"
+			}
+		},
+		"rollup": {
+			"version": "1.32.1",
+			"resolved": "https://registry.npmjs.org/rollup/-/rollup-1.32.1.tgz",
+			"integrity": "sha512-/2HA0Ec70TvQnXdzynFffkjA6XN+1e2pEv/uKS5Ulca40g2L7KuOE3riasHoNVHOsFD5KKZgDsMk1CP3Tw9s+A==",
+			"dev": true,
+			"requires": {
+				"@types/estree": "*",
+				"@types/node": "*",
+				"acorn": "^7.1.0"
+			}
+		},
+		"rollup-plugin-livereload": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-1.3.0.tgz",
+			"integrity": "sha512-abyqXaB21+nFHo+vJULBqfzNx6zXABC19UyvqgDfdoxR/8pFAd041GO+GIUe8ZYC2DbuMUmioh1Lvbk14YLZgw==",
+			"dev": true,
+			"requires": {
+				"livereload": "^0.9.1"
+			}
+		},
+		"rollup-plugin-svelte": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-5.2.1.tgz",
+			"integrity": "sha512-wc93cN66sRpX6uFljVFqvWT6NU3V5ab/uLXKt2UiARuexFU/ctolzkmdXM7WM5iKdTX9scToS9sabJTJV4DUMA==",
+			"dev": true,
+			"requires": {
+				"require-relative": "^0.8.7",
+				"rollup-pluginutils": "^2.8.2",
+				"sourcemap-codec": "^1.4.8"
+			}
+		},
+		"rollup-plugin-terser": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-5.3.0.tgz",
+			"integrity": "sha512-XGMJihTIO3eIBsVGq7jiNYOdDMb3pVxuzY0uhOE/FM4x/u9nQgr3+McsjzqBn3QfHIpNSZmFnpoKAwHBEcsT7g==",
+			"dev": true,
+			"requires": {
+				"@babel/code-frame": "^7.5.5",
+				"jest-worker": "^24.9.0",
+				"rollup-pluginutils": "^2.8.2",
+				"serialize-javascript": "^2.1.2",
+				"terser": "^4.6.2"
+			}
+		},
+		"rollup-pluginutils": {
+			"version": "2.8.2",
+			"resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+			"integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+			"dev": true,
+			"requires": {
+				"estree-walker": "^0.6.1"
+			},
+			"dependencies": {
+				"estree-walker": {
+					"version": "0.6.1",
+					"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+					"integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+					"dev": true
+				}
+			}
+		},
+		"sade": {
+			"version": "1.7.3",
+			"resolved": "https://registry.npmjs.org/sade/-/sade-1.7.3.tgz",
+			"integrity": "sha512-m4BctppMvJ60W1dXnHq7jMmFe3hPJZDAH85kQ3ACTo7XZNVUuTItCQ+2HfyaMeV5cKrbw7l4vD/6We3GBxvdJw==",
+			"requires": {
+				"mri": "^1.1.0"
+			}
+		},
+		"serialize-javascript": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
+			"integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==",
+			"dev": true
+		},
+		"sirv": {
+			"version": "0.4.2",
+			"resolved": "https://registry.npmjs.org/sirv/-/sirv-0.4.2.tgz",
+			"integrity": "sha512-dQbZnsMaIiTQPZmbGmktz+c74zt/hyrJEB4tdp2Jj0RNv9J6B/OWR5RyrZEvIn9fyh9Zlg2OlE2XzKz6wMKGAw==",
+			"requires": {
+				"@polka/url": "^0.5.0",
+				"mime": "^2.3.1"
+			}
+		},
+		"sirv-cli": {
+			"version": "0.4.5",
+			"resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-0.4.5.tgz",
+			"integrity": "sha512-Fl6icSm0EwPrXSGid2xphMp//WNTSX2yENRAGnJuuZNmdc8LvE/BtdZD3MPn28ifAfDqTMwbB3dpcZojAIOiBg==",
+			"requires": {
+				"console-clear": "^1.1.0",
+				"get-port": "^3.2.0",
+				"kleur": "^3.0.0",
+				"local-access": "^1.0.1",
+				"sade": "^1.4.0",
+				"sirv": "^0.4.2",
+				"tinydate": "^1.0.0"
+			}
+		},
+		"source-map": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+			"dev": true
+		},
+		"source-map-support": {
+			"version": "0.5.19",
+			"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+			"integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+			"dev": true,
+			"requires": {
+				"buffer-from": "^1.0.0",
+				"source-map": "^0.6.0"
+			}
+		},
+		"sourcemap-codec": {
+			"version": "1.4.8",
+			"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+			"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+			"dev": true
+		},
+		"supports-color": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+			"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+			"dev": true,
+			"requires": {
+				"has-flag": "^3.0.0"
+			}
+		},
+		"svelte": {
+			"version": "3.21.0",
+			"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.21.0.tgz",
+			"integrity": "sha512-smh3LZKPCGJ+UXa0iZvUmuDctPYCwPY1opmClTWTm+l6e4y9FHLoCZMiue8YIeyc9JvlGT/EK0xry0diXjFDZQ==",
+			"dev": true
+		},
+		"terser": {
+			"version": "4.6.12",
+			"resolved": "https://registry.npmjs.org/terser/-/terser-4.6.12.tgz",
+			"integrity": "sha512-fnIwuaKjFPANG6MAixC/k1TDtnl1YlPLUlLVIxxGZUn1gfUx2+l3/zGNB72wya+lgsb50QBi2tUV75RiODwnww==",
+			"dev": true,
+			"requires": {
+				"commander": "^2.20.0",
+				"source-map": "~0.6.1",
+				"source-map-support": "~0.5.12"
+			}
+		},
+		"tinydate": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.2.0.tgz",
+			"integrity": "sha512-3GwPk8VhDFnUZ2TrgkhXJs6hcMAIIw4x/xkz+ayK6dGoQmp2nUwKzBXK0WnMsqkh6vfUhpqQicQF3rbshfyJkg=="
+		},
+		"to-regex-range": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+			"dev": true,
+			"requires": {
+				"is-number": "^7.0.0"
+			}
+		},
+		"ws": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
+			"integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
+			"dev": true,
+			"requires": {
+				"async-limiter": "~1.0.0"
+			}
+		}
+	}
+}
--- a/packages/svelte-demo/package.json
+++ b/packages/svelte-demo/package.json
@ -0,0 +1,25 @@
+{
+	"name": "@iconify/svelte-demo",
+	"private": true,
+	"version": "1.0.0",
+	"scripts": {
+		"build": "rollup -c",
+		"dev": "rollup -c -w",
+		"start": "sirv public"
+	},
+	"devDependencies": {
+		"@iconify/icons-bx": "^1.0.3",
+		"@iconify/icons-dashicons": "^1.0.9",
+		"@iconify/svelte": "^1.0.0-beta.0",
+		"@rollup/plugin-commonjs": "11.0.2",
+		"@rollup/plugin-node-resolve": "^7.0.0",
+		"rollup": "^1.20.0",
+		"rollup-plugin-livereload": "^1.0.0",
+		"rollup-plugin-svelte": "^5.0.3",
+		"rollup-plugin-terser": "^5.1.2",
+		"svelte": "^3.0.0"
+	},
+	"dependencies": {
+		"sirv-cli": "^0.4.4"
+	}
+}
--- a/packages/svelte-demo/public/favicon.png
+++ b/packages/svelte-demo/public/favicon.png
--- a/packages/svelte-demo/public/global.css
+++ b/packages/svelte-demo/public/global.css
@ -0,0 +1,66 @@
+html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 8px;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+	color: rgb(0,100,200);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:visited {
+	color: rgb(0,80,160);
+}
+
+label {
+	display: block;
+}
+
+input, button, select, textarea {
+	font-family: inherit;
+	font-size: inherit;
+	padding: 0.4em;
+	margin: 0 0 0.5em 0;
+	box-sizing: border-box;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+}
+
+input:disabled {
+	color: #ccc;
+}
+
+input[type="range"] {
+	height: 0;
+}
+
+button {
+	color: #333;
+	background-color: #f4f4f4;
+	outline: none;
+}
+
+button:disabled {
+	color: #999;
+}
+
+button:not(:disabled):active {
+	background-color: #ddd;
+}
+
+button:focus {
+	border-color: #666;
+}
--- a/packages/svelte-demo/public/index.html
+++ b/packages/svelte-demo/public/index.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+
+	<title>Svelte app</title>
+
+	<link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel='stylesheet' href='/global.css'>
+	<link rel='stylesheet' href='/build/bundle.css'>
+
+	<script defer src='/build/bundle.js'></script>
+</head>
+
+<body>
+</body>
+</html>
--- a/packages/svelte-demo/rollup.config.js
+++ b/packages/svelte-demo/rollup.config.js
@ -0,0 +1,75 @@
+import svelte from 'rollup-plugin-svelte';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import livereload from 'rollup-plugin-livereload';
+import { terser } from 'rollup-plugin-terser';
+
+const production = !process.env.ROLLUP_WATCH;
+
+export default {
+	input: 'src/main.js',
+	output: {
+		sourcemap: true,
+		format: 'iife',
+		name: 'app',
+		file: 'public/build/bundle.js',
+	},
+	plugins: [
+		svelte({
+			// enable run-time checks when not in production
+			dev: !production,
+			// we'll extract any component CSS out into
+			// a separate file - better for performance
+			css: (css) => {
+				css.write('public/build/bundle.css');
+			},
+		}),
+
+		// If you have external dependencies installed from
+		// npm, you'll most likely need these plugins. In
+		// some cases you'll need additional configuration -
+		// consult the documentation for details:
+		// https://github.com/rollup/plugins/tree/master/packages/commonjs
+		resolve({
+			browser: true,
+			dedupe: ['svelte'],
+		}),
+		commonjs(),
+
+		// In dev mode, call `npm run start` once
+		// the bundle has been generated
+		!production && serve(),
+
+		// Watch the `public` directory and refresh the
+		// browser on changes when not in production
+		!production && livereload('public'),
+
+		// If we're building for production (npm run build
+		// instead of npm run dev), minify
+		production && terser(),
+	],
+	watch: {
+		clearScreen: false,
+	},
+};
+
+function serve() {
+	let started = false;
+
+	return {
+		writeBundle() {
+			if (!started) {
+				started = true;
+
+				require('child_process').spawn(
+					'npm',
+					['run', 'start', '--', '--dev'],
+					{
+						stdio: ['ignore', 'inherit', 'inherit'],
+						shell: true,
+					}
+				);
+			}
+		},
+	};
+}
--- a/packages/svelte-demo/src/App.svelte
+++ b/packages/svelte-demo/src/App.svelte
@ -0,0 +1,100 @@
+<script>
+	import Icon from '@iconify/svelte';
+	import adminCustomizer from '@iconify/icons-dashicons/admin-customizer';
+	import bxUser from '@iconify/icons-bx/bx-user';
+	import bxError from '@iconify/icons-bx/bx-error';
+
+	import UsageSample from './components/Sample.svelte';
+	import ColorStyle from './components/ColorStyle.svelte';
+	import InlineDemo from './components/Inline.svelte';
+	import AlignmentDemo from './components/Alignment.svelte';
+	import TransformationsDemo from './components/Transformations.svelte';
+	import StyleDemo from './components/Style.svelte';
+</script>
+
+<style>
+	main {
+		text-align: left;
+		padding: 1em;
+		font-size: 16px;
+		line-height: 1.5;
+		color: #2c3e50;
+	}
+
+	main :global(section) {
+		border-bottom: 1px dotted #ccc;
+		padding: 16px;
+	}
+	main :global(section:last-child) {
+		border-bottom-width: 0;
+	}
+	main :global(section:after) {
+		content: ' ';
+		display: table;
+		clear: both;
+	}
+	main :global(h1) {
+		margin: 0 0 16px;
+		padding: 0;
+		font-size: 24px;
+		font-weight: normal;
+	}
+	main :global(p) {
+		margin: 12px 0 4px;
+		padding: 0;
+	}
+
+	/* Alert demo */
+	.alert {
+		position: relative;
+		margin: 8px;
+		padding: 16px;
+		padding-left: 48px;
+		background: #ba3329;
+		color: #fff;
+		border-radius: 5px;
+		float: left;
+	}
+
+	.alert + div {
+		clear: both;
+	}
+
+	.alert :global(svg) {
+		position: absolute;
+		left: 12px;
+		top: 50%;
+		font-size: 24px;
+		line-height: 1em;
+		margin: -0.5em 0 0;
+	}
+</style>
+
+<main>
+	<section>
+		<h1>Usage</h1>
+		<div>
+			Empty icon:
+			<Icon />
+		</div>
+		<div>
+			Simple icon:
+			<Icon icon={bxUser} inline={true} />
+		</div>
+		<div class="alert">
+			<Icon icon={bxError} />
+			Important notice with alert icon!
+		</div>
+	</section>
+
+	<section>
+		<h1>Example file (components/Sample.svelte)</h1>
+		<UsageSample />
+	</section>
+
+	<ColorStyle />
+	<InlineDemo />
+	<AlignmentDemo />
+	<TransformationsDemo />
+	<StyleDemo />
+</main>
--- a/packages/svelte-demo/src/components/Alignment.svelte
+++ b/packages/svelte-demo/src/components/Alignment.svelte
@ -0,0 +1,122 @@
+<script>
+	import Icon from '@iconify/svelte';
+	import paperclipIcon from '@iconify/icons-dashicons/paperclip';
+</script>
+
+<style>
+	section :global(svg) {
+		color: #06a;
+		font-size: 32px;
+		line-height: 1em;
+		margin-right: 8px;
+		box-shadow: 0 0 0 1px #ccc;
+		vertical-align: top;
+	}
+</style>
+
+<section>
+	<h1>Alignment (components/Alignment.svelte)</h1>
+	<div>
+		<p>Icon with correct width/heigh ratio:</p>
+		<Icon icon={paperclipIcon} />
+	</div>
+	<div>
+		<p>Bad width/height ratio, default alignment (slice = false):</p>
+		<Icon icon={paperclipIcon} width="2em" height="1em" />
+		<Icon icon={paperclipIcon} width="1em" height="2em" />
+	</div>
+	<div>
+		<p>Slice:</p>
+		<Icon icon={paperclipIcon} width="2em" height="1em" slice={true} />
+		<Icon icon={paperclipIcon} width="2em" height="1em" align="slice" />
+	</div>
+	<div>
+		<p>Slice:</p>
+		<Icon icon={paperclipIcon} width="1em" height="2em" slice={true} />
+		<Icon icon={paperclipIcon} width="1em" height="2em" align="slice" />
+	</div>
+	<div>
+		<p>Left:</p>
+		<Icon icon={paperclipIcon} width="2em" height="1em" hAlign="left" />
+		<Icon icon={paperclipIcon} width="2em" height="1em" align="left" />
+	</div>
+	<div>
+		<p>Left with slice:</p>
+		<Icon
+			icon={paperclipIcon}
+			width="1em"
+			height="2em"
+			hAlign="left"
+			slice={true} />
+		<Icon
+			icon={paperclipIcon}
+			width="1em"
+			height="2em"
+			align="left"
+			slice={true} />
+		<Icon icon={paperclipIcon} width="1em" height="2em" align="left,slice" />
+	</div>
+	<div>
+		<p>Right:</p>
+		<Icon icon={paperclipIcon} width="2em" height="1em" hAlign="right" />
+		<Icon icon={paperclipIcon} width="2em" height="1em" align="right" />
+	</div>
+	<div>
+		<p>Right with slice:</p>
+		<Icon
+			icon={paperclipIcon}
+			width="1em"
+			height="2em"
+			hAlign="right"
+			slice={true} />
+		<Icon
+			icon={paperclipIcon}
+			width="1em"
+			height="2em"
+			align="right"
+			slice={true} />
+		<Icon icon={paperclipIcon} width="1em" height="2em" align="right,slice" />
+	</div>
+	<div>
+		<p>Top:</p>
+		<Icon icon={paperclipIcon} width="1em" height="2em" vAlign="top" />
+		<Icon icon={paperclipIcon} width="1em" height="2em" align="top" />
+	</div>
+	<div>
+		<p>Top with slice:</p>
+		<Icon
+			icon={paperclipIcon}
+			width="2em"
+			height="1em"
+			vAlign="top"
+			slice={true} />
+		<Icon
+			icon={paperclipIcon}
+			width="2em"
+			height="1em"
+			align="top"
+			slice={true} />
+		<Icon icon={paperclipIcon} width="2em" height="1em" align="top,slice" />
+	</div>
+	<div>
+		<p>Bottom:</p>
+		<Icon icon={paperclipIcon} width="1em" height="2em" vAlign="bottom" />
+		<Icon icon={paperclipIcon} width="1em" height="2em" align="bottom" />
+	</div>
+	<div>
+		<p>Bottom with slice:</p>
+		<Icon
+			icon={paperclipIcon}
+			width="2em"
+			height="1em"
+			vAlign="bottom"
+			slice={true} />
+		<Icon
+			icon={paperclipIcon}
+			width="2em"
+			height="1em"
+			align="bottom"
+			slice={true} />
+		<Icon icon={paperclipIcon} width="2em" height="1em" align="bottom,slice" />
+	</div>
+</section>
--- a/packages/svelte-demo/src/components/ColorStyle.svelte
+++ b/packages/svelte-demo/src/components/ColorStyle.svelte
@ -0,0 +1,30 @@
+<script>
+	import Icon from '@iconify/svelte';
+	import adminUsers from '@iconify/icons-dashicons/admin-users';
+
+	let icon1Style = 'color: purple; vertical-align: 0; font-size: 2em;';
+</script>
+
+<section>
+	<h1>Color and style (components/ColorStyle.svelte)</h1>
+	<div>
+		Icon with color (red):
+		<Icon icon={adminUsers} color="red" inline={true} />
+	</div>
+	<div>
+		Icon size (2em):
+		<Icon icon={adminUsers} height="2em" inline={true} />
+	</div>
+	<div>
+		Icon style as string (red):
+		<Icon icon={adminUsers} style="color: red;" />
+	</div>
+	<div>
+		Inline icon with vertical-align style as string (aligned to top):
+		<Icon icon={adminUsers} style="vertical-align: .25em;" inline={true} />
+	</div>
+	<div>
+		Inline icon with variable style (purple, 2em, no alignment):
+		<Icon icon={adminUsers} style={icon1Style} inline={true} color="green" />
+	</div>
+</section>
--- a/packages/svelte-demo/src/components/Inline.svelte
+++ b/packages/svelte-demo/src/components/Inline.svelte
@ -0,0 +1,64 @@
+<script>
+	import Icon from '@iconify/svelte';
+
+	const demoIcon = {
+		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"/>',
+	};
+</script>
+
+<style>
+	section :global(svg) {
+		color: #06a;
+		margin-right: 8px;
+		/* box-shadow: 0 0 0 1px #06a inset; */
+		position: relative;
+		z-index: 2;
+		background: #fff;
+	}
+	div {
+		position: relative;
+		font-size: 16px;
+		line-height: 1.5;
+		font-family: Helvetica, Arial, sans-serif;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+	div:before,
+	div:after {
+		content: '';
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 0;
+		border-top: 1px dashed #506874;
+		opacity: 0.5;
+		z-index: -1;
+	}
+	div:before {
+		bottom: 5px;
+	}
+	div:after {
+		bottom: 7px;
+		border-top-color: #ba3329;
+	}
+</style>
+
+<section>
+	<h1>Inline (components/Inline.svelte)</h1>
+	<div>
+		Block icon (behaving like image):
+		<Icon icon={demoIcon} />
+	</div>
+	<div>
+		Inline icon (behaving line text / icon font):
+		<Icon icon={demoIcon} inline={true} />
+	</div>
+	<div>
+		Using "vertical-align: 0" to override inline attribute:
+		<Icon icon={demoIcon} style="vertical-align: 0" />
+		<Icon icon={demoIcon} style="vertical-align: 0;" inline={true} />
+	</div>
+</section>
--- a/packages/svelte-demo/src/components/Sample.svelte
+++ b/packages/svelte-demo/src/components/Sample.svelte
@ -0,0 +1,6 @@
+<script>
+	import Icon from '@iconify/svelte';
+	import adminCustomizer from '@iconify/icons-dashicons/admin-customizer';
+</script>
+
+<Icon icon={adminCustomizer} height="20" style="color: green;" />
--- a/packages/svelte-demo/src/components/Style.svelte
+++ b/packages/svelte-demo/src/components/Style.svelte
@ -0,0 +1,47 @@
+<script>
+	import Icon from '@iconify/svelte';
+	import paperclipIcon from '@iconify/icons-dashicons/paperclip';
+
+	const redIcon = 'color: red;';
+	const bigIcon = 'font-size: 40px;';
+</script>
+
+<style>
+	/* using :global because class name passed to a child component cannot be targeted in Svelte */
+	section :global(.red-icon) {
+		color: red;
+	}
+	section :global(.big-icon) {
+		font-size: 40px;
+	}
+</style>
+
+<section>
+	<h1>Style (components/Style.svelte)</h1>
+	<div>
+		Default icon:
+		<Icon icon={paperclipIcon} />
+	</div>
+	<div>
+		Red color:
+		<Icon icon={paperclipIcon} color="red" />
+		<Icon icon={paperclipIcon} style="color: red" />
+		<Icon icon={paperclipIcon} style={redIcon} />
+		<Icon icon={paperclipIcon} class="red-icon" />
+	</div>
+	<div>
+		40px:
+		<Icon icon={paperclipIcon} height="40" />
+		<Icon icon={paperclipIcon} width={40} />
+		<Icon icon={paperclipIcon} style="font-size: 40px;" />
+		<Icon icon={paperclipIcon} style={bigIcon} />
+		<Icon icon={paperclipIcon} class="big-icon" />
+	</div>
+	<div>
+		Red and 40px:
+		<Icon icon={paperclipIcon} color="red" width="40" />
+		<Icon icon={paperclipIcon} style="color: red" height={40} />
+		<Icon icon={paperclipIcon} style={redIcon + bigIcon} />
+		<Icon icon={paperclipIcon} class="red-icon big-icon" />
+	</div>
+</section>
--- a/packages/svelte-demo/src/components/Transformations.svelte
+++ b/packages/svelte-demo/src/components/Transformations.svelte
@ -0,0 +1,52 @@
+<script>
+	import Icon from '@iconify/svelte';
+	import paperclipIcon from '@iconify/icons-dashicons/paperclip';
+</script>
+
+<style>
+	section :global(svg) {
+		font-size: 20px;
+		line-height: 1em;
+	}
+</style>
+
+<section>
+	<h1>Transformations (components/Transformations.svelte)</h1>
+	<div>
+		Default icon:
+		<Icon icon={paperclipIcon} />
+	</div>
+	<div>
+		Flip horizontally:
+		<Icon icon={paperclipIcon} hFlip={true} />
+		<Icon icon={paperclipIcon} flip="horizontal" />
+	</div>
+	<div>
+		Flip vertically:
+		<Icon icon={paperclipIcon} vFlip={true} />
+		<Icon icon={paperclipIcon} flip="vertical" />
+	</div>
+	<div>
+		Flip horizontally and vertically:
+		<Icon icon={paperclipIcon} hFlip={true} vFlip={true} />
+		<Icon icon={paperclipIcon} flip="horizontal,vertical" />
+	</div>
+	<div>
+		90&deg; rotation:
+		<Icon icon={paperclipIcon} rotate={1} />
+		<Icon icon={paperclipIcon} rotate="90deg" />
+		<Icon icon={paperclipIcon} rotate="25%" />
+	</div>
+	<div>
+		180&deg; rotation:
+		<Icon icon={paperclipIcon} rotate={2} />
+		<Icon icon={paperclipIcon} rotate="180deg" />
+		<Icon icon={paperclipIcon} rotate="50%" />
+	</div>
+	<div>
+		270&deg; rotation:
+		<Icon icon={paperclipIcon} rotate={3} />
+		<Icon icon={paperclipIcon} rotate="270deg" />
+		<Icon icon={paperclipIcon} rotate="-25%" />
+	</div>
+</section>
--- a/packages/svelte-demo/src/main.js
+++ b/packages/svelte-demo/src/main.js
@ -0,0 +1,7 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body,
+});
+
+export default app;
--- a/packages/svelte/.gitignore
+++ b/packages/svelte/.gitignore
@ -0,0 +1,4 @@
+.DS_Store
+node_modules
+dist
+lib
--- a/packages/svelte/.npmignore
+++ b/packages/svelte/.npmignore
@ -0,0 +1,4 @@
+.DS_Store
+rollup.config.js
+node_modules
+src
--- a/packages/svelte/README.md
+++ b/packages/svelte/README.md
@ -0,0 +1,449 @@
+# Iconify for Svelte
+
+Iconify for Svelte is not yet another icon component! There are many of them already.
+
+Iconify is the most versatile icon framework.
+
+-   Unified icon framework that can be used with any icon library.
+-   Out of the box includes 60+ icon sets with 50,000 icons.
+-   Embed icons in HTML with SVG framework or components for front-end frameworks.
+-   Embed icons in designs with plug-ins for Figma, Sketch and Adobe XD.
+-   Add icon search to your applications with Iconify Icon Finder.
+
+For more information visit [https://iconify.design/](https://iconify.design/).
+
+Iconify for Svelte is a part of Iconify framework that makes it easy to use many icon libraries with Svelte.
+
+Iconify for Svelte features:
+
+-   Easy to use.
+-   Bundles only icons that you need.
+-   Change icon size and colour by changing font size and colour.
+-   Renders pixel-perfect SVG.
+
+## Installation
+
+If you are using NPM:
+
+```bash
+npm install --save-dev @iconify/svelte
+```
+
+If you are using Yarn:
+
+```bash
+yarn add --dev @iconify/svelte
+```
+
+This package does not include icons. Icons are split into separate packages that available at NPM. See below.
+
+## 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:
+
+```js
+import IconifyIcon from '@iconify/svelte';
+import home from '@iconify/icons-mdi/home';
+import faceWithMonocle from '@iconify/icons-twemoji/face-with-monocle';
+```
+
+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 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.
+
+The icon component has the following optional attributes:
+
+-   `inline`. Changes icon behaviour to match icon fonts. See "Inline icon" section below.
+-   `width` and `height`. Icon dimensions. The default values are "1em" for both. See "Dimensions" section below.
+-   `color`. Icon colour. This is the same as setting colour in style. See "Icon colour" section below.
+-   `flip`, `hFlip`, `vFlip`. Flip icon horizontally and/or vertically. See "Transformations" section below.
+-   `rotate`. Rotate icon by 90, 180 or 270 degrees. See "Transformations" section below.
+-   `align`, `vAlign`, `hAlign`, `slice`. Icon alignment. See "Alignment" section below.
+
+### Other attributes and events
+
+In addition to the attributes mentioned above, the icon component accepts any other attributes. All other attributes will be passed to generated `SVG` element, so you can do stuff like setting the inline style, add title and so on.
+
+In Svelte it is not possible to pass events to child components, so Icon component does not handle any events. If you need to make icon clickable, wrap it in a button or link and assign an event to that button or link.
+
+### Dimensions
+
+By default, icon height is "1em". With is dynamic, calculated using the icon's width to height ratio.
+
+There are several ways to change icon dimensions:
+
+-   Setting `font-size` in style.
+-   Setting `width` and/or `height` attribute.
+
+Values for `width` and `height` can be numbers or strings.
+
+If you set only one dimension, another dimension will be calculated using the icon's width to height ratio. For example, if the icon size is 16 x 24, you set the height to 48, the width will be set to 32. Calculations work not only with numbers, but also with string values.
+
+#### Dimensions as numbers
+
+You can use numbers for `width` and `height`.
+
+```jsx
+<IconifyIcon icon={homeIcon} height={24} />
+```
+
+```jsx
+<IconifyIcon icon={homeIcon} width={16} height={16} />
+```
+
+Number values are treated as pixels. That means in examples above, values are identical to "24px" and "16px".
+
+#### Dimensions as strings without units
+
+If you use strings without units, they are treated the same as numbers in an example above.
+
+```jsx
+<IconifyIcon icon={homeIcon} height="24" />
+```
+
+#### Dimensions as strings with units
+
+You can use units in width and height values:
+
+```jsx
+<IconifyIcon icon={homeIcon} height="2em" />
+```
+
+Be careful when using `calc`, view port based units or percentages. In SVG element they might not behave the way you expect them to behave and when using such units, you should consider settings both width and height.
+
+#### Dimensions as 'auto'
+
+Keyword "auto" sets dimensions to the icon's `viewBox` dimensions. For example, for 24 x 24 icon using `height="auto"` sets height to 24 pixels.
+
+```jsx
+<IconifyIcon icon={homeIcon} height="auto" />
+```
+
+### Icon colour
+
+There are two types of icons: icons that do not have a palette and icons that do have a palette.
+
+Icons that do have a palette, such as emojis, cannot be customised. Setting colour to such icons will not change anything.
+
+Icons that do not have a palette can be customised. By default, colour is set to "currentColor", which means the icon's colour matches text colour. To change the colour you can:
+
+-   Set `color` style or use stylesheet to target icon. If you are using the stylesheet, target `svg` element. If you are using scoped style, use `:global(svg)` to target `svg` element.
+-   Add `color` attribute.
+
+Examples:
+
+Using `color` attribute:
+
+```jsx
+<IconifyIcon icon={alertIcon} color="red" />
+<IconifyIcon icon={alertIcon} color="#f00" />
+```
+
+Using inline style:
+
+```jsx
+<Icon icon={alertIcon} style="color: red;" />
+<Icon icon={alertIcon} style="color: #f00;" />
+```
+
+Using stylesheet:
+
+```jsx
+<Icon icon={alertIcon} class="red-icon" />
+```
+
+```css
+.red-icon {
+	color: red;
+}
+```
+
+Using Svelte scoped style:
+
+```jsx
+<script>
+import IconifyIcon from '@iconify/svelte';
+import alertIcon from '@iconify/icons-mdi/alert';
+</script>
+
+<style>
+	div :global(.red-icon) {
+		color: red;
+	}
+</style>
+
+<div>
+    <IconifyIcon icon={alertIcon} class="red-icon" />
+</div>
+```
+
+### Transformations
+
+You can rotate and flip the icon.
+
+This might seem redundant because icon can also be rotated and flipped using CSS transformations. So why do transformation attributes exist? Because it is a different type of transformation.
+
+-   CSS transformations transform the entire icon.
+-   Icon transformations transform the contents of the icon.
+
+If you have a square icon, this makes no difference. However, if you have an icon that has different width and height values, it makes a huge difference.
+
+Rotating 16x24 icon by 90 degrees results in:
+
+-   CSS transformation keeps 16x24 bounding box, which might cause the icon to overlap text around it.
+-   Icon transformation changes bounding box to 24x16, rotating content inside an icon.
+
+_TODO: show visual example_
+
+#### Flipping an icon
+
+There are several attributes available to flip an icon:
+
+-   `hFlip`: boolean attribute, flips icon horizontally.
+-   `vFlip`: boolean attribute, flips icon vertically.
+-   `flip`: shorthand string attribute, can flip icon horizontally and/or vertically.
+
+Examples:
+
+Flip an icon horizontally:
+
+```jsx
+<IconifyIcon icon={alertIcon} hFlip={true} />
+<IconifyIcon icon={alertIcon} flip="horizontal" />
+```
+
+Flip an icon vertically:
+
+```jsx
+<IconifyIcon icon={alertIcon} vFlip={true} />
+<IconifyIcon icon={alertIcon} 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" />
+```
+
+#### Rotating an icon
+
+An icon can be rotated by 90, 180 and 270 degrees. Only contents of the icon are rotated.
+
+To rotate an icon, use `rotate` attribute. Value can be a string (degrees or percentages) or a number.
+
+Number values are 1 for 90 degrees, 2 for 180 degrees, 3 for 270 degrees.
+
+Examples of 90 degrees rotation:
+
+```jsx
+<IconifyIcon icon={alertIcon} rotate={1} />
+<IconifyIcon icon={alertIcon} rotate="90deg" />
+<IconifyIcon icon={alertIcon} rotate="25%" />
+```
+
+### Alignment
+
+Alignment matters only if you set the icon's width and height attributes that do not match the viewBox with and height.
+
+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.
+
+#### Stretching SVG
+
+When you use incorrect width/height ratio for other images, browser stretches those images.
+
+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.
+
+![Stretching image and SVG](https://iconify.design/assets/images/align-img.svg)
+
+#### 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:
+
+![SVG alignment](https://iconify.design/assets/images/align-meet.svg)
+
+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:
+
+![SVG alignment](https://iconify.design/assets/images/align-slice.svg)
+
+### 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:
+
+![Inline icon](https://iconify.design/assets/images/inline.png)
+
+## 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 "Svelte" tab that will give you exact code for the Svelte component.
+
+Import format for each icon is "@iconify/icon-{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:
+
+```jsx
+<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.
+
+## License
+
+Svelte component is released with MIT license.
+
+© 2020 Vjacheslav Trushkin
+
+See [Iconify icon sets page](https://iconify.design/icon-sets/) for list of collections and their licenses.
--- a/packages/svelte/license.txt
+++ b/packages/svelte/license.txt
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Vjacheslav Trushkin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/packages/svelte/package-lock.json
+++ b/packages/svelte/package-lock.json
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@ -0,0 +1,31 @@
+{
+	"name": "@iconify/svelte",
+	"description": "Iconify icon component for Svelte.",
+	"author": "Vjacheslav Trushkin",
+	"version": "1.0.0-beta.0",
+	"license": "MIT",
+	"bugs": "https://github.com/iconify/iconify/issues",
+	"homepage": "https://github.com/iconify/iconify",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/iconify/iconify.git",
+		"directory": "packages/svelte"
+	},
+	"svelte": "src/index.js",
+	"module": "dist/index.mjs",
+	"main": "dist/index.js",
+	"scripts": {
+		"build": "rollup -c"
+	},
+	"dependencies": {
+		"@iconify/core": "^1.0.0-beta.0",
+		"@iconify/types": "^1.0.2"
+	},
+	"devDependencies": {
+		"@rollup/plugin-commonjs": "^11.1.0",
+		"@rollup/plugin-node-resolve": "^7.1.3",
+		"rollup": "^2.7.3",
+		"rollup-plugin-svelte": "^5.2.1",
+		"svelte": "^3.21.0"
+	}
+}
--- a/packages/svelte/rollup.config.js
+++ b/packages/svelte/rollup.config.js
@ -0,0 +1,18 @@
+import svelte from 'rollup-plugin-svelte';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import pkg from './package.json';
+
+const name = pkg.name
+	.replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
+	.replace(/^\w/, (m) => m.toUpperCase())
+	.replace(/-\w/g, (m) => m[1].toUpperCase());
+
+export default {
+	input: 'src/index.js',
+	output: [
+		{ file: pkg.module, format: 'es' },
+		{ file: pkg.main, format: 'umd', name },
+	],
+	plugins: [svelte(), resolve(), commonjs()],
+};
--- a/packages/svelte/src/Icon.svelte
+++ b/packages/svelte/src/Icon.svelte
@ -0,0 +1,125 @@
+<script context="module">
+	import { defaults } from '@iconify/core/lib/customisations';
+	import {
+		flipFromString,
+		alignmentFromString,
+	} from '@iconify/core/lib/customisations/shorthand';
+	import { rotateFromString } from '@iconify/core/lib/customisations/rotate';
+	import { fullIcon } from '@iconify/core/lib/icon';
+	import { iconToSVG } from '@iconify/core/lib/builder';
+	import { replaceIDs } from '@iconify/core/lib/builder/ids';
+	import { merge } from '@iconify/core/lib/misc/merge';
+
+	/**
+	 * Default SVG attributes
+	 */
+	const svgDefaults = {
+		'xmlns': 'http://www.w3.org/2000/svg',
+		'xmlns:xlink': 'http://www.w3.org/1999/xlink',
+		'aria-hidden': true,
+		'focusable': false,
+		'role': 'img',
+	};
+</script>
+
+<script>
+	// Generated data
+	let data;
+
+	// Generate icon
+	function generateIcon(props) {
+		let iconData = fullIcon(props.icon);
+		if (!iconData) {
+			return {
+				attributes: svgDefaults,
+				body: '',
+			};
+		}
+
+		const customisations = merge(defaults, props);
+		const componentProps = merge(svgDefaults);
+
+		// Create style if missing
+		let style = typeof props.style === 'string' ? props.style : '';
+
+		// Get element properties
+		for (let key in props) {
+			const value = props[key];
+			switch (key) {
+				// Properties to ignore
+				case 'icon':
+				case 'style':
+					break;
+
+				// Flip as string: 'horizontal,vertical'
+				case 'flip':
+					flipFromString(customisations, value);
+					break;
+
+				// Alignment as string
+				case 'align':
+					alignmentFromString(customisations, value);
+					break;
+
+				// Color: copy to style
+				case 'color':
+					style = 'color: ' + value + '; ' + style;
+					break;
+
+				// Rotation as string
+				case 'rotate':
+					if (typeof value !== 'number') {
+						customisations[key] = rotateFromString(value);
+					} else {
+						componentProps[key] = value;
+					}
+					break;
+
+				// Remove aria-hidden
+				case 'ariaHidden':
+				case 'aria-hidden':
+					if (value !== true && value !== 'true') {
+						delete componentProps['aria-hidden'];
+					}
+					break;
+
+				// Copy missing property if it does not exist in customisations
+				default:
+					if (defaults[key] === void 0) {
+						componentProps[key] = value;
+					}
+			}
+		}
+
+		// Generate icon
+		const item = iconToSVG(iconData, customisations);
+
+		// Add icon stuff
+		for (let key in item.attributes) {
+			componentProps[key] = item.attributes[key];
+		}
+
+		if (item.inline) {
+			style = 'vertical-align: -0.125em; ' + style;
+		}
+
+		// Style
+		if (style !== '') {
+			componentProps.style = style;
+		}
+
+		// Generate HTML
+		return {
+			attributes: componentProps,
+			body: replaceIDs(item.body),
+		};
+	}
+
+	$: {
+		data = generateIcon($$props);
+	}
+</script>
+
+<svg {...data.attributes}>
+	{@html data.body}
+</svg>
--- a/packages/svelte/src/index.js
+++ b/packages/svelte/src/index.js
@ -0,0 +1 @@
+export { default } from './Icon.svelte';
--- a/packages/vue-demo/src/components/VueAttributes.vue
+++ b/packages/vue-demo/src/components/VueAttributes.vue
@ -3,7 +3,7 @@
 		<h1>Vue attributes (components/VueAttributes.vue)</h1>
 		<div>
 			Icon with color (red):
-			<iconify-icon :icon="icon" color="red" inline="true" />
+			<iconify-icon :icon="icon" color="red" :inline="true" />
 		</div>
 		<div>
 			Icon size (2em):
@ -15,36 +15,22 @@
 		</div>
 		<div>
 			Inline icon with vertical-align style as string (aligned to top):
-			<IconifyIcon
-				icon="admin-users"
-				style="vertical-align: .25em;"
-				inline="true"
-			/>
+			<IconifyIcon icon="admin-users" style="vertical-align: .25em;" :inline="true" />
 		</div>
 		<div>
-			Inline icon with bound style as object (green, 2em, no alignment):
-			<IconifyIcon
-				icon="admin-users"
-				v-bind:style="icon1StyleObj"
-				inline="true"
-				color="green"
-			/>
+			Inline icon with bound style as object (purple, 2em, no alignment):
+			<IconifyIcon icon="admin-users" v-bind:style="icon1StyleObj" :inline="true" color="green" />
 		</div>
 		<div>
-			Inline icon with bound style as string (green, 2em, no alignment):
-			<IconifyIcon
-				icon="admin-users"
-				v-bind:style="icon1StyleStr"
-				inline="true"
-				color="green"
-			/>
+			Inline icon with bound style as string (purple, 2em, no alignment):
+			<IconifyIcon icon="admin-users" v-bind:style="icon1StyleStr" :inline="true" color="green" />
 		</div>
 		<div>
 			Combined styles (green, 2em, shadow):
 			<IconifyIcon
 				icon="admin-users"
 				v-bind:style="[boxShadowStyleObj, fontSizeStyleObj2]"
-				inline="true"
+				:inline="true"
 				color="green"
 			/>
 		</div>
@ -53,7 +39,7 @@
 			<IconifyIcon
 				icon="admin-users"
 				v-bind:style="[boxShadowStyleObj, dynamicStyleObj]"
-				inline="true"
+				:inline="true"
 				v-on:click="
 					dynamicStyleObj.color =
 						dynamicStyleObj.color === 'red' ? 'green' : 'red'
@ -67,17 +53,13 @@
 				v-bind:style="[
 					showShadow ? boxShadowStyleObj : dynamicStyleObj,
 				]"
-				inline="true"
+				:inline="true"
 				v-on:click="showShadow = !showShadow"
 			/>&nbsp;(click it!)
 		</div>
 		<div>
 			Reference:
-			<IconifyIcon
-				icon="admin-users"
-				ref="icon1"
-				@click="logReference"
-			/>&nbsp;(click to log)
+			<IconifyIcon icon="admin-users" ref="icon1" @click="logReference" />&nbsp;(click to log)
 		</div>
 	</section>
 </template>
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@ -180,7 +180,7 @@ After installing the icon component, you no longer need to list `IconifyIcon` in

 ## Icon component properties

-`icon` property is mandatory. It tells component what icon to render. If the property value is invalid, the component will render an empty icon. Value can be a string containing the icon name (icon must be registered before use by calling `addIcon`, see instructions above) or an object containing the icon data.
+`icon` property is mandatory. It tells component what icon to render. If the property value is invalid, the component will render an empty icon. The value can be a string containing the icon name (icon must be registered before use by calling `addIcon`, see instructions above) or an object containing the icon data.

 The icon component has the following optional properties:

@ -635,7 +635,7 @@ There are over 60 icon sets. This readme shows only a few examples. See [Iconify

 ## License

-React component is released with MIT license.
+Vue component is released with MIT license.

 © 2020 Vjacheslav Trushkin