agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-11-09 23:00:56 +00:00
Code Issues Releases Activity

Svelte component with API support

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2021-05-01 23:38:56 +03:00
parent ce4385fb4f
commit e9dc3803e4
33 changed files with 1845 additions and 486 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -58,7 +58,7 @@ There are several Iconify implementations included in this repository:
| [SVG Framework](./packages/iconify/) | HTML | + | + | | [SVG Framework](./packages/iconify/) | HTML | + | + |
| [React component](./packages/react/) | React | + | + | | [React component](./packages/react/) | React | + | + |
| [Vue component](./packages/vue/) | Vue | - | + | | [Vue component](./packages/vue/) | Vue | - | + |
| [Svelte component](./packages/svelte/) | Svelte/Sapper | - | + | | [Svelte component](./packages/svelte/) | Svelte/Sapper | + | + |
Other packages: Other packages:

459
packages/svelte-demo/package-lock.json generated
View File

@ -11,8 +11,8 @@
"sirv-cli": "^1.0.8" "sirv-cli": "^1.0.8"
}, },
"devDependencies": { "devDependencies": {
"@iconify-icons/bx": "^1.0.2", "@iconify-icons/mdi-light": "^1.1.0",
"@iconify-icons/dashicons": "^1.0.0", "@iconify-icons/uil": "^1.1.1",
"@iconify/svelte": "^1.0.3", "@iconify/svelte": "^1.0.3",
"@rollup/plugin-commonjs": "^16.0.0", "@rollup/plugin-commonjs": "^16.0.0",
"@rollup/plugin-node-resolve": "^10.0.0", "@rollup/plugin-node-resolve": "^10.0.0",
@ -24,79 +24,53 @@
} }
}, },
"node_modules/@babel/code-frame": { "node_modules/@babel/code-frame": {
"version": "7.10.4", "version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
"integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==", "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/highlight": "^7.10.4" "@babel/highlight": "^7.12.13"
} }
}, },
"node_modules/@babel/helper-validator-identifier": { "node_modules/@babel/helper-validator-identifier": {
"version": "7.10.4", "version": "7.14.0",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
"integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==", "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==",
"dev": true "dev": true
}, },
"node_modules/@babel/highlight": { "node_modules/@babel/highlight": {
"version": "7.10.4", "version": "7.14.0",
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz",
"integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==", "integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/helper-validator-identifier": "^7.10.4", "@babel/helper-validator-identifier": "^7.14.0",
"chalk": "^2.0.0", "chalk": "^2.0.0",
"js-tokens": "^4.0.0" "js-tokens": "^4.0.0"
} }
}, },
"node_modules/@cyberalien/redundancy": { "node_modules/@iconify-icons/mdi-light": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/@cyberalien/redundancy/-/redundancy-1.1.0.tgz", "resolved": "https://registry.npmjs.org/@iconify-icons/mdi-light/-/mdi-light-1.1.0.tgz",
"integrity": "sha512-+ZvuwtVXzyxX1CWnP+X5XgDelseU9KSYgmPu3/DSraR7Qyi/vLZwuRRX0sYO24M/gZaChNXRBEK6RHRe3uBndw==", "integrity": "sha512-pV69tNZO9u0qZFVcy5VFmg7dL+Yq3g8DrkCIMGnW3ukgcYDZG2M2oAKeIxHUCIE/11khAsYlBdrUFglTIcbDxg==",
"dev": true "dev": true
}, },
"node_modules/@iconify-icons/bx": { "node_modules/@iconify-icons/uil": {
"version": "1.1.0", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/@iconify-icons/bx/-/bx-1.1.0.tgz", "resolved": "https://registry.npmjs.org/@iconify-icons/uil/-/uil-1.1.1.tgz",
"integrity": "sha512-JlCsrgpp4vujb7tDaZtJ/OfeTnsSFyDFSauNO+2ilsHviCb/u3VXbLjdIoDIR5ISGMr0a+W/f0YNOHn3zUqChA==", "integrity": "sha512-HdSyOZzEPwh2549jpL2YrLkuR4aYRRF47gDRuZcSRRFdgbkmlpGDSSQ1G1PR9E/a3Igg7j9XdIK9HffTFJP0Lg==",
"dev": true "dev": true
}, },
"node_modules/@iconify-icons/dashicons": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@iconify-icons/dashicons/-/dashicons-1.1.0.tgz",
"integrity": "sha512-l539ceihPtCEm+v5JQjDjkRZ5ULPRJLA1OhSePuqTrBWkWx+H6asXkpM4hOB0cR59ynelsK9htSmrPij/JHnRg==",
"dev": true
},
"node_modules/@iconify/core": {
"version": "1.0.0-rc.3",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-rc.3.tgz",
"integrity": "sha512-gCHmASaQbai749xrvvBpJ7eVrnJusLA2Q+aULMGAZkIrU/YRUiXznpfNITozZaIhdOLjzp8CD8s/j2vv5CyNCg==",
"dev": true,
"dependencies": {
"@cyberalien/redundancy": "^1.1.0",
"@iconify/types": "^1.0.5"
}
},
"node_modules/@iconify/svelte": { "node_modules/@iconify/svelte": {
"version": "1.0.3", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-1.0.3.tgz", "resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-1.0.4.tgz",
"integrity": "sha512-Exjwm+LDOmueoVRd8hyG7s+8Q/jTh3tFOaaHTy/TCI2/OTkZe02fkHAUeNtlwnr867X6h3dC2ZIt0Ie4epaGhg==", "integrity": "sha512-Bjr4UMJUsMCra1lpMYIijLZJustalA7FuBldV9B7IsaeKGZ06rcmgeVUYJqrKJ/0bhRg/chcKasLjUlFqWIoMQ==",
"dev": true,
"dependencies": {
"@iconify/core": "^1.0.0-rc.2",
"@iconify/types": "^1.0.5"
}
},
"node_modules/@iconify/types": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.0.6.tgz",
"integrity": "sha512-eG74WPaqjBGnZ3Xy36X4LRDA/ZlhCK6T0zbsAAIYObY2Qija/379iXx+e2wWwEIXS46B62nGaUcuI0MpUnTSrg==",
"dev": true "dev": true
}, },
"node_modules/@polka/url": { "node_modules/@polka/url": {
"version": "1.0.0-next.11", "version": "1.0.0-next.12",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.11.tgz", "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.12.tgz",
"integrity": "sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA==" "integrity": "sha512-6RglhutqrGFMO1MNUXp95RBuYIuc8wTnMAV5MUhLmjTOy78ncwOw7RgeQ/HeymkKXRhZd0s2DNrM1rL7unk3MQ=="
}, },
"node_modules/@rollup/plugin-commonjs": { "node_modules/@rollup/plugin-commonjs": {
"version": "16.0.0", "version": "16.0.0",
@ -169,9 +143,9 @@
"dev": true "dev": true
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "14.14.13", "version": "15.0.1",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.13.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-15.0.1.tgz",
"integrity": "sha512-vbxr0VZ8exFMMAjCW8rJwaya0dMCDyYW2ZRdTyjtrCvJoENMpdUHOT/eTzvgyA5ZnqRZ/sI0NwqAxNHKYokLJQ==", "integrity": "sha512-TMkXt0Ck1y0KKsGr9gJtWGjttxlZnnvDtphxUOSd0bfaR6Q1jle+sPvrzNR1urqYTWMinoKvjKfXUGsumaO1PA==",
"dev": true "dev": true
}, },
"node_modules/@types/resolve": { "node_modules/@types/resolve": {
@ -196,9 +170,9 @@
} }
}, },
"node_modules/anymatch": { "node_modules/anymatch": {
"version": "3.1.1", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
"integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==", "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"normalize-path": "^3.0.0", "normalize-path": "^3.0.0",
@ -208,22 +182,16 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/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
},
"node_modules/balanced-match": { "node_modules/balanced-match": {
"version": "1.0.0", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true "dev": true
}, },
"node_modules/binary-extensions": { "node_modules/binary-extensions": {
"version": "2.1.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
"integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": ">=8" "node": ">=8"
@ -258,12 +226,15 @@
"dev": true "dev": true
}, },
"node_modules/builtin-modules": { "node_modules/builtin-modules": {
"version": "3.1.0", "version": "3.2.0",
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz", "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz",
"integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==", "integrity": "sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": ">=6" "node": ">=6"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/chalk": { "node_modules/chalk": {
@ -281,14 +252,13 @@
} }
}, },
"node_modules/chokidar": { "node_modules/chokidar": {
"version": "3.4.3", "version": "3.5.1",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
"integrity": "sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==", "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"anymatch": "~3.1.1", "anymatch": "~3.1.1",
"braces": "~3.0.2", "braces": "~3.0.2",
"fsevents": "~2.1.2",
"glob-parent": "~5.1.0", "glob-parent": "~5.1.0",
"is-binary-path": "~2.1.0", "is-binary-path": "~2.1.0",
"is-glob": "~4.0.1", "is-glob": "~4.0.1",
@ -299,7 +269,7 @@
"node": ">= 8.10.0" "node": ">= 8.10.0"
}, },
"optionalDependencies": { "optionalDependencies": {
"fsevents": "~2.1.2" "fsevents": "~2.3.1"
} }
}, },
"node_modules/color-convert": { "node_modules/color-convert": {
@ -386,9 +356,9 @@
"dev": true "dev": true
}, },
"node_modules/fsevents": { "node_modules/fsevents": {
"version": "2.1.3", "version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
"integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
"dev": true, "dev": true,
"hasInstallScript": true, "hasInstallScript": true,
"optional": true, "optional": true,
@ -434,9 +404,9 @@
} }
}, },
"node_modules/glob-parent": { "node_modules/glob-parent": {
"version": "5.1.1", "version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"is-glob": "^4.0.1" "is-glob": "^4.0.1"
@ -495,9 +465,9 @@
} }
}, },
"node_modules/is-core-module": { "node_modules/is-core-module": {
"version": "2.2.0", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.3.0.tgz",
"integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==", "integrity": "sha512-xSphU2KG9867tsYdLD4RWQ1VqdFl4HTO9Thf3I/3dLEfr0dbPTWKsuCKrgqMljg4nPE+Gq0VCnzT3gr0CyBmsw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"has": "^1.0.3" "has": "^1.0.3"
@ -601,15 +571,15 @@
} }
}, },
"node_modules/livereload": { "node_modules/livereload": {
"version": "0.9.1", "version": "0.9.3",
"resolved": "https://registry.npmjs.org/livereload/-/livereload-0.9.1.tgz", "resolved": "https://registry.npmjs.org/livereload/-/livereload-0.9.3.tgz",
"integrity": "sha512-9g7sua11kkyZNo2hLRCG3LuZZwqexoyEyecSlV8cAsfAVVCZqLzVir6XDqmH0r+Vzgnd5LrdHDMyjtFnJQLAYw==", "integrity": "sha512-q7Z71n3i4X0R9xthAryBdNGVGAO2R5X+/xXpmKeuPMrteg+W2U8VusTKV3YiJbXZwKsOlFlHe+go6uSNjfxrZw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"chokidar": "^3.3.0", "chokidar": "^3.5.0",
"livereload-js": "^3.1.0", "livereload-js": "^3.3.1",
"opts": ">= 1.2.0", "opts": ">= 1.2.0",
"ws": "^6.2.1" "ws": "^7.4.3"
}, },
"bin": { "bin": {
"livereload": "bin/livereload.js" "livereload": "bin/livereload.js"
@ -619,9 +589,9 @@
} }
}, },
"node_modules/livereload-js": { "node_modules/livereload-js": {
"version": "3.3.1", "version": "3.3.2",
"resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-3.3.1.tgz", "resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-3.3.2.tgz",
"integrity": "sha512-CBu1gTEfzVhlOK1WASKAAJ9Qx1fHECTq0SUB67sfxwQssopTyvzqTlgl+c0h9pZ6V+Fzd2rc510ppuNusg9teQ==", "integrity": "sha512-w677WnINxFkuixAoUEXOStewzLYGI76XVag+0JWMMEyjJQKs0ibWZMxkTlB96Lm3EjZ7IeOxVziBEbtxVQqQZA==",
"dev": true "dev": true
}, },
"node_modules/local-access": { "node_modules/local-access": {
@ -648,9 +618,9 @@
"dev": true "dev": true
}, },
"node_modules/mime": { "node_modules/mime": {
"version": "2.4.6", "version": "2.5.2",
"resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz", "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
"integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==", "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==",
"bin": { "bin": {
"mime": "cli.js" "mime": "cli.js"
}, },
@ -718,9 +688,9 @@
"dev": true "dev": true
}, },
"node_modules/picomatch": { "node_modules/picomatch": {
"version": "2.2.2", "version": "2.2.3",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz",
"integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==", "integrity": "sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": ">=8.6" "node": ">=8.6"
@ -757,12 +727,12 @@
"dev": true "dev": true
}, },
"node_modules/resolve": { "node_modules/resolve": {
"version": "1.19.0", "version": "1.20.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
"integrity": "sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==", "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"is-core-module": "^2.1.0", "is-core-module": "^2.2.0",
"path-parse": "^1.0.6" "path-parse": "^1.0.6"
}, },
"funding": { "funding": {
@ -770,13 +740,10 @@
} }
}, },
"node_modules/rollup": { "node_modules/rollup": {
"version": "2.34.2", "version": "2.46.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.34.2.tgz", "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.46.0.tgz",
"integrity": "sha512-mvtQLqu3cNeoctS+kZ09iOPxrc1P1/Bt1z15enuQ5feyKOdM3MJAVFjjsygurDpSWn530xB4AlA83TWIzRstXA==", "integrity": "sha512-qPGoUBNl+Z8uNu0z7pD3WPTABWRbcOwIrO/5ccDJzmrtzn0LVf6Lj91+L5CcWhXl6iWf23FQ6m8Jkl2CmN1O7Q==",
"dev": true, "dev": true,
"dependencies": {
"fsevents": "~2.1.2"
},
"bin": { "bin": {
"rollup": "dist/bin/rollup" "rollup": "dist/bin/rollup"
}, },
@ -784,7 +751,7 @@
"node": ">=10.0.0" "node": ">=10.0.0"
}, },
"optionalDependencies": { "optionalDependencies": {
"fsevents": "~2.1.2" "fsevents": "~2.3.1"
} }
}, },
"node_modules/rollup-plugin-livereload": { "node_modules/rollup-plugin-livereload": {
@ -893,9 +860,9 @@
} }
}, },
"node_modules/sirv": { "node_modules/sirv": {
"version": "1.0.10", "version": "1.0.11",
"resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.10.tgz", "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.11.tgz",
"integrity": "sha512-H5EZCoZaggEUQy8ocKsF7WAToGuZhjJlLvM3XOef46CbdIgbNeQ1p32N1PCuCjkVYwrAVOSMacN6CXXgIzuspg==", "integrity": "sha512-SR36i3/LSWja7AJNRBz4fF/Xjpn7lQFI30tZ434dIy+bitLYSP+ZEenHg36i23V2SGEz+kqjksg0uOGZ5LPiqg==",
"dependencies": { "dependencies": {
"@polka/url": "^1.0.0-next.9", "@polka/url": "^1.0.0-next.9",
"mime": "^2.3.1", "mime": "^2.3.1",
@ -906,9 +873,9 @@
} }
}, },
"node_modules/sirv-cli": { "node_modules/sirv-cli": {
"version": "1.0.10", "version": "1.0.11",
"resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-1.0.10.tgz", "resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-1.0.11.tgz",
"integrity": "sha512-8mLTRkvzpZXMyUZJ1whf84YHN/mm2r2+j5sU1ZYr5n2jA8VkFItNPk53oysOo+0QxBVp9aUjggkAsQp1d7L3OQ==", "integrity": "sha512-L8NILoRSBd38VcfFcERYCaVCnWPBLo9G6u/a37UJ8Ysv4DfjizMbFBcM+SswNnndJienhR6qy8KFuAEaeL4g8Q==",
"dependencies": { "dependencies": {
"console-clear": "^1.1.0", "console-clear": "^1.1.0",
"get-port": "^3.2.0", "get-port": "^3.2.0",
@ -916,7 +883,7 @@
"local-access": "^1.0.1", "local-access": "^1.0.1",
"sade": "^1.6.0", "sade": "^1.6.0",
"semiver": "^1.0.0", "semiver": "^1.0.0",
"sirv": "^1.0.10", "sirv": "^1.0.11",
"tinydate": "^1.0.0" "tinydate": "^1.0.0"
}, },
"bin": { "bin": {
@ -973,18 +940,18 @@
} }
}, },
"node_modules/svelte": { "node_modules/svelte": {
"version": "3.31.0", "version": "3.38.1",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.31.0.tgz", "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.38.1.tgz",
"integrity": "sha512-r+n8UJkDqoQm1b+3tA3Lh6mHXKpcfOSOuEuIo5gE2W9wQYi64RYX/qE6CZBDDsP/H4M+N426JwY7XGH4xASvGQ==", "integrity": "sha512-N3XLAyfzqrFxwRLevBeW7Dke9ZlHRVGSIed5abo4Drvj+zvd2OyWpFa1x4nQUc8Lnvt4Kcn8/5le1peRDybNqg==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/terser": { "node_modules/terser": {
"version": "5.5.1", "version": "5.7.0",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.5.1.tgz", "resolved": "https://registry.npmjs.org/terser/-/terser-5.7.0.tgz",
"integrity": "sha512-6VGWZNVP2KTUcltUQJ25TtNjx/XgdDsBDKGt8nN0MpydU36LmbPPcMBd2kmtZNNGVVDLg44k7GKeHHj+4zPIBQ==", "integrity": "sha512-HP5/9hp2UaZt5fYkuhNBR8YyRcT8juw8+uFbAme53iN9hblvKnLUTKkmwJG6ocWpIKf8UK4DoeWG4ty0J6S6/g==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"commander": "^2.20.0", "commander": "^2.20.0",
@ -1033,90 +1000,76 @@
"dev": true "dev": true
}, },
"node_modules/ws": { "node_modules/ws": {
"version": "6.2.1", "version": "7.4.5",
"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz",
"integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==", "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==",
"dev": true, "dev": true,
"dependencies": { "engines": {
"async-limiter": "~1.0.0" "node": ">=8.3.0"
},
"peerDependencies": {
"bufferutil": "^4.0.1",
"utf-8-validate": "^5.0.2"
},
"peerDependenciesMeta": {
"bufferutil": {
"optional": true
},
"utf-8-validate": {
"optional": true
}
} }
} }
}, },
"dependencies": { "dependencies": {
"@babel/code-frame": { "@babel/code-frame": {
"version": "7.10.4", "version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
"integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==", "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/highlight": "^7.10.4" "@babel/highlight": "^7.12.13"
} }
}, },
"@babel/helper-validator-identifier": { "@babel/helper-validator-identifier": {
"version": "7.10.4", "version": "7.14.0",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
"integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==", "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==",
"dev": true "dev": true
}, },
"@babel/highlight": { "@babel/highlight": {
"version": "7.10.4", "version": "7.14.0",
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz",
"integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==", "integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/helper-validator-identifier": "^7.10.4", "@babel/helper-validator-identifier": "^7.14.0",
"chalk": "^2.0.0", "chalk": "^2.0.0",
"js-tokens": "^4.0.0" "js-tokens": "^4.0.0"
} }
}, },
"@cyberalien/redundancy": { "@iconify-icons/mdi-light": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/@cyberalien/redundancy/-/redundancy-1.1.0.tgz", "resolved": "https://registry.npmjs.org/@iconify-icons/mdi-light/-/mdi-light-1.1.0.tgz",
"integrity": "sha512-+ZvuwtVXzyxX1CWnP+X5XgDelseU9KSYgmPu3/DSraR7Qyi/vLZwuRRX0sYO24M/gZaChNXRBEK6RHRe3uBndw==", "integrity": "sha512-pV69tNZO9u0qZFVcy5VFmg7dL+Yq3g8DrkCIMGnW3ukgcYDZG2M2oAKeIxHUCIE/11khAsYlBdrUFglTIcbDxg==",
"dev": true "dev": true
}, },
"@iconify-icons/bx": { "@iconify-icons/uil": {
"version": "1.1.0", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/@iconify-icons/bx/-/bx-1.1.0.tgz", "resolved": "https://registry.npmjs.org/@iconify-icons/uil/-/uil-1.1.1.tgz",
"integrity": "sha512-JlCsrgpp4vujb7tDaZtJ/OfeTnsSFyDFSauNO+2ilsHviCb/u3VXbLjdIoDIR5ISGMr0a+W/f0YNOHn3zUqChA==", "integrity": "sha512-HdSyOZzEPwh2549jpL2YrLkuR4aYRRF47gDRuZcSRRFdgbkmlpGDSSQ1G1PR9E/a3Igg7j9XdIK9HffTFJP0Lg==",
"dev": true "dev": true
}, },
"@iconify-icons/dashicons": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@iconify-icons/dashicons/-/dashicons-1.1.0.tgz",
"integrity": "sha512-l539ceihPtCEm+v5JQjDjkRZ5ULPRJLA1OhSePuqTrBWkWx+H6asXkpM4hOB0cR59ynelsK9htSmrPij/JHnRg==",
"dev": true
},
"@iconify/core": {
"version": "1.0.0-rc.3",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-rc.3.tgz",
"integrity": "sha512-gCHmASaQbai749xrvvBpJ7eVrnJusLA2Q+aULMGAZkIrU/YRUiXznpfNITozZaIhdOLjzp8CD8s/j2vv5CyNCg==",
"dev": true,
"requires": {
"@cyberalien/redundancy": "^1.1.0",
"@iconify/types": "^1.0.5"
}
},
"@iconify/svelte": { "@iconify/svelte": {
"version": "1.0.3", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-1.0.3.tgz", "resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-1.0.4.tgz",
"integrity": "sha512-Exjwm+LDOmueoVRd8hyG7s+8Q/jTh3tFOaaHTy/TCI2/OTkZe02fkHAUeNtlwnr867X6h3dC2ZIt0Ie4epaGhg==", "integrity": "sha512-Bjr4UMJUsMCra1lpMYIijLZJustalA7FuBldV9B7IsaeKGZ06rcmgeVUYJqrKJ/0bhRg/chcKasLjUlFqWIoMQ==",
"dev": true,
"requires": {
"@iconify/core": "^1.0.0-rc.2",
"@iconify/types": "^1.0.5"
}
},
"@iconify/types": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.0.6.tgz",
"integrity": "sha512-eG74WPaqjBGnZ3Xy36X4LRDA/ZlhCK6T0zbsAAIYObY2Qija/379iXx+e2wWwEIXS46B62nGaUcuI0MpUnTSrg==",
"dev": true "dev": true
}, },
"@polka/url": { "@polka/url": {
"version": "1.0.0-next.11", "version": "1.0.0-next.12",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.11.tgz", "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.12.tgz",
"integrity": "sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA==" "integrity": "sha512-6RglhutqrGFMO1MNUXp95RBuYIuc8wTnMAV5MUhLmjTOy78ncwOw7RgeQ/HeymkKXRhZd0s2DNrM1rL7unk3MQ=="
}, },
"@rollup/plugin-commonjs": { "@rollup/plugin-commonjs": {
"version": "16.0.0", "version": "16.0.0",
@ -1173,9 +1126,9 @@
"dev": true "dev": true
}, },
"@types/node": { "@types/node": {
"version": "14.14.13", "version": "15.0.1",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.13.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-15.0.1.tgz",
"integrity": "sha512-vbxr0VZ8exFMMAjCW8rJwaya0dMCDyYW2ZRdTyjtrCvJoENMpdUHOT/eTzvgyA5ZnqRZ/sI0NwqAxNHKYokLJQ==", "integrity": "sha512-TMkXt0Ck1y0KKsGr9gJtWGjttxlZnnvDtphxUOSd0bfaR6Q1jle+sPvrzNR1urqYTWMinoKvjKfXUGsumaO1PA==",
"dev": true "dev": true
}, },
"@types/resolve": { "@types/resolve": {
@ -1197,31 +1150,25 @@
} }
}, },
"anymatch": { "anymatch": {
"version": "3.1.1", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
"integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==", "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
"dev": true, "dev": true,
"requires": { "requires": {
"normalize-path": "^3.0.0", "normalize-path": "^3.0.0",
"picomatch": "^2.0.4" "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
},
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true "dev": true
}, },
"binary-extensions": { "binary-extensions": {
"version": "2.1.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
"integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"dev": true "dev": true
}, },
"brace-expansion": { "brace-expansion": {
@ -1250,9 +1197,9 @@
"dev": true "dev": true
}, },
"builtin-modules": { "builtin-modules": {
"version": "3.1.0", "version": "3.2.0",
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz", "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz",
"integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==", "integrity": "sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==",
"dev": true "dev": true
}, },
"chalk": { "chalk": {
@ -1267,14 +1214,14 @@
} }
}, },
"chokidar": { "chokidar": {
"version": "3.4.3", "version": "3.5.1",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
"integrity": "sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==", "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
"dev": true, "dev": true,
"requires": { "requires": {
"anymatch": "~3.1.1", "anymatch": "~3.1.1",
"braces": "~3.0.2", "braces": "~3.0.2",
"fsevents": "~2.1.2", "fsevents": "~2.3.1",
"glob-parent": "~5.1.0", "glob-parent": "~5.1.0",
"is-binary-path": "~2.1.0", "is-binary-path": "~2.1.0",
"is-glob": "~4.0.1", "is-glob": "~4.0.1",
@ -1354,9 +1301,9 @@
"dev": true "dev": true
}, },
"fsevents": { "fsevents": {
"version": "2.1.3", "version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
"integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
"dev": true, "dev": true,
"optional": true "optional": true
}, },
@ -1386,9 +1333,9 @@
} }
}, },
"glob-parent": { "glob-parent": {
"version": "5.1.1", "version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dev": true, "dev": true,
"requires": { "requires": {
"is-glob": "^4.0.1" "is-glob": "^4.0.1"
@ -1435,9 +1382,9 @@
} }
}, },
"is-core-module": { "is-core-module": {
"version": "2.2.0", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.3.0.tgz",
"integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==", "integrity": "sha512-xSphU2KG9867tsYdLD4RWQ1VqdFl4HTO9Thf3I/3dLEfr0dbPTWKsuCKrgqMljg4nPE+Gq0VCnzT3gr0CyBmsw==",
"dev": true, "dev": true,
"requires": { "requires": {
"has": "^1.0.3" "has": "^1.0.3"
@ -1519,21 +1466,21 @@
"integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==" "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="
}, },
"livereload": { "livereload": {
"version": "0.9.1", "version": "0.9.3",
"resolved": "https://registry.npmjs.org/livereload/-/livereload-0.9.1.tgz", "resolved": "https://registry.npmjs.org/livereload/-/livereload-0.9.3.tgz",
"integrity": "sha512-9g7sua11kkyZNo2hLRCG3LuZZwqexoyEyecSlV8cAsfAVVCZqLzVir6XDqmH0r+Vzgnd5LrdHDMyjtFnJQLAYw==", "integrity": "sha512-q7Z71n3i4X0R9xthAryBdNGVGAO2R5X+/xXpmKeuPMrteg+W2U8VusTKV3YiJbXZwKsOlFlHe+go6uSNjfxrZw==",
"dev": true, "dev": true,
"requires": { "requires": {
"chokidar": "^3.3.0", "chokidar": "^3.5.0",
"livereload-js": "^3.1.0", "livereload-js": "^3.3.1",
"opts": ">= 1.2.0", "opts": ">= 1.2.0",
"ws": "^6.2.1" "ws": "^7.4.3"
} }
}, },
"livereload-js": { "livereload-js": {
"version": "3.3.1", "version": "3.3.2",
"resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-3.3.1.tgz", "resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-3.3.2.tgz",
"integrity": "sha512-CBu1gTEfzVhlOK1WASKAAJ9Qx1fHECTq0SUB67sfxwQssopTyvzqTlgl+c0h9pZ6V+Fzd2rc510ppuNusg9teQ==", "integrity": "sha512-w677WnINxFkuixAoUEXOStewzLYGI76XVag+0JWMMEyjJQKs0ibWZMxkTlB96Lm3EjZ7IeOxVziBEbtxVQqQZA==",
"dev": true "dev": true
}, },
"local-access": { "local-access": {
@ -1557,9 +1504,9 @@
"dev": true "dev": true
}, },
"mime": { "mime": {
"version": "2.4.6", "version": "2.5.2",
"resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz", "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
"integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==" "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg=="
}, },
"minimatch": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
@ -1609,9 +1556,9 @@
"dev": true "dev": true
}, },
"picomatch": { "picomatch": {
"version": "2.2.2", "version": "2.2.3",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz",
"integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==", "integrity": "sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==",
"dev": true "dev": true
}, },
"randombytes": { "randombytes": {
@ -1639,22 +1586,22 @@
"dev": true "dev": true
}, },
"resolve": { "resolve": {
"version": "1.19.0", "version": "1.20.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
"integrity": "sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==", "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
"dev": true, "dev": true,
"requires": { "requires": {
"is-core-module": "^2.1.0", "is-core-module": "^2.2.0",
"path-parse": "^1.0.6" "path-parse": "^1.0.6"
} }
}, },
"rollup": { "rollup": {
"version": "2.34.2", "version": "2.46.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.34.2.tgz", "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.46.0.tgz",
"integrity": "sha512-mvtQLqu3cNeoctS+kZ09iOPxrc1P1/Bt1z15enuQ5feyKOdM3MJAVFjjsygurDpSWn530xB4AlA83TWIzRstXA==", "integrity": "sha512-qPGoUBNl+Z8uNu0z7pD3WPTABWRbcOwIrO/5ccDJzmrtzn0LVf6Lj91+L5CcWhXl6iWf23FQ6m8Jkl2CmN1O7Q==",
"dev": true, "dev": true,
"requires": { "requires": {
"fsevents": "~2.1.2" "fsevents": "~2.3.1"
} }
}, },
"rollup-plugin-livereload": { "rollup-plugin-livereload": {
@ -1735,9 +1682,9 @@
} }
}, },
"sirv": { "sirv": {
"version": "1.0.10", "version": "1.0.11",
"resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.10.tgz", "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.11.tgz",
"integrity": "sha512-H5EZCoZaggEUQy8ocKsF7WAToGuZhjJlLvM3XOef46CbdIgbNeQ1p32N1PCuCjkVYwrAVOSMacN6CXXgIzuspg==", "integrity": "sha512-SR36i3/LSWja7AJNRBz4fF/Xjpn7lQFI30tZ434dIy+bitLYSP+ZEenHg36i23V2SGEz+kqjksg0uOGZ5LPiqg==",
"requires": { "requires": {
"@polka/url": "^1.0.0-next.9", "@polka/url": "^1.0.0-next.9",
"mime": "^2.3.1", "mime": "^2.3.1",
@ -1745,9 +1692,9 @@
} }
}, },
"sirv-cli": { "sirv-cli": {
"version": "1.0.10", "version": "1.0.11",
"resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-1.0.10.tgz", "resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-1.0.11.tgz",
"integrity": "sha512-8mLTRkvzpZXMyUZJ1whf84YHN/mm2r2+j5sU1ZYr5n2jA8VkFItNPk53oysOo+0QxBVp9aUjggkAsQp1d7L3OQ==", "integrity": "sha512-L8NILoRSBd38VcfFcERYCaVCnWPBLo9G6u/a37UJ8Ysv4DfjizMbFBcM+SswNnndJienhR6qy8KFuAEaeL4g8Q==",
"requires": { "requires": {
"console-clear": "^1.1.0", "console-clear": "^1.1.0",
"get-port": "^3.2.0", "get-port": "^3.2.0",
@ -1755,7 +1702,7 @@
"local-access": "^1.0.1", "local-access": "^1.0.1",
"sade": "^1.6.0", "sade": "^1.6.0",
"semiver": "^1.0.0", "semiver": "^1.0.0",
"sirv": "^1.0.10", "sirv": "^1.0.11",
"tinydate": "^1.0.0" "tinydate": "^1.0.0"
} }
}, },
@ -1799,15 +1746,15 @@
} }
}, },
"svelte": { "svelte": {
"version": "3.31.0", "version": "3.38.1",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.31.0.tgz", "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.38.1.tgz",
"integrity": "sha512-r+n8UJkDqoQm1b+3tA3Lh6mHXKpcfOSOuEuIo5gE2W9wQYi64RYX/qE6CZBDDsP/H4M+N426JwY7XGH4xASvGQ==", "integrity": "sha512-N3XLAyfzqrFxwRLevBeW7Dke9ZlHRVGSIed5abo4Drvj+zvd2OyWpFa1x4nQUc8Lnvt4Kcn8/5le1peRDybNqg==",
"dev": true "dev": true
}, },
"terser": { "terser": {
"version": "5.5.1", "version": "5.7.0",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.5.1.tgz", "resolved": "https://registry.npmjs.org/terser/-/terser-5.7.0.tgz",
"integrity": "sha512-6VGWZNVP2KTUcltUQJ25TtNjx/XgdDsBDKGt8nN0MpydU36LmbPPcMBd2kmtZNNGVVDLg44k7GKeHHj+4zPIBQ==", "integrity": "sha512-HP5/9hp2UaZt5fYkuhNBR8YyRcT8juw8+uFbAme53iN9hblvKnLUTKkmwJG6ocWpIKf8UK4DoeWG4ty0J6S6/g==",
"dev": true, "dev": true,
"requires": { "requires": {
"commander": "^2.20.0", "commander": "^2.20.0",
@ -1841,13 +1788,11 @@
"dev": true "dev": true
}, },
"ws": { "ws": {
"version": "6.2.1", "version": "7.4.5",
"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz",
"integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==", "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==",
"dev": true, "dev": true,
"requires": { "requires": {}
"async-limiter": "~1.0.0"
}
} }
} }
} }

