mirror of
https://github.com/iconify/iconify.git
synced 2024-09-19 08:49:02 +00:00
Svelte component with API support
This commit is contained in:
Vjacheslav Trushkin
parent
ce4385fb4f
commit
e9dc3803e4
@ -58,7 +58,7 @@ There are several Iconify implementations included in this repository:
|
||||
| [SVG Framework](./packages/iconify/) | HTML | + | + |
|
||||
| [React component](./packages/react/) | React | + | + |
|
||||
| [Vue component](./packages/vue/) | Vue | - | + |
|
||||
| [Svelte component](./packages/svelte/) | Svelte/Sapper | - | + |
|
||||
| [Svelte component](./packages/svelte/) | Svelte/Sapper | + | + |
|
||||
|
||||
Other packages:
|
||||
|
||||
|
||||
459
packages/svelte-demo/package-lock.json
generated
459
packages/svelte-demo/package-lock.json
generated
@ -11,8 +11,8 @@
|
||||
"sirv-cli": "^1.0.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-icons/bx": "^1.0.2",
|
||||
"@iconify-icons/dashicons": "^1.0.0",
|
||||
"@iconify-icons/mdi-light": "^1.1.0",
|
||||
"@iconify-icons/uil": "^1.1.1",
|
||||
"@iconify/svelte": "^1.0.3",
|
||||
"@rollup/plugin-commonjs": "^16.0.0",
|
||||
"@rollup/plugin-node-resolve": "^10.0.0",
|
||||
@ -24,79 +24,53 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
|
||||
"integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
|
||||
"version": "7.12.13",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
|
||||
"integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/highlight": "^7.10.4"
|
||||
"@babel/highlight": "^7.12.13"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/helper-validator-identifier": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
|
||||
"integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==",
|
||||
"version": "7.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
|
||||
"integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@babel/highlight": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
|
||||
"integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
|
||||
"version": "7.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz",
|
||||
"integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/helper-validator-identifier": "^7.10.4",
|
||||
"@babel/helper-validator-identifier": "^7.14.0",
|
||||
"chalk": "^2.0.0",
|
||||
"js-tokens": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@cyberalien/redundancy": {
|
||||
"node_modules/@iconify-icons/mdi-light": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@cyberalien/redundancy/-/redundancy-1.1.0.tgz",
|
||||
"integrity": "sha512-+ZvuwtVXzyxX1CWnP+X5XgDelseU9KSYgmPu3/DSraR7Qyi/vLZwuRRX0sYO24M/gZaChNXRBEK6RHRe3uBndw==",
|
||||
"resolved": "https://registry.npmjs.org/@iconify-icons/mdi-light/-/mdi-light-1.1.0.tgz",
|
||||
"integrity": "sha512-pV69tNZO9u0qZFVcy5VFmg7dL+Yq3g8DrkCIMGnW3ukgcYDZG2M2oAKeIxHUCIE/11khAsYlBdrUFglTIcbDxg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@iconify-icons/bx": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@iconify-icons/bx/-/bx-1.1.0.tgz",
|
||||
"integrity": "sha512-JlCsrgpp4vujb7tDaZtJ/OfeTnsSFyDFSauNO+2ilsHviCb/u3VXbLjdIoDIR5ISGMr0a+W/f0YNOHn3zUqChA==",
|
||||
"node_modules/@iconify-icons/uil": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@iconify-icons/uil/-/uil-1.1.1.tgz",
|
||||
"integrity": "sha512-HdSyOZzEPwh2549jpL2YrLkuR4aYRRF47gDRuZcSRRFdgbkmlpGDSSQ1G1PR9E/a3Igg7j9XdIK9HffTFJP0Lg==",
|
||||
"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": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-1.0.3.tgz",
|
||||
"integrity": "sha512-Exjwm+LDOmueoVRd8hyG7s+8Q/jTh3tFOaaHTy/TCI2/OTkZe02fkHAUeNtlwnr867X6h3dC2ZIt0Ie4epaGhg==",
|
||||
"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==",
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-1.0.4.tgz",
|
||||
"integrity": "sha512-Bjr4UMJUsMCra1lpMYIijLZJustalA7FuBldV9B7IsaeKGZ06rcmgeVUYJqrKJ/0bhRg/chcKasLjUlFqWIoMQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@polka/url": {
|
||||
"version": "1.0.0-next.11",
|
||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.11.tgz",
|
||||
"integrity": "sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA=="
|
||||
"version": "1.0.0-next.12",
|
||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.12.tgz",
|
||||
"integrity": "sha512-6RglhutqrGFMO1MNUXp95RBuYIuc8wTnMAV5MUhLmjTOy78ncwOw7RgeQ/HeymkKXRhZd0s2DNrM1rL7unk3MQ=="
|
||||
},
|
||||
"node_modules/@rollup/plugin-commonjs": {
|
||||
"version": "16.0.0",
|
||||
@ -169,9 +143,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "14.14.13",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.13.tgz",
|
||||
"integrity": "sha512-vbxr0VZ8exFMMAjCW8rJwaya0dMCDyYW2ZRdTyjtrCvJoENMpdUHOT/eTzvgyA5ZnqRZ/sI0NwqAxNHKYokLJQ==",
|
||||
"version": "15.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-15.0.1.tgz",
|
||||
"integrity": "sha512-TMkXt0Ck1y0KKsGr9gJtWGjttxlZnnvDtphxUOSd0bfaR6Q1jle+sPvrzNR1urqYTWMinoKvjKfXUGsumaO1PA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/resolve": {
|
||||
@ -196,9 +170,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/anymatch": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
|
||||
"integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
|
||||
"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"normalize-path": "^3.0.0",
|
||||
@ -208,22 +182,16 @@
|
||||
"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": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
||||
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/binary-extensions": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz",
|
||||
"integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
|
||||
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
@ -258,12 +226,15 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/builtin-modules": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz",
|
||||
"integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==",
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz",
|
||||
"integrity": "sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/chalk": {
|
||||
@ -281,14 +252,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/chokidar": {
|
||||
"version": "3.4.3",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz",
|
||||
"integrity": "sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==",
|
||||
"version": "3.5.1",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
|
||||
"integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"anymatch": "~3.1.1",
|
||||
"braces": "~3.0.2",
|
||||
"fsevents": "~2.1.2",
|
||||
"glob-parent": "~5.1.0",
|
||||
"is-binary-path": "~2.1.0",
|
||||
"is-glob": "~4.0.1",
|
||||
@ -299,7 +269,7 @@
|
||||
"node": ">= 8.10.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.1.2"
|
||||
"fsevents": "~2.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
@ -386,9 +356,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
|
||||
"integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"optional": true,
|
||||
@ -434,9 +404,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/glob-parent": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
|
||||
"integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
|
||||
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-glob": "^4.0.1"
|
||||
@ -495,9 +465,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/is-core-module": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
|
||||
"integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.3.0.tgz",
|
||||
"integrity": "sha512-xSphU2KG9867tsYdLD4RWQ1VqdFl4HTO9Thf3I/3dLEfr0dbPTWKsuCKrgqMljg4nPE+Gq0VCnzT3gr0CyBmsw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"has": "^1.0.3"
|
||||
@ -601,15 +571,15 @@
|
||||
}
|
||||
},
|
||||
"node_modules/livereload": {
|
||||
"version": "0.9.1",
|
||||
"resolved": "https://registry.npmjs.org/livereload/-/livereload-0.9.1.tgz",
|
||||
"integrity": "sha512-9g7sua11kkyZNo2hLRCG3LuZZwqexoyEyecSlV8cAsfAVVCZqLzVir6XDqmH0r+Vzgnd5LrdHDMyjtFnJQLAYw==",
|
||||
"version": "0.9.3",
|
||||
"resolved": "https://registry.npmjs.org/livereload/-/livereload-0.9.3.tgz",
|
||||
"integrity": "sha512-q7Z71n3i4X0R9xthAryBdNGVGAO2R5X+/xXpmKeuPMrteg+W2U8VusTKV3YiJbXZwKsOlFlHe+go6uSNjfxrZw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"chokidar": "^3.3.0",
|
||||
"livereload-js": "^3.1.0",
|
||||
"chokidar": "^3.5.0",
|
||||
"livereload-js": "^3.3.1",
|
||||
"opts": ">= 1.2.0",
|
||||
"ws": "^6.2.1"
|
||||
"ws": "^7.4.3"
|
||||
},
|
||||
"bin": {
|
||||
"livereload": "bin/livereload.js"
|
||||
@ -619,9 +589,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/livereload-js": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-3.3.1.tgz",
|
||||
"integrity": "sha512-CBu1gTEfzVhlOK1WASKAAJ9Qx1fHECTq0SUB67sfxwQssopTyvzqTlgl+c0h9pZ6V+Fzd2rc510ppuNusg9teQ==",
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-3.3.2.tgz",
|
||||
"integrity": "sha512-w677WnINxFkuixAoUEXOStewzLYGI76XVag+0JWMMEyjJQKs0ibWZMxkTlB96Lm3EjZ7IeOxVziBEbtxVQqQZA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/local-access": {
|
||||
@ -648,9 +618,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/mime": {
|
||||
"version": "2.4.6",
|
||||
"resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz",
|
||||
"integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==",
|
||||
"version": "2.5.2",
|
||||
"resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
|
||||
"integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==",
|
||||
"bin": {
|
||||
"mime": "cli.js"
|
||||
},
|
||||
@ -718,9 +688,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/picomatch": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
|
||||
"integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz",
|
||||
"integrity": "sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8.6"
|
||||
@ -757,12 +727,12 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.19.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
|
||||
"integrity": "sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==",
|
||||
"version": "1.20.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
|
||||
"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-core-module": "^2.1.0",
|
||||
"is-core-module": "^2.2.0",
|
||||
"path-parse": "^1.0.6"
|
||||
},
|
||||
"funding": {
|
||||
@ -770,13 +740,10 @@
|
||||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "2.34.2",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.34.2.tgz",
|
||||
"integrity": "sha512-mvtQLqu3cNeoctS+kZ09iOPxrc1P1/Bt1z15enuQ5feyKOdM3MJAVFjjsygurDpSWn530xB4AlA83TWIzRstXA==",
|
||||
"version": "2.46.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.46.0.tgz",
|
||||
"integrity": "sha512-qPGoUBNl+Z8uNu0z7pD3WPTABWRbcOwIrO/5ccDJzmrtzn0LVf6Lj91+L5CcWhXl6iWf23FQ6m8Jkl2CmN1O7Q==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"fsevents": "~2.1.2"
|
||||
},
|
||||
"bin": {
|
||||
"rollup": "dist/bin/rollup"
|
||||
},
|
||||
@ -784,7 +751,7 @@
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.1.2"
|
||||
"fsevents": "~2.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup-plugin-livereload": {
|
||||
@ -893,9 +860,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sirv": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.10.tgz",
|
||||
"integrity": "sha512-H5EZCoZaggEUQy8ocKsF7WAToGuZhjJlLvM3XOef46CbdIgbNeQ1p32N1PCuCjkVYwrAVOSMacN6CXXgIzuspg==",
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.11.tgz",
|
||||
"integrity": "sha512-SR36i3/LSWja7AJNRBz4fF/Xjpn7lQFI30tZ434dIy+bitLYSP+ZEenHg36i23V2SGEz+kqjksg0uOGZ5LPiqg==",
|
||||
"dependencies": {
|
||||
"@polka/url": "^1.0.0-next.9",
|
||||
"mime": "^2.3.1",
|
||||
@ -906,9 +873,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sirv-cli": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-1.0.10.tgz",
|
||||
"integrity": "sha512-8mLTRkvzpZXMyUZJ1whf84YHN/mm2r2+j5sU1ZYr5n2jA8VkFItNPk53oysOo+0QxBVp9aUjggkAsQp1d7L3OQ==",
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-1.0.11.tgz",
|
||||
"integrity": "sha512-L8NILoRSBd38VcfFcERYCaVCnWPBLo9G6u/a37UJ8Ysv4DfjizMbFBcM+SswNnndJienhR6qy8KFuAEaeL4g8Q==",
|
||||
"dependencies": {
|
||||
"console-clear": "^1.1.0",
|
||||
"get-port": "^3.2.0",
|
||||
@ -916,7 +883,7 @@
|
||||
"local-access": "^1.0.1",
|
||||
"sade": "^1.6.0",
|
||||
"semiver": "^1.0.0",
|
||||
"sirv": "^1.0.10",
|
||||
"sirv": "^1.0.11",
|
||||
"tinydate": "^1.0.0"
|
||||
},
|
||||
"bin": {
|
||||
@ -973,18 +940,18 @@
|
||||
}
|
||||
},
|
||||
"node_modules/svelte": {
|
||||
"version": "3.31.0",
|
||||
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.31.0.tgz",
|
||||
"integrity": "sha512-r+n8UJkDqoQm1b+3tA3Lh6mHXKpcfOSOuEuIo5gE2W9wQYi64RYX/qE6CZBDDsP/H4M+N426JwY7XGH4xASvGQ==",
|
||||
"version": "3.38.1",
|
||||
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.38.1.tgz",
|
||||
"integrity": "sha512-N3XLAyfzqrFxwRLevBeW7Dke9ZlHRVGSIed5abo4Drvj+zvd2OyWpFa1x4nQUc8Lnvt4Kcn8/5le1peRDybNqg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/terser": {
|
||||
"version": "5.5.1",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.5.1.tgz",
|
||||
"integrity": "sha512-6VGWZNVP2KTUcltUQJ25TtNjx/XgdDsBDKGt8nN0MpydU36LmbPPcMBd2kmtZNNGVVDLg44k7GKeHHj+4zPIBQ==",
|
||||
"version": "5.7.0",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.7.0.tgz",
|
||||
"integrity": "sha512-HP5/9hp2UaZt5fYkuhNBR8YyRcT8juw8+uFbAme53iN9hblvKnLUTKkmwJG6ocWpIKf8UK4DoeWG4ty0J6S6/g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"commander": "^2.20.0",
|
||||
@ -1033,90 +1000,76 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
|
||||
"integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
|
||||
"version": "7.4.5",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz",
|
||||
"integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"async-limiter": "~1.0.0"
|
||||
"engines": {
|
||||
"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": {
|
||||
"@babel/code-frame": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
|
||||
"integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
|
||||
"version": "7.12.13",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
|
||||
"integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/highlight": "^7.10.4"
|
||||
"@babel/highlight": "^7.12.13"
|
||||
}
|
||||
},
|
||||
"@babel/helper-validator-identifier": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
|
||||
"integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==",
|
||||
"version": "7.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
|
||||
"integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==",
|
||||
"dev": true
|
||||
},
|
||||
"@babel/highlight": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
|
||||
"integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
|
||||
"version": "7.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz",
|
||||
"integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.10.4",
|
||||
"@babel/helper-validator-identifier": "^7.14.0",
|
||||
"chalk": "^2.0.0",
|
||||
"js-tokens": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"@cyberalien/redundancy": {
|
||||
"@iconify-icons/mdi-light": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@cyberalien/redundancy/-/redundancy-1.1.0.tgz",
|
||||
"integrity": "sha512-+ZvuwtVXzyxX1CWnP+X5XgDelseU9KSYgmPu3/DSraR7Qyi/vLZwuRRX0sYO24M/gZaChNXRBEK6RHRe3uBndw==",
|
||||
"resolved": "https://registry.npmjs.org/@iconify-icons/mdi-light/-/mdi-light-1.1.0.tgz",
|
||||
"integrity": "sha512-pV69tNZO9u0qZFVcy5VFmg7dL+Yq3g8DrkCIMGnW3ukgcYDZG2M2oAKeIxHUCIE/11khAsYlBdrUFglTIcbDxg==",
|
||||
"dev": true
|
||||
},
|
||||
"@iconify-icons/bx": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@iconify-icons/bx/-/bx-1.1.0.tgz",
|
||||
"integrity": "sha512-JlCsrgpp4vujb7tDaZtJ/OfeTnsSFyDFSauNO+2ilsHviCb/u3VXbLjdIoDIR5ISGMr0a+W/f0YNOHn3zUqChA==",
|
||||
"@iconify-icons/uil": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@iconify-icons/uil/-/uil-1.1.1.tgz",
|
||||
"integrity": "sha512-HdSyOZzEPwh2549jpL2YrLkuR4aYRRF47gDRuZcSRRFdgbkmlpGDSSQ1G1PR9E/a3Igg7j9XdIK9HffTFJP0Lg==",
|
||||
"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": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-1.0.3.tgz",
|
||||
"integrity": "sha512-Exjwm+LDOmueoVRd8hyG7s+8Q/jTh3tFOaaHTy/TCI2/OTkZe02fkHAUeNtlwnr867X6h3dC2ZIt0Ie4epaGhg==",
|
||||
"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==",
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-1.0.4.tgz",
|
||||
"integrity": "sha512-Bjr4UMJUsMCra1lpMYIijLZJustalA7FuBldV9B7IsaeKGZ06rcmgeVUYJqrKJ/0bhRg/chcKasLjUlFqWIoMQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@polka/url": {
|
||||
"version": "1.0.0-next.11",
|
||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.11.tgz",
|
||||
"integrity": "sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA=="
|
||||
"version": "1.0.0-next.12",
|
||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.12.tgz",
|
||||
"integrity": "sha512-6RglhutqrGFMO1MNUXp95RBuYIuc8wTnMAV5MUhLmjTOy78ncwOw7RgeQ/HeymkKXRhZd0s2DNrM1rL7unk3MQ=="
|
||||
},
|
||||
"@rollup/plugin-commonjs": {
|
||||
"version": "16.0.0",
|
||||
@ -1173,9 +1126,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "14.14.13",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.13.tgz",
|
||||
"integrity": "sha512-vbxr0VZ8exFMMAjCW8rJwaya0dMCDyYW2ZRdTyjtrCvJoENMpdUHOT/eTzvgyA5ZnqRZ/sI0NwqAxNHKYokLJQ==",
|
||||
"version": "15.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-15.0.1.tgz",
|
||||
"integrity": "sha512-TMkXt0Ck1y0KKsGr9gJtWGjttxlZnnvDtphxUOSd0bfaR6Q1jle+sPvrzNR1urqYTWMinoKvjKfXUGsumaO1PA==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/resolve": {
|
||||
@ -1197,31 +1150,25 @@
|
||||
}
|
||||
},
|
||||
"anymatch": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
|
||||
"integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
|
||||
"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"normalize-path": "^3.0.0",
|
||||
"picomatch": "^2.0.4"
|
||||
}
|
||||
},
|
||||
"async-limiter": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
|
||||
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
|
||||
"dev": true
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
||||
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
|
||||
"dev": true
|
||||
},
|
||||
"binary-extensions": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz",
|
||||
"integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
|
||||
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
|
||||
"dev": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
@ -1250,9 +1197,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"builtin-modules": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz",
|
||||
"integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==",
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz",
|
||||
"integrity": "sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==",
|
||||
"dev": true
|
||||
},
|
||||
"chalk": {
|
||||
@ -1267,14 +1214,14 @@
|
||||
}
|
||||
},
|
||||
"chokidar": {
|
||||
"version": "3.4.3",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz",
|
||||
"integrity": "sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==",
|
||||
"version": "3.5.1",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
|
||||
"integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"anymatch": "~3.1.1",
|
||||
"braces": "~3.0.2",
|
||||
"fsevents": "~2.1.2",
|
||||
"fsevents": "~2.3.1",
|
||||
"glob-parent": "~5.1.0",
|
||||
"is-binary-path": "~2.1.0",
|
||||
"is-glob": "~4.0.1",
|
||||
@ -1354,9 +1301,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"fsevents": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
|
||||
"integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
@ -1386,9 +1333,9 @@
|
||||
}
|
||||
},
|
||||
"glob-parent": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
|
||||
"integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
|
||||
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-glob": "^4.0.1"
|
||||
@ -1435,9 +1382,9 @@
|
||||
}
|
||||
},
|
||||
"is-core-module": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
|
||||
"integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.3.0.tgz",
|
||||
"integrity": "sha512-xSphU2KG9867tsYdLD4RWQ1VqdFl4HTO9Thf3I/3dLEfr0dbPTWKsuCKrgqMljg4nPE+Gq0VCnzT3gr0CyBmsw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has": "^1.0.3"
|
||||
@ -1519,21 +1466,21 @@
|
||||
"integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="
|
||||
},
|
||||
"livereload": {
|
||||
"version": "0.9.1",
|
||||
"resolved": "https://registry.npmjs.org/livereload/-/livereload-0.9.1.tgz",
|
||||
"integrity": "sha512-9g7sua11kkyZNo2hLRCG3LuZZwqexoyEyecSlV8cAsfAVVCZqLzVir6XDqmH0r+Vzgnd5LrdHDMyjtFnJQLAYw==",
|
||||
"version": "0.9.3",
|
||||
"resolved": "https://registry.npmjs.org/livereload/-/livereload-0.9.3.tgz",
|
||||
"integrity": "sha512-q7Z71n3i4X0R9xthAryBdNGVGAO2R5X+/xXpmKeuPMrteg+W2U8VusTKV3YiJbXZwKsOlFlHe+go6uSNjfxrZw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chokidar": "^3.3.0",
|
||||
"livereload-js": "^3.1.0",
|
||||
"chokidar": "^3.5.0",
|
||||
"livereload-js": "^3.3.1",
|
||||
"opts": ">= 1.2.0",
|
||||
"ws": "^6.2.1"
|
||||
"ws": "^7.4.3"
|
||||
}
|
||||
},
|
||||
"livereload-js": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-3.3.1.tgz",
|
||||
"integrity": "sha512-CBu1gTEfzVhlOK1WASKAAJ9Qx1fHECTq0SUB67sfxwQssopTyvzqTlgl+c0h9pZ6V+Fzd2rc510ppuNusg9teQ==",
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-3.3.2.tgz",
|
||||
"integrity": "sha512-w677WnINxFkuixAoUEXOStewzLYGI76XVag+0JWMMEyjJQKs0ibWZMxkTlB96Lm3EjZ7IeOxVziBEbtxVQqQZA==",
|
||||
"dev": true
|
||||
},
|
||||
"local-access": {
|
||||
@ -1557,9 +1504,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"mime": {
|
||||
"version": "2.4.6",
|
||||
"resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz",
|
||||
"integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA=="
|
||||
"version": "2.5.2",
|
||||
"resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
|
||||
"integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg=="
|
||||
},
|
||||
"minimatch": {
|
||||
"version": "3.0.4",
|
||||
@ -1609,9 +1556,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"picomatch": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
|
||||
"integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz",
|
||||
"integrity": "sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==",
|
||||
"dev": true
|
||||
},
|
||||
"randombytes": {
|
||||
@ -1639,22 +1586,22 @@
|
||||
"dev": true
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.19.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
|
||||
"integrity": "sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==",
|
||||
"version": "1.20.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
|
||||
"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-core-module": "^2.1.0",
|
||||
"is-core-module": "^2.2.0",
|
||||
"path-parse": "^1.0.6"
|
||||
}
|
||||
},
|
||||
"rollup": {
|
||||
"version": "2.34.2",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.34.2.tgz",
|
||||
"integrity": "sha512-mvtQLqu3cNeoctS+kZ09iOPxrc1P1/Bt1z15enuQ5feyKOdM3MJAVFjjsygurDpSWn530xB4AlA83TWIzRstXA==",
|
||||
"version": "2.46.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.46.0.tgz",
|
||||
"integrity": "sha512-qPGoUBNl+Z8uNu0z7pD3WPTABWRbcOwIrO/5ccDJzmrtzn0LVf6Lj91+L5CcWhXl6iWf23FQ6m8Jkl2CmN1O7Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fsevents": "~2.1.2"
|
||||
"fsevents": "~2.3.1"
|
||||
}
|
||||
},
|
||||
"rollup-plugin-livereload": {
|
||||
@ -1735,9 +1682,9 @@
|
||||
}
|
||||
},
|
||||
"sirv": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.10.tgz",
|
||||
"integrity": "sha512-H5EZCoZaggEUQy8ocKsF7WAToGuZhjJlLvM3XOef46CbdIgbNeQ1p32N1PCuCjkVYwrAVOSMacN6CXXgIzuspg==",
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.11.tgz",
|
||||
"integrity": "sha512-SR36i3/LSWja7AJNRBz4fF/Xjpn7lQFI30tZ434dIy+bitLYSP+ZEenHg36i23V2SGEz+kqjksg0uOGZ5LPiqg==",
|
||||
"requires": {
|
||||
"@polka/url": "^1.0.0-next.9",
|
||||
"mime": "^2.3.1",
|
||||
@ -1745,9 +1692,9 @@
|
||||
}
|
||||
},
|
||||
"sirv-cli": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-1.0.10.tgz",
|
||||
"integrity": "sha512-8mLTRkvzpZXMyUZJ1whf84YHN/mm2r2+j5sU1ZYr5n2jA8VkFItNPk53oysOo+0QxBVp9aUjggkAsQp1d7L3OQ==",
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-1.0.11.tgz",
|
||||
"integrity": "sha512-L8NILoRSBd38VcfFcERYCaVCnWPBLo9G6u/a37UJ8Ysv4DfjizMbFBcM+SswNnndJienhR6qy8KFuAEaeL4g8Q==",
|
||||
"requires": {
|
||||
"console-clear": "^1.1.0",
|
||||
"get-port": "^3.2.0",
|
||||
@ -1755,7 +1702,7 @@
|
||||
"local-access": "^1.0.1",
|
||||
"sade": "^1.6.0",
|
||||
"semiver": "^1.0.0",
|
||||
"sirv": "^1.0.10",
|
||||
"sirv": "^1.0.11",
|
||||
"tinydate": "^1.0.0"
|
||||
}
|
||||
},
|
||||
@ -1799,15 +1746,15 @@
|
||||
}
|
||||
},
|
||||
"svelte": {
|
||||
"version": "3.31.0",
|
||||
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.31.0.tgz",
|
||||
"integrity": "sha512-r+n8UJkDqoQm1b+3tA3Lh6mHXKpcfOSOuEuIo5gE2W9wQYi64RYX/qE6CZBDDsP/H4M+N426JwY7XGH4xASvGQ==",
|
||||
"version": "3.38.1",
|
||||
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.38.1.tgz",
|
||||
"integrity": "sha512-N3XLAyfzqrFxwRLevBeW7Dke9ZlHRVGSIed5abo4Drvj+zvd2OyWpFa1x4nQUc8Lnvt4Kcn8/5le1peRDybNqg==",
|
||||
"dev": true
|
||||
},
|
||||
"terser": {
|
||||
"version": "5.5.1",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.5.1.tgz",
|
||||
"integrity": "sha512-6VGWZNVP2KTUcltUQJ25TtNjx/XgdDsBDKGt8nN0MpydU36LmbPPcMBd2kmtZNNGVVDLg44k7GKeHHj+4zPIBQ==",
|
||||
"version": "5.7.0",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.7.0.tgz",
|
||||
"integrity": "sha512-HP5/9hp2UaZt5fYkuhNBR8YyRcT8juw8+uFbAme53iN9hblvKnLUTKkmwJG6ocWpIKf8UK4DoeWG4ty0J6S6/g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"commander": "^2.20.0",
|
||||
@ -1841,13 +1788,11 @@
|
||||
"dev": true
|
||||
},
|
||||
"ws": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
|
||||
"integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
|
||||
"version": "7.4.5",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz",
|
||||
"integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"async-limiter": "~1.0.0"
|
||||
}
|
||||
"requires": {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
"start": "sirv public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-icons/bx": "^1.0.2",
|
||||
"@iconify-icons/dashicons": "^1.0.0",
|
||||
"@iconify-icons/mdi-light": "^1.1.0",
|
||||
"@iconify-icons/uil": "^1.1.1",
|
||||
"@iconify/svelte": "^1.0.3",
|
||||
"@rollup/plugin-commonjs": "^16.0.0",
|
||||
"@rollup/plugin-node-resolve": "^10.0.0",
|
||||
|
||||
@ -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;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 8px;
|
||||
padding: 16px;
|
||||
padding-left: 48px;
|
||||
background: #ba3329;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
.alert + div {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(0,100,200);
|
||||
.alert svg {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
font-size: 24px;
|
||||
line-height: 1em;
|
||||
margin: -0.5em 0 0;
|
||||
}
|
||||
|
||||
/* Checkbox component */
|
||||
.checkbox-container {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
cursor: pointer;
|
||||
/* color: #1769aa; */
|
||||
color: #626262;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
.checkbox:hover {
|
||||
color: #ba3329;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: rgb(0,80,160);
|
||||
.checkbox svg {
|
||||
margin-right: 4px;
|
||||
color: #afafaf;
|
||||
font-size: 24px;
|
||||
line-height: 1em;
|
||||
vertical-align: -0.25em;
|
||||
}
|
||||
.checkbox--checked svg {
|
||||
color: #327335;
|
||||
}
|
||||
.checkbox:hover svg {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
.checkbox-container small {
|
||||
margin-left: 4px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
input, button, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
padding: 0.4em;
|
||||
margin: 0 0 0.5em 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
/* Inline demo */
|
||||
.inline-demo svg {
|
||||
color: #06a;
|
||||
margin: 0 8px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
color: #ccc;
|
||||
.inline-demo div {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
.inline-demo div:before,
|
||||
.inline-demo div:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0;
|
||||
border-top: 1px dashed #506874;
|
||||
opacity: 0.5;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
button {
|
||||
color: #333;
|
||||
background-color: #f4f4f4;
|
||||
outline: none;
|
||||
.inline-demo div:before {
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
button:not(:disabled):active {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
border-color: #666;
|
||||
.inline-demo div:after {
|
||||
bottom: 7px;
|
||||
border-top-color: #ba3329;
|
||||
}
|
||||
|
||||
@ -1,123 +1,97 @@
|
||||
<script>
|
||||
import { Icon, addIcon } from '@iconify/svelte';
|
||||
import adminCustomizer from '@iconify-icons/dashicons/admin-customizer';
|
||||
import bxUser from '@iconify-icons/bx/bx-user';
|
||||
import bxError from '@iconify-icons/bx/bx-error';
|
||||
import { addIcon as addOfflineIcon, addCollection as addOfflineCollection } from '@iconify/svelte/dist/offline';
|
||||
import {
|
||||
addIcon as addOnlineIcon,
|
||||
addCollection as addOnlineCollection,
|
||||
disableCache,
|
||||
} from '@iconify/svelte/dist/iconify';
|
||||
|
||||
import UsageSample from './components/Sample.svelte';
|
||||
import ColorStyle from './components/ColorStyle.svelte';
|
||||
import InlineDemo from './components/Inline.svelte';
|
||||
import AlignmentDemo from './components/Alignment.svelte';
|
||||
import TransformationsDemo from './components/Transformations.svelte';
|
||||
import StyleDemo from './components/Style.svelte';
|
||||
import presentationPlay from '@iconify-icons/mdi-light/presentation-play';
|
||||
import playIcon from '@iconify-icons/mdi-light/play';
|
||||
|
||||
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:
|
||||
'<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,
|
||||
};
|
||||
'<circle fill-opacity="0.2" cx="8" cy="8" r="7" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z" fill="currentColor"/><path d="M7 9L5 7L3.5 8.5L7 12L13 6L11.5 4.5L7 9Z" fill="currentColor"/>',
|
||||
});
|
||||
addOnlineIcon('experiment2', {
|
||||
width: 16,
|
||||
height: 16,
|
||||
body:
|
||||
'<g fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 8.9c.1.6.2 1.1.4 1.7l.6 1.7l-.5.7H10c0 .5-.2 1-.6 1.4c-.4.4-.9.6-1.4.6c-.5 0-1.1-.2-1.4-.6c-.4-.4-.6-.9-.6-1.4H2.5l-.5-.7l.6-1.7c.2-.8.4-1.6.4-2.4V6c0-.7.1-1.4.4-2c.3-.7.7-1.2 1.2-1.7s1.1-.8 1.8-1C6.9 1.1 7.5 1 8 1c-.2.3-.4.7-.6 1.1c-.2 0-.4 0-.7.2c-.5.1-1 .4-1.4.8c-.4.3-.8.8-1 1.3c-.2.5-.3 1-.3 1.6v2.2c0 .9-.2 1.8-.4 2.7L3.2 12h9.6l-.4-1.1c-.175-.526-.274-1.13-.363-1.674L12 9c.4 0 .7 0 1-.1zM8 14c.2 0 .5-.1.7-.3c.2-.2.3-.4.3-.7H7c0 .3.1.5.3.7c.2.2.5.3.7.3zm7-10a3 3 0 1 1-6 0a3 3 0 0 1 6 0z"></path></g>',
|
||||
});
|
||||
|
||||
// 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>
|
||||
|
||||
<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>
|
||||
<OfflineUsageDemo />
|
||||
<FullOfflineUsageDemo />
|
||||
<FullUsageDemo />
|
||||
|
||||
<section>
|
||||
<h1>Usage</h1>
|
||||
<h1>Checkbox</h1>
|
||||
<div>
|
||||
Empty icon:
|
||||
<Icon />
|
||||
</div>
|
||||
<div>
|
||||
Empty icon with placeholder:
|
||||
<Icon>😿</Icon>
|
||||
</div>
|
||||
<div>
|
||||
Simple icon:
|
||||
<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!
|
||||
<Checkbox
|
||||
checked={true}
|
||||
text="Checkbox example"
|
||||
hint="(click to toggle)"
|
||||
/>
|
||||
<Checkbox
|
||||
checked={false}
|
||||
text="Another checkbox example"
|
||||
hint="(click to toggle)"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1>Example file (components/Sample.svelte)</h1>
|
||||
<UsageSample />
|
||||
</section>
|
||||
|
||||
<ColorStyle />
|
||||
<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>
|
||||
|
||||
28
packages/svelte-demo/src/demo-components/Checkbox.svelte
Normal file
28
packages/svelte-demo/src/demo-components/Checkbox.svelte
Normal 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
33
packages/svelte-demo/src/demo-components/Inline.svelte
Normal 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
14
packages/svelte-demo/src/demo-components/UsageFull.svelte
Normal 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>
|
||||
@ -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
24
packages/svelte-demo/src/demo-components/UsageOffline.svelte
Normal 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>
|
||||
@ -1,6 +1,7 @@
|
||||
<script>
|
||||
import { Icon } from '@iconify/svelte';
|
||||
import paperclipIcon from '@iconify-icons/dashicons/paperclip';
|
||||
|
||||
const paperclipIcon = 'dashicons:paperclip';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@ -15,7 +16,7 @@
|
||||
</style>
|
||||
|
||||
<section>
|
||||
<h1>Alignment (components/Alignment.svelte)</h1>
|
||||
<h1>Alignment (samples/Alignment.svelte)</h1>
|
||||
<div>
|
||||
<p>Icon with correct width/heigh ratio:</p>
|
||||
<Icon icon={paperclipIcon} />
|
||||
@ -1,12 +1,12 @@
|
||||
<script>
|
||||
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>
|
||||
|
||||
<section>
|
||||
<h1>Color and style (components/ColorStyle.svelte)</h1>
|
||||
<h1>Color and style (samples/ColorStyle.svelte)</h1>
|
||||
<div>
|
||||
Icon with color (red):
|
||||
<Icon icon={adminUsers} color="red" inline={true} />
|
||||
@ -47,7 +47,7 @@
|
||||
</style>
|
||||
|
||||
<section>
|
||||
<h1>Inline (components/Inline.svelte)</h1>
|
||||
<h1>Inline (samples/Inline.svelte)</h1>
|
||||
<div>
|
||||
Block icon (behaving like image):
|
||||
<Icon icon={demoIcon} />
|
||||
@ -1,6 +1,7 @@
|
||||
<script>
|
||||
import { Icon } from '@iconify/svelte';
|
||||
import adminCustomizer from '@iconify-icons/dashicons/admin-customizer';
|
||||
|
||||
const adminCustomizer = 'dashicons:admin-customizer';
|
||||
</script>
|
||||
|
||||
<Icon icon={adminCustomizer} height="20" style="color: green;" />
|
||||
@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import { Icon } from '@iconify/svelte';
|
||||
import paperclipIcon from '@iconify-icons/dashicons/paperclip';
|
||||
|
||||
const paperclipIcon = 'dashicons:paperclip';
|
||||
const redIcon = 'color: red;';
|
||||
const bigIcon = 'font-size: 40px;';
|
||||
</script>
|
||||
@ -17,7 +17,7 @@
|
||||
</style>
|
||||
|
||||
<section>
|
||||
<h1>Style (components/Style.svelte)</h1>
|
||||
<h1>Style (samples/Style.svelte)</h1>
|
||||
<div>
|
||||
Default icon:
|
||||
<Icon icon={paperclipIcon} />
|
||||
@ -1,6 +1,7 @@
|
||||
<script>
|
||||
import { Icon } from '@iconify/svelte';
|
||||
import paperclipIcon from '@iconify-icons/dashicons/paperclip';
|
||||
|
||||
const paperclipIcon = 'dashicons:paperclip';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@ -11,7 +12,7 @@
|
||||
</style>
|
||||
|
||||
<section>
|
||||
<h1>Transformations (components/Transformations.svelte)</h1>
|
||||
<h1>Transformations (samples/Transformations.svelte)</h1>
|
||||
<div>
|
||||
Default icon:
|
||||
<Icon icon={paperclipIcon} />
|
||||
@ -1,12 +1,49 @@
|
||||
<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
|
||||
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>
|
||||
|
||||
{#if data === null}
|
||||
|
||||
@ -1,68 +1,391 @@
|
||||
import type { IconifyIcon, IconifyJSON } from '@iconify/types';
|
||||
import { fullIcon } from '@iconify/core/lib/icon';
|
||||
import { parseIconSet } from '@iconify/core/lib/icon/icon-set';
|
||||
import type { IconifyJSON } from '@iconify/types';
|
||||
|
||||
// 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 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
|
||||
*/
|
||||
export function generateIcon(props: IconProps): RenderResult | null {
|
||||
// Split properties
|
||||
const icon =
|
||||
typeof props.icon === 'string'
|
||||
? storage[props.icon]
|
||||
: 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;
|
||||
}
|
||||
});
|
||||
export function generateIcon(
|
||||
icon: IconComponentData,
|
||||
props: IconProps
|
||||
): RenderResult | null {
|
||||
return icon ? render(icon, props) : null;
|
||||
}
|
||||
|
||||
@ -14,4 +14,16 @@ export type { IconifyIconCustomisations, IconProps } from './props';
|
||||
export { default as Icon } from './Icon.svelte';
|
||||
|
||||
// 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
40
packages/svelte/tests/api/10-api-mock.test.js
Normal 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
153
packages/svelte/tests/api/20-rendering-from-api.test.js
Normal 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
205
packages/svelte/tests/api/30-changing-props.test.js
Normal 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
18
packages/svelte/tests/api/fixtures/ChangeIcon.svelte
Normal 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
22
packages/svelte/tests/api/fixtures/ChangeProps.svelte
Normal 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
15
packages/svelte/tests/api/load.js
Normal 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
32
packages/svelte/tests/iconify/10-basic.test.js
Normal 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
12
packages/svelte/tests/iconify/10-empty.test.js
Normal 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
79
packages/svelte/tests/iconify/20-attributes.test.js
Normal 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
40
packages/svelte/tests/iconify/20-dimensions.test.js
Normal 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
29
packages/svelte/tests/iconify/20-ids.test.js
Normal 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
44
packages/svelte/tests/iconify/20-inline.test.js
Normal 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
159
packages/svelte/tests/iconify/20-transformations.test.js
Normal 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'
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -1,5 +1,5 @@
|
||||
import { render } from '@testing-library/svelte';
|
||||
import { Icon } from '../../dist/offline';
|
||||
import { Icon } from '../../dist/iconify';
|
||||
|
||||
describe('Empty icon', () => {
|
||||
test('basic test', () => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user