4
packages/svelte-demo/package.json
View File

@ -8,8 +8,8 @@
"start": "sirv public" "start": "sirv public"
}, },
"devDependencies": { "devDependencies": {
"@iconify-icons/bx": "^1.0.2", "@iconify-icons/mdi-light": "^1.1.0",
"@iconify-icons/dashicons": "^1.0.0", "@iconify-icons/uil": "^1.1.1",
"@iconify/svelte": "^1.0.3", "@iconify/svelte": "^1.0.3",
"@rollup/plugin-commonjs": "^16.0.0", "@rollup/plugin-commonjs": "^16.0.0",
"@rollup/plugin-node-resolve": "^10.0.0", "@rollup/plugin-node-resolve": "^10.0.0",

188
packages/svelte-demo/public/global.css
View File

@ -1,66 +1,162 @@
html, body { main {
font-family: Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: left;
color: #2c3e50;
font-size: 16px;
line-height: 1.5;
}
/* Sections */
section {
border-bottom: 1px dotted #ccc;
padding: 16px;
}
section:last-child {
border-bottom-width: 0;
}
section:after {
content: ' ';
display: table;
clear: both;
}
h1,
h2 {
margin: 0 0 16px;
padding: 0;
font-size: 24px;
font-weight: normal;
}
h2 {
margin: 16px 0;
font-size: 20px;
}
h1 + h2 {
margin-top: -8px;
}
p {
margin: 12px 0 4px;
padding: 0;
}
/* Tests */
.test-row {
font-size: 16px;
line-height: 1.5;
}
.test-row-icons {
padding-right: 4px;
}
.test-row-icons > svg {
color: #afafaf;
display: none;
}
.test-row-icons > svg.visible {
display: inline-block;
}
.test-row-icons > svg.success {
color: #327335;
}
.test-row-icons > svg.failed {
color: #ba3329;
}
/* 24px icon */
.icon-24 svg {
font-size: 24px;
line-height: 1;
vertical-align: -0.25em;
}
/* Alert demo */
.alert {
position: relative; position: relative;
width: 100%; margin: 8px;
height: 100%; padding: 16px;
padding-left: 48px;
background: #ba3329;
color: #fff;
border-radius: 5px;
float: left;
} }
body { .alert + div {
color: #333; clear: both;
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 { .alert svg {
color: rgb(0,100,200); position: absolute;
left: 12px;
top: 50%;
font-size: 24px;
line-height: 1em;
margin: -0.5em 0 0;
}
/* Checkbox component */
.checkbox-container {
margin: 8px 0;
}
.checkbox {
cursor: pointer;
/* color: #1769aa; */
color: #626262;
text-decoration: none; text-decoration: none;
} }
.checkbox:hover {
a:hover { color: #ba3329;
text-decoration: underline; text-decoration: underline;
} }
a:visited { .checkbox svg {
color: rgb(0,80,160); margin-right: 4px;
color: #afafaf;
font-size: 24px;
line-height: 1em;
vertical-align: -0.25em;
}
.checkbox--checked svg {
color: #327335;
}
.checkbox:hover svg {
color: inherit;
} }
label { .checkbox-container small {
display: block; margin-left: 4px;
opacity: 0.7;
} }
input, button, select, textarea { /* Inline demo */
font-family: inherit; .inline-demo svg {
font-size: inherit; color: #06a;
padding: 0.4em; margin: 0 8px;
margin: 0 0 0.5em 0; position: relative;
box-sizing: border-box; z-index: 2;
border: 1px solid #ccc; background: #fff;
border-radius: 2px;
} }
.inline-demo div {
input:disabled { position: relative;
color: #ccc; font-size: 16px;
line-height: 1.5;
} }
.inline-demo div:before,
input[type="range"] { .inline-demo div:after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 0; height: 0;
border-top: 1px dashed #506874;
opacity: 0.5;
z-index: -1;
} }
.inline-demo div:before {
button { bottom: 5px;
color: #333;
background-color: #f4f4f4;
outline: none;
} }
.inline-demo div:after {
button:disabled { bottom: 7px;
color: #999; border-top-color: #ba3329;
}
button:not(:disabled):active {
background-color: #ddd;
}
button:focus {
border-color: #666;
} }

188
packages/svelte-demo/src/App.svelte
View File

@ -1,123 +1,97 @@
<script> <script>
import { Icon, addIcon } from '@iconify/svelte'; import { addIcon as addOfflineIcon, addCollection as addOfflineCollection } from '@iconify/svelte/dist/offline';
import adminCustomizer from '@iconify-icons/dashicons/admin-customizer'; import {
import bxUser from '@iconify-icons/bx/bx-user'; addIcon as addOnlineIcon,
import bxError from '@iconify-icons/bx/bx-error'; addCollection as addOnlineCollection,
disableCache,
} from '@iconify/svelte/dist/iconify';
import UsageSample from './components/Sample.svelte'; import presentationPlay from '@iconify-icons/mdi-light/presentation-play';
import ColorStyle from './components/ColorStyle.svelte'; import playIcon from '@iconify-icons/mdi-light/play';
import InlineDemo from './components/Inline.svelte';
import AlignmentDemo from './components/Alignment.svelte';
import TransformationsDemo from './components/Transformations.svelte';
import StyleDemo from './components/Style.svelte';
import Checkbox from './demo-components/Checkbox.svelte';
import InlineDemo from './demo-components/Inline.svelte';
import OfflineUsageDemo from './demo-components/UsageOffline.svelte';
import FullOfflineUsageDemo from './demo-components/UsageFullOffline.svelte';
import FullUsageDemo from './demo-components/UsageFull.svelte';
const iconDataWithID = { // Disable cache
disableCache('all');
// Add 'mdi-light:presentation-play' as 'demo' for offline module
addOfflineIcon('demo', presentationPlay);
// Add 'mdi-light:play' as 'demo' for full module
addOnlineIcon('demo', playIcon);
// Add custom icon as 'experiment'
addOfflineIcon('experiment2', {
width: 16,
height: 16,
body: body:
'<defs><path id="ssvg-id-1st-place-medala" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medald" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medalf" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medalh" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medalj" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medalm" d="M.93.01h120.55v58.36H.93z"/><path d="M52.849 78.373v-3.908c3.681-.359 6.25-.958 7.703-1.798c1.454-.84 2.54-2.828 3.257-5.962h4.021v40.385h-5.437V78.373h-9.544z" id="ssvg-id-1st-place-medalp"/><linearGradient x1="49.998%" y1="-13.249%" x2="49.998%" y2="90.002%" id="ssvg-id-1st-place-medalb"><stop stop-color="#1E88E5" offset="13.55%"/><stop stop-color="#1565C0" offset="93.8%"/></linearGradient><linearGradient x1="26.648%" y1="2.735%" x2="77.654%" y2="105.978%" id="ssvg-id-1st-place-medalk"><stop stop-color="#64B5F6" offset="13.55%"/><stop stop-color="#2196F3" offset="94.62%"/></linearGradient><radialGradient cx="22.368%" cy="12.5%" fx="22.368%" fy="12.5%" r="95.496%" id="ssvg-id-1st-place-medalo"><stop stop-color="#FFEB3B" offset="29.72%"/><stop stop-color="#FBC02D" offset="95.44%"/></radialGradient></defs><g fill="none" fill-rule="evenodd"><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medalc" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medala"/></mask><path fill="url(#ssvg-id-1st-place-medalb)" fill-rule="nonzero" mask="url(#ssvg-id-1st-place-medalc)" d="M45.44 42.18h31.43l30-48.43H75.44z"/></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medale" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medald"/></mask><g opacity=".2" mask="url(#ssvg-id-1st-place-medale)" fill="#424242" fill-rule="nonzero"><path d="M101.23-3L75.2 39H50.85L77.11-3h24.12zm5.64-3H75.44l-30 48h31.42l30.01-48z"/></g></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medalg" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medalf"/></mask><path d="M79 30H43c-4.42 0-8 3.58-8 8v16.04c0 2.17 1.8 3.95 4.02 3.96h.01c2.23-.01 4.97-1.75 4.97-3.96V44c0-1.1.9-2 2-2h30c1.1 0 2 .9 2 2v9.93c0 1.98 2.35 3.68 4.22 4.04c.26.05.52.08.78.08c2.21 0 4-1.79 4-4V38c0-4.42-3.58-8-8-8z" fill="#FDD835" fill-rule="nonzero" mask="url(#ssvg-id-1st-place-medalg)"/></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medali" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medalh"/></mask><g opacity=".2" mask="url(#ssvg-id-1st-place-medali)" fill="#424242" fill-rule="nonzero"><path d="M79 32c3.31 0 6 2.69 6 6v16.04A2.006 2.006 0 0 1 82.59 56c-1.18-.23-2.59-1.35-2.59-2.07V44c0-2.21-1.79-4-4-4H46c-2.21 0-4 1.79-4 4v10.04c0 .88-1.64 1.96-2.97 1.96c-1.12-.01-2.03-.89-2.03-1.96V38c0-3.31 2.69-6 6-6h36zm0-2H43c-4.42 0-8 3.58-8 8v16.04c0 2.17 1.8 3.95 4.02 3.96h.01c2.23-.01 4.97-1.75 4.97-3.96V44c0-1.1.9-2 2-2h30c1.1 0 2 .9 2 2v9.93c0 1.98 2.35 3.68 4.22 4.04c.26.05.52.08.78.08c2.21 0 4-1.79 4-4V38c0-4.42-3.58-8-8-8z"/></g></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medall" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medalj"/></mask><path fill="url(#ssvg-id-1st-place-medalk)" fill-rule="nonzero" mask="url(#ssvg-id-1st-place-medall)" d="M76.87 42.18H45.44l-30-48.43h31.43z"/></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medaln" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medalm"/></mask><g opacity=".2" mask="url(#ssvg-id-1st-place-medaln)" fill="#424242" fill-rule="nonzero"><path d="M45.1-3l26.35 42H47.1L20.86-3H45.1zm1.77-3H15.44l30 48h31.42L46.87-6z"/></g></g><circle fill="url(#ssvg-id-1st-place-medalo)" fill-rule="nonzero" cx="64" cy="86" r="38"/><path d="M64 51c19.3 0 35 15.7 35 35s-15.7 35-35 35s-35-15.7-35-35s15.7-35 35-35zm0-3c-20.99 0-38 17.01-38 38s17.01 38 38 38s38-17.01 38-38s-17.01-38-38-38z" opacity=".2" fill="#424242" fill-rule="nonzero"/><path d="M47.3 63.59h33.4v44.4H47.3z"/><use fill="#000" xlink:href="#ssvg-id-1st-place-medalp"/><use fill="#FFA000" xlink:href="#ssvg-id-1st-place-medalp"/></g>', '<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"/>',
width: 128, });
height: 128, 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>',
});
// Add few mdi-light: icons
addOfflineCollection({
prefix: 'offline-mdi-light',
icons: {
'account-alert': {
body:
'<path d="M10.5 14c4.142 0 7.5 1.567 7.5 3.5V20H3v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S4 16.12 4 17.5V19h13v-1.5zM10.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM20 16v-1h1v1h-1zm0-3V7h1v6h-1z" fill="currentColor"/>',
},
'link': {
body:
'<path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"/>',
},
},
width: 24,
height: 24,
});
addOnlineCollection({
prefix: '',
icons: {
alert1: {
body:
'<path d="M10.5 14c4.142 0 7.5 1.567 7.5 3.5V20H3v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S4 16.12 4 17.5V19h13v-1.5zM10.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM20 16v-1h1v1h-1zm0-3V7h1v6h-1z" fill="currentColor"/>',
},
link1: {
body:
'<path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"/>',
},
},
width: 24,
height: 24,
});
addIcon('demo', adminCustomizer);
</script> </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 :global(+ 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> <main>
<OfflineUsageDemo />
<FullOfflineUsageDemo />
<FullUsageDemo />
<section> <section>
<h1>Usage</h1> <h1>Checkbox</h1>
<div> <div>
Empty icon: <Checkbox
<Icon /> checked={true}
</div> text="Checkbox example"
<div> hint="(click to toggle)"
Empty icon with placeholder: />
<Icon>😿</Icon> <Checkbox
</div> checked={false}
<div> text="Another checkbox example"
Simple icon: hint="(click to toggle)"
<Icon icon={bxUser} inline={true} /> />
</div>
<div>
Icon refenced by name:
<Icon icon="demo" inline={true} />
</div>
<div class="alert">
<Icon icon={bxError} />
Important notice with alert icon!
</div> </div>
</section> </section>
<section>
<h1>Example file (components/Sample.svelte)</h1>
<UsageSample />
</section>
<ColorStyle />
<InlineDemo /> <InlineDemo />
<AlignmentDemo />
<TransformationsDemo />
<StyleDemo />
<section>
<h1>Tests</h1>
<p>Testing replacing ids in icon: <Icon icon={iconDataWithID} /> <Icon icon={iconDataWithID} /> (default handler) <Icon icon={iconDataWithID} id="test" /> <Icon icon={iconDataWithID} id="test2" /> (custom handler)</p>
</section>
</main> </main>

28
packages/svelte-demo/src/demo-components/Checkbox.svelte Normal file
View File

@ -0,0 +1,28 @@
<script>
import { Icon } from '@iconify/svelte/dist/offline';
import checkedIcon from '@iconify-icons/uil/check-square';
import uncheckedIcon from '@iconify-icons/uil/square';
export let checked;
export let text;
export let hint;
let isChecked = checked;
let icon;
let className;
$: {
icon = isChecked ? checkedIcon : uncheckedIcon;
className =
'checkbox checkbox--' + (isChecked ? 'checked' : 'unchecked');
}
function toggle() {
isChecked = !isChecked;
}
</script>
<div class="checkbox-container">
<a href="# " class={className} on:click|preventDefault={toggle}><Icon icon={icon} />{text}</a>
<small>{hint}</small>
</div>

33
packages/svelte-demo/src/demo-components/Inline.svelte Normal file
View File

@ -0,0 +1,33 @@
<script>
import { Icon as OfflineIcon } from '@iconify/svelte/dist/offline';
import { Icon as FullIcon } from '@iconify/svelte';
</script>
<section class="inline-demo">
<h1>Inline demo</h1>
<div>
Block icon (behaving like image):
<OfflineIcon icon="experiment2" />
<FullIcon icon="experiment2" />
</div>
<div>
Inline icon (behaving line text / icon font):
<OfflineIcon icon="experiment2" inline={true} />
<FullIcon icon="experiment2" inline={true} />
</div>
<div>
Using "vertical-align: 0" to override inline attribute:
<OfflineIcon icon="experiment2" style="vertical-align: 0;" />
<FullIcon icon="experiment2" style="vertical-align: 0;" />
<OfflineIcon
icon="experiment2"
style="vertical-align: 0;"
inline={true}
/>
<FullIcon
icon="experiment2"
style="vertical-align: 0;"
inline={true}
/>
</div>
</section>

14
packages/svelte-demo/src/demo-components/UsageFull.svelte Normal file
View File

@ -0,0 +1,14 @@
<script>
import { Icon } from '@iconify/svelte';
</script>
<section class="icon-24">
<h1>Usage (full module)</h1>
<div>
Icon referenced by name: <Icon icon="mdi:home" />
</div>
<div class="alert">
<Icon icon="mdi-light:alert" />
Important notice with alert icon!
</div>
</section>

22
packages/svelte-demo/src/demo-components/UsageFullOffline.svelte Normal file
View File

@ -0,0 +1,22 @@
<script>
import { Icon } from '@iconify/svelte';
import accountIcon from '@iconify-icons/mdi-light/account';
import alertIcon from '@iconify-icons/mdi-light/alert';
</script>
<section class="icon-24">
<h1>Usage (full module, offline mode)</h1>
<div>
Icon referenced by name: <Icon icon="demo" />
</div>
<div>
Icon referenced by object: <Icon icon={accountIcon} />
</div>
<div>
2 icons imported from icon set: <Icon icon="alert1" /><Icon icon="link1" />
</div>
<div class="alert">
<Icon icon={alertIcon} />
Important notice with alert icon!
</div>
</section>

24
packages/svelte-demo/src/demo-components/UsageOffline.svelte Normal file
View File

@ -0,0 +1,24 @@
<script>
import { Icon } from '@iconify/svelte/dist/offline';
import accountIcon from '@iconify-icons/mdi-light/account';
import alertIcon from '@iconify-icons/mdi-light/alert';
</script>
<section class="icon-24">
<h1>Usage (offline module)</h1>
<div>
Icon referenced by name: <Icon icon="demo" />
</div>
<div>
Icon referenced by object: <Icon icon={accountIcon} />
</div>
<div>
2 icons imported from icon set:
<Icon icon="offline-mdi-light:account-alert" />
<Icon icon="offline-mdi-light:link" />
</div>
<div class="alert">
<Icon icon={alertIcon} />
Important notice with alert icon!
</div>
</section>

5
packages/svelte-demo/src/components/Alignment.svelte → packages/svelte-demo/src/samples/Alignment.svelte
View File

@ -1,6 +1,7 @@
<script> <script>
import { Icon } from '@iconify/svelte'; import { Icon } from '@iconify/svelte';
import paperclipIcon from '@iconify-icons/dashicons/paperclip';
const paperclipIcon = 'dashicons:paperclip';
</script> </script>
<style> <style>
@ -15,7 +16,7 @@
</style> </style>
<section> <section>
<h1>Alignment (components/Alignment.svelte)</h1> <h1>Alignment (samples/Alignment.svelte)</h1>
<div> <div>
<p>Icon with correct width/heigh ratio:</p> <p>Icon with correct width/heigh ratio:</p>
<Icon icon={paperclipIcon} /> <Icon icon={paperclipIcon} />

6
packages/svelte-demo/src/components/ColorStyle.svelte → packages/svelte-demo/src/samples/ColorStyle.svelte
View File

@ -1,12 +1,12 @@
<script> <script>
import { Icon } from '@iconify/svelte'; import { Icon } from '@iconify/svelte';
import adminUsers from '@iconify-icons/dashicons/admin-users';
let icon1Style = 'color: purple; vertical-align: 0; font-size: 2em;'; const adminUsers = 'dashicons:admin-users';
const icon1Style = 'color: purple; vertical-align: 0; font-size: 2em;';
</script> </script>
<section> <section>
<h1>Color and style (components/ColorStyle.svelte)</h1> <h1>Color and style (samples/ColorStyle.svelte)</h1>
<div> <div>
Icon with color (red): Icon with color (red):
<Icon icon={adminUsers} color="red" inline={true} /> <Icon icon={adminUsers} color="red" inline={true} />

2
packages/svelte-demo/src/components/Inline.svelte → packages/svelte-demo/src/samples/Inline.svelte
View File

@ -47,7 +47,7 @@
</style> </style>
<section> <section>
<h1>Inline (components/Inline.svelte)</h1> <h1>Inline (samples/Inline.svelte)</h1>
<div> <div>
Block icon (behaving like image): Block icon (behaving like image):
<Icon icon={demoIcon} /> <Icon icon={demoIcon} />

3
packages/svelte-demo/src/components/Sample.svelte → packages/svelte-demo/src/samples/Sample.svelte
View File

@ -1,6 +1,7 @@
<script> <script>
import { Icon } from '@iconify/svelte'; import { Icon } from '@iconify/svelte';
import adminCustomizer from '@iconify-icons/dashicons/admin-customizer';
const adminCustomizer = 'dashicons:admin-customizer';
</script> </script>
<Icon icon={adminCustomizer} height="20" style="color: green;" /> <Icon icon={adminCustomizer} height="20" style="color: green;" />

4
packages/svelte-demo/src/components/Style.svelte → packages/svelte-demo/src/samples/Style.svelte
View File

@ -1,7 +1,7 @@
<script> <script>
import { Icon } from '@iconify/svelte'; import { Icon } from '@iconify/svelte';
import paperclipIcon from '@iconify-icons/dashicons/paperclip';
const paperclipIcon = 'dashicons:paperclip';
const redIcon = 'color: red;'; const redIcon = 'color: red;';
const bigIcon = 'font-size: 40px;'; const bigIcon = 'font-size: 40px;';
</script> </script>
@ -17,7 +17,7 @@
</style> </style>
<section> <section>
<h1>Style (components/Style.svelte)</h1> <h1>Style (samples/Style.svelte)</h1>
<div> <div>
Default icon: Default icon:
<Icon icon={paperclipIcon} /> <Icon icon={paperclipIcon} />

5
packages/svelte-demo/src/components/Transformations.svelte → packages/svelte-demo/src/samples/Transformations.svelte
View File

@ -1,6 +1,7 @@
<script> <script>
import { Icon } from '@iconify/svelte'; import { Icon } from '@iconify/svelte';
import paperclipIcon from '@iconify-icons/dashicons/paperclip';
const paperclipIcon = 'dashicons:paperclip';
</script> </script>
<style> <style>
@ -11,7 +12,7 @@
</style> </style>
<section> <section>
<h1>Transformations (components/Transformations.svelte)</h1> <h1>Transformations (samples/Transformations.svelte)</h1>
<div> <div>
Default icon: Default icon:
<Icon icon={paperclipIcon} /> <Icon icon={paperclipIcon} />

41
packages/svelte/src/Icon.svelte
View File

@ -1,12 +1,49 @@
<script> <script>
import { generateIcon } from './offline-functions'; import { onMount, onDestroy } from 'svelte';
import { checkIconState, generateIcon } from './functions';
// State
const state = {
// Last icon name
name: '',
// Loading status
loading: null,
};
// Mounted status
let mounted = false;
// Callback counter
let counter = 0;
// Generated data // Generated data
let data; let data;
// Generate data
$: { $: {
data = generateIcon($$props); counter;
data = mounted ? generateIcon(checkIconState($$props.icon, state, loaded), $$props) : null;
} }
// Increase counter when loaded to force re-calculation of data
function loaded() {
counter ++;
}
// Force re-render
onMount(() => {
mounted = true;
});
// Abort loading when component is destroyed
onDestroy(() => {
mounted = false;
if (state.loading) {
state.loading.abort();
state.loading = null;
}
})
</script> </script>
{#if data === null} {#if data === null}

439
packages/svelte/src/functions.ts
View File

@ -1,68 +1,391 @@
import type { IconifyIcon, IconifyJSON } from '@iconify/types'; import type { IconifyJSON } from '@iconify/types';
import { fullIcon } from '@iconify/core/lib/icon';
import { parseIconSet } from '@iconify/core/lib/icon/icon-set'; // Core
import type { IconifyIconName } from '@iconify/core/lib/icon/name';
import type {
IconifyIconSize,
IconifyHorizontalIconAlignment,
IconifyVerticalIconAlignment,
} from '@iconify/core/lib/customisations';
import {
IconifyStorageFunctions,
storageFunctions,
getIconData,
allowSimpleNames,
} from '@iconify/core/lib/storage/functions';
import {
IconifyBuilderFunctions,
builderFunctions,
} from '@iconify/core/lib/builder/functions';
import { fullIcon, IconifyIcon } from '@iconify/core/lib/icon';
// Modules
import { coreModules } from '@iconify/core/lib/modules';
// API
import { API, IconifyAPIInternalStorage } from '@iconify/core/lib/api/';
import {
IconifyAPIFunctions,
IconifyAPIInternalFunctions,
APIFunctions,
APIInternalFunctions,
} from '@iconify/core/lib/api/functions';
import {
setAPIModule,
IconifyAPIModule,
IconifyAPISendQuery,
IconifyAPIPrepareQuery,
GetIconifyAPIModule,
} from '@iconify/core/lib/api/modules';
import { getAPIModule as getJSONPAPIModule } from '@iconify/core/lib/api/modules/jsonp';
import {
getAPIModule as getFetchAPIModule,
setFetch,
} from '@iconify/core/lib/api/modules/fetch';
import {
setAPIConfig,
PartialIconifyAPIConfig,
IconifyAPIConfig,
getAPIConfig,
GetAPIConfig,
} from '@iconify/core/lib/api/config';
import type {
IconifyIconLoaderCallback,
IconifyIconLoaderAbort,
} from '@iconify/core/lib/interfaces/loader';
// Cache
import { storeCache, loadCache } from '@iconify/core/lib/browser-storage';
import { toggleBrowserCache } from '@iconify/core/lib/browser-storage/functions';
import type {
IconifyBrowserCacheType,
IconifyBrowserCacheFunctions,
} from '@iconify/core/lib/browser-storage/functions';
// Properties
import type {
IconProps,
IconifyIconCustomisations,
IconifyIconProps,
} from './props';
// Render SVG
import { render } from './render'; import { render } from './render';
import type { RenderResult } from './render'; import type { RenderResult } from './render';
import type { IconProps } from './props';
/** /**
* Storage for icons referred by name * Export required types
*/ */
const storage: Record<string, Required<IconifyIcon>> = Object.create(null); // Function sets
export {
IconifyStorageFunctions,
IconifyBuilderFunctions,
IconifyBrowserCacheFunctions,
IconifyAPIFunctions,
IconifyAPIInternalFunctions,
};
// JSON stuff
export { IconifyIcon, IconifyJSON, IconifyIconName };
// Customisations
export {
IconifyIconCustomisations,
IconifyIconSize,
IconifyHorizontalIconAlignment,
IconifyVerticalIconAlignment,
IconifyIconProps,
IconProps,
};
// API
export {
IconifyAPIConfig,
IconifyIconLoaderCallback,
IconifyIconLoaderAbort,
IconifyAPIInternalStorage,
IconifyAPIModule,
GetAPIConfig,
IconifyAPIPrepareQuery,
IconifyAPISendQuery,
PartialIconifyAPIConfig,
};
/* Browser cache */
export { IconifyBrowserCacheType };
/**
* Enable and disable browser cache
*/
export const enableCache = (storage: IconifyBrowserCacheType) =>
toggleBrowserCache(storage, true);
export const disableCache = (storage: IconifyBrowserCacheType) =>
toggleBrowserCache(storage, false);
/* Storage functions */
/**
* Check if icon exists
*/
export const iconExists = storageFunctions.iconExists;
/**
* Get icon data
*/
export const getIcon = storageFunctions.getIcon;
/**
* List available icons
*/
export const listIcons = storageFunctions.listIcons;
/**
* Add one icon
*/
export const addIcon = storageFunctions.addIcon;
/**
* Add icon set
*/
export const addCollection = storageFunctions.addCollection;
/* Builder functions */
/**
* Calculate icon size
*/
export const calculateSize = builderFunctions.calculateSize;
/**
* Replace unique ids in content
*/
export const replaceIDs = builderFunctions.replaceIDs;
/* API functions */
/**
* Load icons
*/
export const loadIcons = APIFunctions.loadIcons;
/**
* Add API provider
*/
export const addAPIProvider = APIFunctions.addAPIProvider;
/**
* Export internal functions that can be used by third party implementations
*/
export const _api = APIInternalFunctions;
/**
* Initialise stuff
*/
// Enable short names
allowSimpleNames(true);
// Set API
coreModules.api = API;
// Use Fetch API by default
let getAPIModule: GetIconifyAPIModule = getFetchAPIModule;
try {
if (typeof document !== 'undefined' && typeof window !== 'undefined') {
// If window and document exist, attempt to load whatever module is available, otherwise use Fetch API
getAPIModule =
typeof fetch === 'function' && typeof Promise === 'function'
? getFetchAPIModule
: getJSONPAPIModule;
}
} catch (err) {
//
}
setAPIModule('', getAPIModule(getAPIConfig));
/**
* Function to enable node-fetch for getting icons on server side
*/
export function setNodeFetch(nodeFetch: typeof fetch) {
setFetch(nodeFetch);
if (getAPIModule !== getFetchAPIModule) {
getAPIModule = getFetchAPIModule;
setAPIModule('', getAPIModule(getAPIConfig));
}
}
/**
* Browser stuff
*/
if (typeof document !== 'undefined' && typeof window !== 'undefined') {
// Set cache and load existing cache
coreModules.cache = storeCache;
loadCache();
const _window = window;
// Load icons from global "IconifyPreload"
interface WindowWithIconifyPreload {
IconifyPreload: IconifyJSON[] | IconifyJSON;
}
if (
((_window as unknown) as WindowWithIconifyPreload).IconifyPreload !==
void 0
) {
const preload = ((_window as unknown) as WindowWithIconifyPreload)
.IconifyPreload;
const err = 'Invalid IconifyPreload syntax.';
if (typeof preload === 'object' && preload !== null) {
(preload instanceof Array ? preload : [preload]).forEach((item) => {
try {
if (
// Check if item is an object and not null/array
typeof item !== 'object' ||
item === null ||
item instanceof Array ||
// Check for 'icons' and 'prefix'
typeof item.icons !== 'object' ||
typeof item.prefix !== 'string' ||
// Add icon set
!addCollection(item)
) {
console.error(err);
}
} catch (e) {
console.error(err);
}
});
}
}
// Set API from global "IconifyProviders"
interface WindowWithIconifyProviders {
IconifyProviders: Record<string, PartialIconifyAPIConfig>;
}
if (
((_window as unknown) as WindowWithIconifyProviders)
.IconifyProviders !== void 0
) {
const providers = ((_window as unknown) as WindowWithIconifyProviders)
.IconifyProviders;
if (typeof providers === 'object' && providers !== null) {
for (let key in providers) {
const err = 'IconifyProviders[' + key + '] is invalid.';
try {
const value = providers[key];
if (
typeof value !== 'object' ||
!value ||
value.resources === void 0
) {
continue;
}
if (!setAPIConfig(key, value)) {
console.error(err);
}
} catch (e) {
console.error(err);
}
}
}
}
}
/*
.
.
.
.
.
.
*/
/**
* Function to get icon status
*/
interface IconLoadingState {
name: string;
abort: IconifyIconLoaderAbort;
}
type IconComponentData = Required<IconifyIcon> | null;
interface IconState {
// Last icon name
name: string;
// Loading status
loading: IconLoadingState | null;
}
type IconStateCallback = () => void;
/**
* Check if component needs to be updated
*/
export function checkIconState(
icon: string | IconifyIcon,
state: IconState,
callback: IconStateCallback
): IconComponentData {
// Abort loading icon
function abortLoading() {
if (state.loading) {
state.loading.abort();
state.loading = null;
}
}
// Icon is an object
if (
typeof icon === 'object' &&
icon !== null &&
typeof icon.body === 'string'
) {
// Stop loading
state.name = '';
abortLoading();
return fullIcon(icon);
}
// Invalid icon?
if (typeof icon !== 'string') {
abortLoading();
return null;
}
// Load icon
const data = getIconData(icon);
if (data === null) {
// Icon needs to be loaded
if (!state.loading || state.loading.name !== icon) {
// New icon to load
abortLoading();
state.name = '';
state.loading = {
name: icon,
abort: API.loadIcons([icon], callback),
};
}
return null;
}
// Icon data is available
state.name = icon;
abortLoading();
return data;
}
/** /**
* Generate icon * Generate icon
*/ */
export function generateIcon(props: IconProps): RenderResult | null { export function generateIcon(
// Split properties icon: IconComponentData,
const icon = props: IconProps
typeof props.icon === 'string' ): RenderResult | null {
? storage[props.icon] return icon ? render(icon, props) : null;
: typeof props.icon === 'object'
? fullIcon(props.icon)
: null;
// Validate icon object
if (
icon === null ||
typeof icon !== 'object' ||
typeof icon.body !== 'string'
) {
return null;
}
return render(icon, props);
}
/**
* Add icon to storage, allowing to call it by name
*
* @param name
* @param data
*/
export function addIcon(name: string, data: IconifyIcon): void {
storage[name] = fullIcon(data);
}
/**
* Add collection to storage, allowing to call icons by name
*
* @param data Icon set
* @param prefix Optional prefix to add to icon names, true (default) if prefix from icon set should be used.
*/
export function addCollection(
data: IconifyJSON,
prefix?: string | boolean
): void {
const iconPrefix: string =
typeof prefix === 'string'
? prefix
: prefix !== false && typeof data.prefix === 'string'
? data.prefix + ':'
: '';
parseIconSet(data, (name, icon) => {
if (icon !== null) {
storage[iconPrefix + name] = icon;
}
});
} }

14
packages/svelte/src/iconify.ts
View File

@ -14,4 +14,16 @@ export type { IconifyIconCustomisations, IconProps } from './props';
export { default as Icon } from './Icon.svelte'; export { default as Icon } from './Icon.svelte';
// Functions // Functions
export { addIcon, addCollection } from './functions'; export { enableCache, disableCache } from './functions';
export {
iconExists,
getIcon,
listIcons,
addIcon,
addCollection,
} from './functions';
export { calculateSize, replaceIDs } from './functions';
export { loadIcons, addAPIProvider, _api, setNodeFetch } from './functions';

40
packages/svelte/tests/api/10-api-mock.test.js Normal file
View File

@ -0,0 +1,40 @@
import { loadIcons, iconExists } from '../../dist/iconify';
import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
import { provider, nextPrefix } from './load';
describe('Testing fake API', () => {
test('using fake API to load icon', (done) => {
const prefix = nextPrefix();
const name = 'mock-test';
const iconName = `@${provider}:${prefix}:${name}`;
mockAPIData({
provider,
prefix,
response: {
prefix,
icons: {
[name]: {
body: '<g />',
},
},
},
});
// Check if icon has been loaded
expect(iconExists(iconName)).toEqual(false);
// Load icon
loadIcons([iconName], (loaded, missing, pending) => {
expect(loaded).toMatchObject([
{
provider,
prefix,
name,
},
]);
expect(missing).toMatchObject([]);
expect(pending).toMatchObject([]);
done();
});
});
});

153
packages/svelte/tests/api/20-rendering-from-api.test.js Normal file
View File

@ -0,0 +1,153 @@
import { render } from '@testing-library/svelte';
import { Icon, loadIcons, iconExists } from '../../dist/iconify';
import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
import { provider, nextPrefix } from './load';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 24,
};
describe('Rendering icon', () => {
test('rendering icon after loading it', (done) => {
const prefix = nextPrefix();
const name = 'render-test';
const iconName = `@${provider}:${prefix}:${name}`;
mockAPIData({
provider,
prefix,
response: {
prefix,
icons: {
[name]: iconData,
},
},
});
// Check if icon has been loaded
expect(iconExists(iconName)).toEqual(false);
// Load icon
loadIcons([iconName], (loaded, missing, pending) => {
// Make sure icon has been loaded
expect(loaded).toMatchObject([
{
provider,
prefix,
name,
},
]);
expect(missing).toMatchObject([]);
expect(pending).toMatchObject([]);
expect(iconExists(iconName)).toEqual(true);
// Render component
const component = render(Icon, { icon: iconName });
const node = component.container.querySelector('svg');
const html = node.parentNode.innerHTML;
// Check HTML
expect(html).toEqual(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
);
done();
});
});
test('rendering icon before loading it', (done) => {
const prefix = nextPrefix();
const name = 'mock-test';
const iconName = `@${provider}:${prefix}:${name}`;
mockAPIData({
provider,
prefix,
response: {
prefix,
icons: {
[name]: iconData,
},
},
delay: (next) => {
// Icon should not have loaded yet
expect(iconExists(iconName)).toEqual(false);
// Send icon data
next();
// Test it again
expect(iconExists(iconName)).toEqual(true);
// Check if state was changed
// Wrapped in double setTimeout() because re-render takes 2 ticks
setTimeout(() => {
setTimeout(() => {
const node = component.container.querySelector('svg');
const html = node.parentNode.innerHTML;
// Check HTML
expect(html).toEqual(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
);
done();
}, 0);
}, 0);
},
});
// Check if icon has been loaded
expect(iconExists(iconName)).toEqual(false);
// Render component
const component = render(Icon, { icon: iconName });
// Should render empty icon
const html = component.container.innerHTML;
expect(html).toEqual('<div></div>');
});
test('missing icon', (done) => {
const prefix = nextPrefix();
const name = 'missing-icon';
const iconName = `@${provider}:${prefix}:${name}`;
mockAPIData({
provider,
prefix,
response: 404,
delay: (next) => {
// Icon should not have loaded yet
expect(iconExists(iconName)).toEqual(false);
// Send icon data
next();
// Test it again
expect(iconExists(iconName)).toEqual(false);
// Check if state was changed
// Wrapped in double setTimeout() because re-render takes 2 ticks
setTimeout(() => {
setTimeout(() => {
const html = component.container.innerHTML;
expect(html).toEqual('<div></div>');
done();
}, 0);
}, 0);
},
});
// Check if icon has been loaded
expect(iconExists(iconName)).toEqual(false);
// Render component
const component = render(Icon, { icon: iconName });
// Should render empty icon
const html = component.container.innerHTML;
expect(html).toEqual('<div></div>');
});
});

205
packages/svelte/tests/api/30-changing-props.test.js Normal file
View File

@ -0,0 +1,205 @@
import { render } from '@testing-library/svelte';
import { iconExists } from '../../dist/iconify';
import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
import { provider, nextPrefix } from './load';
import ChangeIcon from './fixtures/ChangeIcon.svelte';
import ChangeProps from './fixtures/ChangeProps.svelte';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 24,
};
const iconData2 = {
body:
'<path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"/>',
width: 32,
height: 32,
};
describe('Rendering icon', () => {
test('changing icon property', (done) => {
const prefix = nextPrefix();
const name = 'changing-prop';
const name2 = 'changing-prop2';
const iconName = `@${provider}:${prefix}:${name}`;
const iconName2 = `@${provider}:${prefix}:${name2}`;
let triggerSwap;
mockAPIData({
provider,
prefix,
response: {
prefix,
icons: {
[name]: iconData,
},
},
delay: (next) => {
// Fixture callback should have been called
expect(typeof triggerSwap).toEqual('function');
// Icon should not have loaded yet
expect(iconExists(iconName)).toEqual(false);
// Send icon data
next();
// Test it again
expect(iconExists(iconName)).toEqual(true);
// Check if state was changed
// Wrapped in double setTimeout() because re-render takes 2 ticks
setTimeout(() => {
setTimeout(() => {
const node = component.container.querySelector('svg');
const html = node.parentNode.innerHTML;
// Check HTML
expect(html).toEqual(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
);
// Change property
triggerSwap();
}, 0);
}, 0);
},
});
mockAPIData({
provider,
prefix,
response: {
prefix,
icons: {
[name2]: iconData2,
},
},
delay: (next) => {
// Icon should not have loaded yet
expect(iconExists(iconName2)).toEqual(false);
// Send icon data
next();
// Test it again
expect(iconExists(iconName2)).toEqual(true);
// Check if state was changed
// Wrapped in double setTimeout() because re-render takes 2 ticks
setTimeout(() => {
setTimeout(() => {
const node = component.container.querySelector('svg');
const html = node.parentNode.innerHTML;
// Check HTML
expect(html).toEqual(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"></path></svg>'
);
done();
}, 0);
}, 0);
},
});
// Check if icon has been loaded
expect(iconExists(iconName)).toEqual(false);
// Render component
const component = render(ChangeIcon, {
icon1: iconName,
icon2: iconName2,
expose: (swap) => {
triggerSwap = swap;
},
});
// Should render empty icon
const html = component.container.innerHTML;
expect(html).toEqual('<div></div>');
});
test('changing multiple properties', (done) => {
const prefix = nextPrefix();
const name = 'multiple-props';
const iconName = `@${provider}:${prefix}:${name}`;
let triggerSwap;
mockAPIData({
provider,
prefix,
response: {
prefix,
icons: {
[name]: iconData,
},
},
delay: (next) => {
// Fixture callback should have been called
expect(typeof triggerSwap).toEqual('function');
// Icon should not have loaded yet
expect(iconExists(iconName)).toEqual(false);
// Send icon data
next();
// Test it again
expect(iconExists(iconName)).toEqual(true);
// Check if state was changed
// Wrapped in double setTimeout() because re-render takes 2 ticks
setTimeout(() => {
setTimeout(() => {
const node = component.container.querySelector('svg');
const html = node.parentNode.innerHTML;
// Check HTML
expect(html).toEqual(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
);
// Add horizontal flip and style
triggerSwap();
// Wait for component to re-render
setTimeout(() => {
setTimeout(() => {
// Check HTML again
const node = component.container.querySelector(
'svg'
);
const html = node.parentNode.innerHTML;
expect(html).toEqual(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g transform="translate(24 0) scale(-1 1)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
);
done();
}, 0);
}, 0);
}, 0);
}, 0);
},
});
// Check if icon has been loaded
expect(iconExists(iconName)).toEqual(false);
// Render component
const component = render(ChangeProps, {
icon: iconName,
expose: (swap) => {
triggerSwap = swap;
},
});
// Should render empty icon
const html = component.container.innerHTML;
expect(html).toEqual('<div></div>');
});
});

18
packages/svelte/tests/api/fixtures/ChangeIcon.svelte Normal file
View File

@ -0,0 +1,18 @@
<script>
import { Icon } from '../../../dist/iconify';
export let icon1;
export let icon2;
export let expose;
let icon = icon1;
$: {
expose(swap);
}
function swap() {
icon = icon2;
}
</script>
<Icon icon={icon} />

22
packages/svelte/tests/api/fixtures/ChangeProps.svelte Normal file
View File

@ -0,0 +1,22 @@
<script>
import { Icon } from '../../../dist/iconify';
export let icon;
export let expose;
const props = {
icon
};
$: {
expose(swap);
}
function swap() {
props.hFlip = true;
props.style = {
color: 'red'
}
}
</script>
<Icon {...props} />

15
packages/svelte/tests/api/load.js Normal file
View File

@ -0,0 +1,15 @@
import { _api, addAPIProvider } from '../../dist/iconify';
import { mockAPIModule } from '@iconify/core/lib/api/modules/mock';
// API provider for tests
export const provider = 'mock-api';
// Set API module for provider
addAPIProvider(provider, {
resources: ['http://localhost'],
});
_api.setAPIModule(provider, mockAPIModule);
// Prefix
let counter = 0;
export const nextPrefix = () => 'mock-' + counter++;

32
packages/svelte/tests/iconify/10-basic.test.js Normal file
View File

@ -0,0 +1,32 @@
import { render } from '@testing-library/svelte';
import { Icon } from '../../dist/iconify';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 24,
};
describe('Creating component', () => {
test('basic icon', () => {
const component = render(Icon, { icon: iconData });
const node = component.container.querySelector('svg');
const html = node.parentNode.innerHTML;
// Check HTML
expect(html).toEqual(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
);
// Make sure getAttribute() works, used in other tests
expect(node.getAttribute('xmlns')).toEqual(
'http://www.w3.org/2000/svg'
);
expect(node.getAttribute('aria-hidden')).toEqual('true');
// Make sure style exists
const style = node.style;
expect(typeof style).toEqual('object');
});
});

12
packages/svelte/tests/iconify/10-empty.test.js Normal file
View File

@ -0,0 +1,12 @@
import { render } from '@testing-library/svelte';
import { Icon } from '../../dist/iconify';
describe('Empty icon', () => {
test('basic test', () => {
const component = render(Icon, {});
const html = component.container.innerHTML;
// Empty container div
expect(html).toEqual('<div></div>');
});
});

79
packages/svelte/tests/iconify/20-attributes.test.js Normal file
View File

@ -0,0 +1,79 @@
import { render } from '@testing-library/svelte';
import { Icon } from '../../dist/iconify';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 24,
};
describe('Padding attributes', () => {
test('title', () => {
const component = render(Icon, { icon: iconData, title: 'Icon!' });
const node = component.container.querySelector('svg');
expect(node.getAttribute('title')).toEqual('Icon!');
});
test('aria-hidden', () => {
// dashes, string value
const component = render(Icon, {
'icon': iconData,
'aria-hidden': 'false',
});
const node = component.container.querySelector('svg');
expect(node.getAttribute('aria-hidden')).toEqual(null);
});
test('ariaHidden', () => {
// camelCase, boolean value
const component = render(Icon, {
icon: iconData,
ariaHidden: false,
});
const node = component.container.querySelector('svg');
expect(node.getAttribute('aria-hidden')).toEqual(null);
});
test('style', () => {
const component = render(Icon, {
icon: iconData,
style: 'vertical-align: 0; color: red;',
});
const node = component.container.querySelector('svg');
expect(node.style.verticalAlign).toEqual('0');
expect(node.style.color).toEqual('red');
});
test('color', () => {
const component = render(Icon, {
icon: iconData,
color: 'red',
});
const node = component.container.querySelector('svg');
expect(node.style.color).toEqual('red');
});
test('color with style', () => {
const component = render(Icon, {
icon: iconData,
color: 'red',
style: 'color: green;',
});
const node = component.container.querySelector('svg');
expect(node.style.color).toEqual('red');
});
test('attributes that cannot change', () => {
const component = render(Icon, {
icon: iconData,
viewBox: '0 0 0 0',
preserveAspectRatio: 'none',
});
const node = component.container.querySelector('svg');
expect(node.getAttribute('viewBox')).toEqual('0 0 24 24');
expect(node.getAttribute('preserveAspectRatio')).toEqual(
'xMidYMid meet'
);
});
});

40
packages/svelte/tests/iconify/20-dimensions.test.js Normal file
View File

@ -0,0 +1,40 @@
import { render } from '@testing-library/svelte';
import { Icon } from '../../dist/iconify';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 24,
};
describe('Dimensions', () => {
test('height', () => {
const component = render(Icon, { icon: iconData, height: '48' });
const node = component.container.querySelector('svg');
expect(node.getAttribute('height')).toEqual('48');
expect(node.getAttribute('width')).toEqual('48');
});
test('width and height', () => {
const component = render(Icon, {
icon: iconData,
// Mixing numbers and strings
width: 32,
height: '48',
});
const node = component.container.querySelector('svg');
expect(node.getAttribute('height')).toEqual('48');
expect(node.getAttribute('width')).toEqual('32');
});
test('auto', () => {
const component = render(Icon, {
icon: iconData,
height: 'auto',
});
const node = component.container.querySelector('svg');
expect(node.getAttribute('height')).toEqual('24');
expect(node.getAttribute('width')).toEqual('24');
});
});

29
packages/svelte/tests/iconify/20-ids.test.js Normal file
View File

@ -0,0 +1,29 @@
import { render } from '@testing-library/svelte';
import { Icon } from '../../dist/iconify';
const iconDataWithID = {
body:
'<defs><path id="ssvg-id-1st-place-medala" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medald" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medalf" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medalh" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medalj" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medalm" d="M.93.01h120.55v58.36H.93z"/><path d="M52.849 78.373v-3.908c3.681-.359 6.25-.958 7.703-1.798c1.454-.84 2.54-2.828 3.257-5.962h4.021v40.385h-5.437V78.373h-9.544z" id="ssvg-id-1st-place-medalp"/><linearGradient x1="49.998%" y1="-13.249%" x2="49.998%" y2="90.002%" id="ssvg-id-1st-place-medalb"><stop stop-color="#1E88E5" offset="13.55%"/><stop stop-color="#1565C0" offset="93.8%"/></linearGradient><linearGradient x1="26.648%" y1="2.735%" x2="77.654%" y2="105.978%" id="ssvg-id-1st-place-medalk"><stop stop-color="#64B5F6" offset="13.55%"/><stop stop-color="#2196F3" offset="94.62%"/></linearGradient><radialGradient cx="22.368%" cy="12.5%" fx="22.368%" fy="12.5%" r="95.496%" id="ssvg-id-1st-place-medalo"><stop stop-color="#FFEB3B" offset="29.72%"/><stop stop-color="#FBC02D" offset="95.44%"/></radialGradient></defs><g fill="none" fill-rule="evenodd"><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medalc" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medala"/></mask><path fill="url(#ssvg-id-1st-place-medalb)" fill-rule="nonzero" mask="url(#ssvg-id-1st-place-medalc)" d="M45.44 42.18h31.43l30-48.43H75.44z"/></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medale" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medald"/></mask><g opacity=".2" mask="url(#ssvg-id-1st-place-medale)" fill="#424242" fill-rule="nonzero"><path d="M101.23-3L75.2 39H50.85L77.11-3h24.12zm5.64-3H75.44l-30 48h31.42l30.01-48z"/></g></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medalg" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medalf"/></mask><path d="M79 30H43c-4.42 0-8 3.58-8 8v16.04c0 2.17 1.8 3.95 4.02 3.96h.01c2.23-.01 4.97-1.75 4.97-3.96V44c0-1.1.9-2 2-2h30c1.1 0 2 .9 2 2v9.93c0 1.98 2.35 3.68 4.22 4.04c.26.05.52.08.78.08c2.21 0 4-1.79 4-4V38c0-4.42-3.58-8-8-8z" fill="#FDD835" fill-rule="nonzero" mask="url(#ssvg-id-1st-place-medalg)"/></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medali" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medalh"/></mask><g opacity=".2" mask="url(#ssvg-id-1st-place-medali)" fill="#424242" fill-rule="nonzero"><path d="M79 32c3.31 0 6 2.69 6 6v16.04A2.006 2.006 0 0 1 82.59 56c-1.18-.23-2.59-1.35-2.59-2.07V44c0-2.21-1.79-4-4-4H46c-2.21 0-4 1.79-4 4v10.04c0 .88-1.64 1.96-2.97 1.96c-1.12-.01-2.03-.89-2.03-1.96V38c0-3.31 2.69-6 6-6h36zm0-2H43c-4.42 0-8 3.58-8 8v16.04c0 2.17 1.8 3.95 4.02 3.96h.01c2.23-.01 4.97-1.75 4.97-3.96V44c0-1.1.9-2 2-2h30c1.1 0 2 .9 2 2v9.93c0 1.98 2.35 3.68 4.22 4.04c.26.05.52.08.78.08c2.21 0 4-1.79 4-4V38c0-4.42-3.58-8-8-8z"/></g></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medall" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medalj"/></mask><path fill="url(#ssvg-id-1st-place-medalk)" fill-rule="nonzero" mask="url(#ssvg-id-1st-place-medall)" d="M76.87 42.18H45.44l-30-48.43h31.43z"/></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medaln" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medalm"/></mask><g opacity=".2" mask="url(#ssvg-id-1st-place-medaln)" fill="#424242" fill-rule="nonzero"><path d="M45.1-3l26.35 42H47.1L20.86-3H45.1zm1.77-3H15.44l30 48h31.42L46.87-6z"/></g></g><circle fill="url(#ssvg-id-1st-place-medalo)" fill-rule="nonzero" cx="64" cy="86" r="38"/><path d="M64 51c19.3 0 35 15.7 35 35s-15.7 35-35 35s-35-15.7-35-35s15.7-35 35-35zm0-3c-20.99 0-38 17.01-38 38s17.01 38 38 38s38-17.01 38-38s-17.01-38-38-38z" opacity=".2" fill="#424242" fill-rule="nonzero"/><path d="M47.3 63.59h33.4v44.4H47.3z"/><use fill="#000" xlink:href="#ssvg-id-1st-place-medalp"/><use fill="#FFA000" xlink:href="#ssvg-id-1st-place-medalp"/></g>',
width: 128,
height: 128,
};
describe('Replacing IDs', () => {
test('default behavior', () => {
const component = render(Icon, { icon: iconDataWithID });
const node = component.container.querySelector('svg');
// Check that default id doesn't exist
const path = node.getElementById('ssvg-id-1st-place-medala');
expect(path).toBeNull();
});
test('custom generator', () => {
const component = render(Icon, { icon: iconDataWithID, id: 'test' });
const node = component.container.querySelector('svg');
// Check that ID 'testa' exists
const path = node.getElementById('test-0');
expect(path).toBeTruthy();
});
});

44
packages/svelte/tests/iconify/20-inline.test.js Normal file
View File

@ -0,0 +1,44 @@
import { render } from '@testing-library/svelte';
import { Icon } from '../../dist/iconify';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 24,
};
describe('Inline attribute', () => {
test('boolean true', () => {
const component = render(Icon, { icon: iconData, inline: true });
const node = component.container.querySelector('svg');
const style = node.style;
expect(style.verticalAlign).toEqual('-0.125em');
});
test('string true', () => {
const component = render(Icon, { icon: iconData, inline: 'true' });
const node = component.container.querySelector('svg');
const style = node.style;
expect(style.verticalAlign).toEqual('-0.125em');
});
test('false', () => {
const component = render(Icon, { icon: iconData, inline: false });
const node = component.container.querySelector('svg');
const style = node.style;
expect(style.verticalAlign).toEqual('');
});
test('false string', () => {
// "false" = true
const component = render(Icon, { icon: iconData, inline: 'false' });
const node = component.container.querySelector('svg');
const style = node.style;
expect(style.verticalAlign).toEqual('-0.125em');
});
});

159
packages/svelte/tests/iconify/20-transformations.test.js Normal file
View File

@ -0,0 +1,159 @@
import { render } from '@testing-library/svelte';
import { Icon } from '../../dist/iconify';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 32,
};
describe('Rotation', () => {
test('number', () => {
const component = render(Icon, { icon: iconData, rotate: 1 });
const node = component.container.querySelector('svg');
// Find first child node
const child = node.childNodes[0];
expect(child.tagName).toEqual('g');
expect(child.getAttribute('transform')).toEqual('rotate(90 16 16)');
});
test('string', () => {
const component = render(Icon, { icon: iconData, rotate: '180deg' });
const node = component.container.querySelector('svg');
// Find first child node
const child = node.childNodes[0];
expect(child.tagName).toEqual('g');
expect(child.getAttribute('transform')).toEqual('rotate(180 12 16)');
});
});
describe('Flip', () => {
test('boolean', () => {
const component = render(Icon, { icon: iconData, hFlip: true });
const node = component.container.querySelector('svg');
// Find first child node
const child = node.childNodes[0];
expect(child.tagName).toEqual('g');
expect(child.getAttribute('transform')).toEqual(
'translate(24 0) scale(-1 1)'
);
});
test('string', () => {
const component = render(Icon, { icon: iconData, flip: 'vertical' });
const node = component.container.querySelector('svg');
// Find first child node
const child = node.childNodes[0];
expect(child.tagName).toEqual('g');
expect(child.getAttribute('transform')).toEqual(
'translate(0 32) scale(1 -1)'
);
});
test('string and boolean', () => {
const component = render(Icon, {
icon: iconData,
flip: 'horizontal',
vFlip: true,
});
const node = component.container.querySelector('svg');
// Find first child node
const child = node.childNodes[0];
expect(child.tagName).toEqual('g');
// horizontal + vertical = 180deg rotation
expect(child.getAttribute('transform')).toEqual('rotate(180 12 16)');
});
test('string for boolean attribute', () => {
const component = render(Icon, {
icon: iconData,
hFlip: 'true',
});
const node = component.container.querySelector('svg');
// Find first child node
const child = node.childNodes[0];
expect(child.tagName).toEqual('g');
expect(child.getAttribute('transform')).toEqual(
'translate(24 0) scale(-1 1)'
);
});
test('shorthand and boolean', () => {
// 'flip' is processed after 'hFlip', overwriting value
const component = render(Icon, {
icon: iconData,
flip: 'horizontal',
hFlip: false,
});
const node = component.container.querySelector('svg');
// Find first child node
const child = node.childNodes[0];
expect(child.tagName).toEqual('g');
expect(child.getAttribute('transform')).toEqual(
'translate(24 0) scale(-1 1)'
);
});
test('shorthand and boolean as string', () => {
// 'flip' is processed after 'hFlip', overwriting value
const component = render(Icon, {
icon: iconData,
flip: 'vertical',
hFlip: true,
});
const node = component.container.querySelector('svg');
// Find first child node
const child = node.childNodes[0];
expect(child.tagName).toEqual('g');
expect(child.getAttribute('transform')).toEqual('rotate(180 12 16)');
});
test('wrong case', () => {
// 'flip' is processed after 'hFlip', overwriting value
const component = render(Icon, {
icon: iconData,
vflip: true,
});
const node = component.container.querySelector('svg');
// Find first child node
const child = node.childNodes[0];
expect(child.tagName).toEqual('path');
});
});
describe('Alignment and slice', () => {
test('vAlign and slice', () => {
const component = render(Icon, {
icon: iconData,
vAlign: 'top',
slice: true,
});
const node = component.container.querySelector('svg');
expect(node.getAttribute('preserveAspectRatio')).toEqual(
'xMidYMin slice'
);
});
test('string', () => {
const component = render(Icon, {
icon: iconData,
align: 'left bottom',
});
const node = component.container.querySelector('svg');
expect(node.getAttribute('preserveAspectRatio')).toEqual(
'xMinYMax meet'
);
});
});

2
packages/svelte/tests/offline/10-empty.test.js
View File

@ -1,5 +1,5 @@
import { render } from '@testing-library/svelte'; import { render } from '@testing-library/svelte';
import { Icon } from '../../dist/offline'; import { Icon } from '../../dist/iconify';
describe('Empty icon', () => { describe('Empty icon', () => {
test('basic test', () => { test('basic test', () => {