diff --git a/packages/sapper-demo/package-lock.json b/packages/sapper-demo/package-lock.json
index 7a69ba0..f8e62ba 100644
--- a/packages/sapper-demo/package-lock.json
+++ b/packages/sapper-demo/package-lock.json
@@ -18,9 +18,8 @@
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/preset-env": "^7.12.7",
"@babel/runtime": "^7.12.5",
- "@iconify-icons/bi": "^1.0.0",
"@iconify-icons/openmoji": "^1.0.9",
- "@iconify/svelte": "^2.1.0-beta.1",
+ "@iconify/svelte": "^2.1.0-beta.4",
"@rollup/plugin-babel": "^5.2.1",
"@rollup/plugin-commonjs": "^16.0.0",
"@rollup/plugin-node-resolve": "^10.0.0",
@@ -1250,12 +1249,6 @@
"to-fast-properties": "^2.0.0"
}
},
- "node_modules/@iconify-icons/bi": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/@iconify-icons/bi/-/bi-1.1.0.tgz",
- "integrity": "sha512-jYC05TEwi8Jlmc0LGL7Jrc/CIjoYfqYYxxfPI1hlj8XXHYhCMSizu1nMoj3vYQ7KoEP4Ge4hbiTl7O6/l68hBw==",
- "dev": true
- },
"node_modules/@iconify-icons/openmoji": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@iconify-icons/openmoji/-/openmoji-1.1.0.tgz",
@@ -1263,9 +1256,9 @@
"dev": true
},
"node_modules/@iconify/svelte": {
- "version": "2.1.0-beta.1",
- "resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.1.0-beta.1.tgz",
- "integrity": "sha512-6ekq4sbkwV/DmaKr0A4o5OVxWIyn0SRm3KW/zvDx0XO7r8yXlmwkVi9l3jXP4+wObozA3CTaSnkqjn1eaqCYkw==",
+ "version": "2.1.0-beta.4",
+ "resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.1.0-beta.4.tgz",
+ "integrity": "sha512-FTyfkMce4Luu1LjaDfirQOO5av9aJdduBDh6S1xZ4beLPGDGqkUc8J/gX83rRilwI58go2qJHnANsV0r8QuLwA==",
"dev": true,
"dependencies": {
"cross-fetch": "^3.1.4"
@@ -4133,12 +4126,6 @@
"to-fast-properties": "^2.0.0"
}
},
- "@iconify-icons/bi": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/@iconify-icons/bi/-/bi-1.1.0.tgz",
- "integrity": "sha512-jYC05TEwi8Jlmc0LGL7Jrc/CIjoYfqYYxxfPI1hlj8XXHYhCMSizu1nMoj3vYQ7KoEP4Ge4hbiTl7O6/l68hBw==",
- "dev": true
- },
"@iconify-icons/openmoji": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@iconify-icons/openmoji/-/openmoji-1.1.0.tgz",
@@ -4146,9 +4133,9 @@
"dev": true
},
"@iconify/svelte": {
- "version": "2.1.0-beta.1",
- "resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.1.0-beta.1.tgz",
- "integrity": "sha512-6ekq4sbkwV/DmaKr0A4o5OVxWIyn0SRm3KW/zvDx0XO7r8yXlmwkVi9l3jXP4+wObozA3CTaSnkqjn1eaqCYkw==",
+ "version": "2.1.0-beta.4",
+ "resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.1.0-beta.4.tgz",
+ "integrity": "sha512-FTyfkMce4Luu1LjaDfirQOO5av9aJdduBDh6S1xZ4beLPGDGqkUc8J/gX83rRilwI58go2qJHnANsV0r8QuLwA==",
"dev": true,
"requires": {
"cross-fetch": "^3.1.4"
diff --git a/packages/sapper-demo/package.json b/packages/sapper-demo/package.json
index cf43c28..fb22f06 100644
--- a/packages/sapper-demo/package.json
+++ b/packages/sapper-demo/package.json
@@ -23,7 +23,7 @@
"@babel/preset-env": "^7.12.7",
"@babel/runtime": "^7.12.5",
"@iconify-icons/openmoji": "^1.0.9",
- "@iconify/svelte": "^2.1.0-beta.1",
+ "@iconify/svelte": "^2.1.0-beta.4",
"@rollup/plugin-babel": "^5.2.1",
"@rollup/plugin-commonjs": "^16.0.0",
"@rollup/plugin-node-resolve": "^10.0.0",
diff --git a/packages/svelte-demo/package-lock.json b/packages/svelte-demo/package-lock.json
index ced7d01..6631222 100644
--- a/packages/svelte-demo/package-lock.json
+++ b/packages/svelte-demo/package-lock.json
@@ -13,14 +13,14 @@
"devDependencies": {
"@iconify-icons/mdi-light": "^1.1.0",
"@iconify-icons/uil": "^1.1.1",
- "@iconify/svelte": "^2.1.0-beta.1",
+ "@iconify/svelte": "^2.1.0-beta.4",
"@rollup/plugin-commonjs": "^16.0.0",
"@rollup/plugin-node-resolve": "^10.0.0",
"rollup": "^2.33.3",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^6.1.1",
"rollup-plugin-terser": "^7.0.2",
- "svelte": "^3.29.7"
+ "svelte": "^3.43.0"
}
},
"node_modules/@babel/code-frame": {
@@ -71,9 +71,9 @@
"dev": true
},
"node_modules/@iconify/svelte": {
- "version": "2.1.0-beta.1",
- "resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.1.0-beta.1.tgz",
- "integrity": "sha512-6ekq4sbkwV/DmaKr0A4o5OVxWIyn0SRm3KW/zvDx0XO7r8yXlmwkVi9l3jXP4+wObozA3CTaSnkqjn1eaqCYkw==",
+ "version": "2.1.0-beta.4",
+ "resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.1.0-beta.4.tgz",
+ "integrity": "sha512-FTyfkMce4Luu1LjaDfirQOO5av9aJdduBDh6S1xZ4beLPGDGqkUc8J/gX83rRilwI58go2qJHnANsV0r8QuLwA==",
"dev": true,
"dependencies": {
"cross-fetch": "^3.1.4"
@@ -773,9 +773,9 @@
}
},
"node_modules/rollup": {
- "version": "2.52.1",
- "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.52.1.tgz",
- "integrity": "sha512-/SPqz8UGnp4P1hq6wc9gdTqA2bXQXGx13TtoL03GBm6qGRI6Hm3p4Io7GeiHNLl0BsQAne1JNYY+q/apcY933w==",
+ "version": "2.57.0",
+ "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.57.0.tgz",
+ "integrity": "sha512-bKQIh1rWKofRee6mv8SrF2HdP6pea5QkwBZSMImJysFj39gQuiV8MEPBjXOCpzk3wSYp63M2v2wkWBmFC8O/rg==",
"dev": true,
"bin": {
"rollup": "dist/bin/rollup"
@@ -788,9 +788,9 @@
}
},
"node_modules/rollup-plugin-livereload": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.0.tgz",
- "integrity": "sha512-oC/8NqumGYuphkqrfszOHUUIwzKsaHBICw6QRwT5uD07gvePTS+HW+GFwu6f9K8W02CUuTvtIM9AWJrbj4wE1A==",
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.5.tgz",
+ "integrity": "sha512-vqQZ/UQowTW7VoiKEM5ouNW90wE5/GZLfdWuR0ELxyKOJUIaj+uismPZZaICU4DnWPVjnpCDDxEqwU7pcKY/PA==",
"dev": true,
"dependencies": {
"livereload": "^0.9.1"
@@ -973,9 +973,9 @@
}
},
"node_modules/svelte": {
- "version": "3.38.2",
- "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.38.2.tgz",
- "integrity": "sha512-q5Dq0/QHh4BLJyEVWGe7Cej5NWs040LWjMbicBGZ+3qpFWJ1YObRmUDZKbbovddLC9WW7THTj3kYbTOFmU9fbg==",
+ "version": "3.43.0",
+ "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.43.0.tgz",
+ "integrity": "sha512-T2pMPHrxXp+SM8pLLUXLQgkdo+JhTls7aqj9cD7z8wT2ccP+OrCAmtQS7h6pvMjitaZhXFNnCK582NxDpy8HSw==",
"dev": true,
"engines": {
"node": ">= 8"
@@ -1094,9 +1094,9 @@
"dev": true
},
"@iconify/svelte": {
- "version": "2.1.0-beta.1",
- "resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.1.0-beta.1.tgz",
- "integrity": "sha512-6ekq4sbkwV/DmaKr0A4o5OVxWIyn0SRm3KW/zvDx0XO7r8yXlmwkVi9l3jXP4+wObozA3CTaSnkqjn1eaqCYkw==",
+ "version": "2.1.0-beta.4",
+ "resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.1.0-beta.4.tgz",
+ "integrity": "sha512-FTyfkMce4Luu1LjaDfirQOO5av9aJdduBDh6S1xZ4beLPGDGqkUc8J/gX83rRilwI58go2qJHnANsV0r8QuLwA==",
"dev": true,
"requires": {
"cross-fetch": "^3.1.4"
@@ -1647,18 +1647,18 @@
}
},
"rollup": {
- "version": "2.52.1",
- "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.52.1.tgz",
- "integrity": "sha512-/SPqz8UGnp4P1hq6wc9gdTqA2bXQXGx13TtoL03GBm6qGRI6Hm3p4Io7GeiHNLl0BsQAne1JNYY+q/apcY933w==",
+ "version": "2.57.0",
+ "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.57.0.tgz",
+ "integrity": "sha512-bKQIh1rWKofRee6mv8SrF2HdP6pea5QkwBZSMImJysFj39gQuiV8MEPBjXOCpzk3wSYp63M2v2wkWBmFC8O/rg==",
"dev": true,
"requires": {
"fsevents": "~2.3.2"
}
},
"rollup-plugin-livereload": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.0.tgz",
- "integrity": "sha512-oC/8NqumGYuphkqrfszOHUUIwzKsaHBICw6QRwT5uD07gvePTS+HW+GFwu6f9K8W02CUuTvtIM9AWJrbj4wE1A==",
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.5.tgz",
+ "integrity": "sha512-vqQZ/UQowTW7VoiKEM5ouNW90wE5/GZLfdWuR0ELxyKOJUIaj+uismPZZaICU4DnWPVjnpCDDxEqwU7pcKY/PA==",
"dev": true,
"requires": {
"livereload": "^0.9.1"
@@ -1797,9 +1797,9 @@
}
},
"svelte": {
- "version": "3.38.2",
- "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.38.2.tgz",
- "integrity": "sha512-q5Dq0/QHh4BLJyEVWGe7Cej5NWs040LWjMbicBGZ+3qpFWJ1YObRmUDZKbbovddLC9WW7THTj3kYbTOFmU9fbg==",
+ "version": "3.43.0",
+ "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.43.0.tgz",
+ "integrity": "sha512-T2pMPHrxXp+SM8pLLUXLQgkdo+JhTls7aqj9cD7z8wT2ccP+OrCAmtQS7h6pvMjitaZhXFNnCK582NxDpy8HSw==",
"dev": true
},
"terser": {
diff --git a/packages/svelte-demo/package.json b/packages/svelte-demo/package.json
index 66115cd..8df44bf 100644
--- a/packages/svelte-demo/package.json
+++ b/packages/svelte-demo/package.json
@@ -10,14 +10,14 @@
"devDependencies": {
"@iconify-icons/mdi-light": "^1.1.0",
"@iconify-icons/uil": "^1.1.1",
- "@iconify/svelte": "^2.1.0-beta.1",
+ "@iconify/svelte": "^2.1.0-beta.4",
"@rollup/plugin-commonjs": "^16.0.0",
"@rollup/plugin-node-resolve": "^10.0.0",
"rollup": "^2.33.3",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^6.1.1",
"rollup-plugin-terser": "^7.0.2",
- "svelte": "^3.29.7"
+ "svelte": "^3.43.0"
},
"dependencies": {
"sirv-cli": "^1.0.8"
diff --git a/packages/svelte-demo/src/App.svelte b/packages/svelte-demo/src/App.svelte
index 835f5db..fb51828 100644
--- a/packages/svelte-demo/src/App.svelte
+++ b/packages/svelte-demo/src/App.svelte
@@ -1,5 +1,5 @@
diff --git a/packages/svelte-demo/src/demo-components/UsageOffline.svelte b/packages/svelte-demo/src/demo-components/UsageOffline.svelte
index 444cf3e..1ec7eff 100644
--- a/packages/svelte-demo/src/demo-components/UsageOffline.svelte
+++ b/packages/svelte-demo/src/demo-components/UsageOffline.svelte
@@ -1,5 +1,5 @@
diff --git a/packages/svelte/offline/package.json b/packages/svelte/offline/package.json
index 2a3582f..be386ce 100644
--- a/packages/svelte/offline/package.json
+++ b/packages/svelte/offline/package.json
@@ -3,14 +3,5 @@
"svelte": "../dist/OfflineIcon.svelte",
"module": "../dist/offline.mjs",
"main": "../dist/offline.js",
- "types": "../dist/offline.d.ts",
- "exports": {
- "./*": "./*",
- ".": {
- "import": "../dist/offline.mjs",
- "types": "../dist/offline.d.ts",
- "svelte": "../dist/OfflineIcon.svelte",
- "default": "../dist/offline.js"
- }
- }
+ "types": "../dist/offline.d.ts"
}
diff --git a/packages/svelte/package-lock.json b/packages/svelte/package-lock.json
index bea994a..db03e24 100644
--- a/packages/svelte/package-lock.json
+++ b/packages/svelte/package-lock.json
@@ -1,19 +1,18 @@
{
"name": "@iconify/svelte",
- "version": "2.1.0-beta.2",
+ "version": "2.1.0-beta.3",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@iconify/svelte",
- "version": "2.1.0-beta.2",
+ "version": "2.1.0-beta.3",
"license": "MIT",
"dependencies": {
"cross-fetch": "^3.1.4"
},
"devDependencies": {
"@iconify/core": "^1.2.0-beta.3",
- "@iconify/utils": "^1.0.9",
"@microsoft/api-extractor": "^7.15.0",
"@rollup/plugin-node-resolve": "^10.0.0",
"@rollup/plugin-typescript": "^8.2.1",
@@ -21,9 +20,10 @@
"@testing-library/svelte": "^3.0.3",
"@tsconfig/svelte": "^1.0.10",
"@types/jest": "^27.0.2",
+ "rimraf": "^3.0.2",
"rollup": "^2.33.3",
"rollup-plugin-svelte": "^6.1.1",
- "svelte": "^3.43.0",
+ "svelte": "3.39",
"svelte-jester": "^2.1.5",
"svelte-preprocess": "^4.9.5",
"ts-jest": "^27.0.5"
@@ -8230,7 +8230,6 @@
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
"dev": true,
- "peer": true,
"dependencies": {
"glob": "^7.1.3"
},
@@ -8642,9 +8641,9 @@
}
},
"node_modules/svelte": {
- "version": "3.43.0",
- "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.43.0.tgz",
- "integrity": "sha512-T2pMPHrxXp+SM8pLLUXLQgkdo+JhTls7aqj9cD7z8wT2ccP+OrCAmtQS7h6pvMjitaZhXFNnCK582NxDpy8HSw==",
+ "version": "3.39.0",
+ "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.39.0.tgz",
+ "integrity": "sha512-dcJCongL0cRkZWe9q+fde0T4HX8PksBywz2+EGDVIrdYdJaxTzrJu0RVeuDtL8Mx2hs4yn3W8zKPScuzG63hTg==",
"dev": true,
"engines": {
"node": ">= 8"
@@ -15741,7 +15740,6 @@
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
"dev": true,
- "peer": true,
"requires": {
"glob": "^7.1.3"
}
@@ -16072,9 +16070,9 @@
}
},
"svelte": {
- "version": "3.43.0",
- "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.43.0.tgz",
- "integrity": "sha512-T2pMPHrxXp+SM8pLLUXLQgkdo+JhTls7aqj9cD7z8wT2ccP+OrCAmtQS7h6pvMjitaZhXFNnCK582NxDpy8HSw==",
+ "version": "3.39.0",
+ "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.39.0.tgz",
+ "integrity": "sha512-dcJCongL0cRkZWe9q+fde0T4HX8PksBywz2+EGDVIrdYdJaxTzrJu0RVeuDtL8Mx2hs4yn3W8zKPScuzG63hTg==",
"dev": true
},
"svelte-jester": {
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 67bd38b..c951606 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
"name": "@iconify/svelte",
"description": "Iconify icon component for Svelte.",
"author": "Vjacheslav Trushkin",
- "version": "2.1.0-beta.2",
+ "version": "2.1.0-beta.4",
"license": "MIT",
"bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://github.com/iconify/iconify",
@@ -16,22 +16,9 @@
"module": "dist/index.mjs",
"main": "dist/index.js",
"types": "dist/index.d.ts",
- "exports": {
- "./*": "./*",
- ".": {
- "import": "./dist/index.mjs",
- "svelte": "./dist/Icon.svelte",
- "types": "./dist/index.d.ts",
- "default": "./dist/index.js"
- },
- "./offline": {
- "import": "./dist/offline.mjs",
- "svelte": "./dist/OfflineIcon.svelte",
- "types": "./dist/offline.d.ts",
- "default": "./dist/offline.js"
- }
- },
"scripts": {
+ "cleanup": "rimraf lib dist",
+ "prebuild": "npm run cleanup",
"build": "node build",
"build:tsc": "tsc -b",
"build:bundles": "rollup -c rollup.config.js",
@@ -40,7 +27,6 @@
},
"devDependencies": {
"@iconify/core": "^1.2.0-beta.3",
- "@iconify/utils": "^1.0.9",
"@microsoft/api-extractor": "^7.15.0",
"@rollup/plugin-node-resolve": "^10.0.0",
"@rollup/plugin-typescript": "^8.2.1",
@@ -48,9 +34,10 @@
"@testing-library/svelte": "^3.0.3",
"@tsconfig/svelte": "^1.0.10",
"@types/jest": "^27.0.2",
+ "rimraf": "^3.0.2",
"rollup": "^2.33.3",
"rollup-plugin-svelte": "^6.1.1",
- "svelte": "^3.43.0",
+ "svelte": "3.39",
"svelte-jester": "^2.1.5",
"svelte-preprocess": "^4.9.5",
"ts-jest": "^27.0.5"
diff --git a/packages/svelte/tests/api/30-changing-props.test.ts b/packages/svelte/tests/api/30-changing-props.test.ts
new file mode 100644
index 0000000..5a2547e
--- /dev/null
+++ b/packages/svelte/tests/api/30-changing-props.test.ts
@@ -0,0 +1,385 @@
+/**
+ * @jest-environment jsdom
+ */
+import { render } from '@testing-library/svelte';
+import { iconExists } from '../../';
+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: '',
+ width: 24,
+ height: 24,
+};
+
+const iconData2 = {
+ body: '',
+ width: 32,
+ height: 32,
+};
+
+type TriggerSwap = () => void;
+
+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}`;
+ const className = `iconify iconify--${prefix} iconify--${provider}`;
+ let onLoadCalled = ''; // Name of icon from last onLoad call
+ let triggerSwap: TriggerSwap | undefined;
+
+ mockAPIData({
+ type: 'icons',
+ provider,
+ prefix,
+ response: {
+ prefix,
+ icons: {
+ [name]: iconData,
+ },
+ },
+ delay: (next) => {
+ // Fixture callback should have been called
+ expect(typeof triggerSwap).toBe('function');
+
+ // Icon should not have loaded yet
+ expect(iconExists(iconName)).toBe(false);
+
+ // onLoad should not have been called yet
+ expect(onLoadCalled).toBe('');
+
+ // Send icon data
+ next();
+
+ // Test it again
+ expect(iconExists(iconName)).toBe(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 as HTMLDivElement)
+ .innerHTML;
+
+ // Check HTML
+ expect(html).toBe(
+ ''
+ );
+
+ // onLoad should have been called
+ expect(onLoadCalled).toBe(iconName);
+
+ // Change property
+ triggerSwap!();
+ }, 0);
+ }, 0);
+ },
+ });
+
+ mockAPIData({
+ type: 'icons',
+ provider,
+ prefix,
+ response: {
+ prefix,
+ icons: {
+ [name2]: iconData2,
+ },
+ },
+ delay: (next) => {
+ // Icon should not have loaded yet
+ expect(iconExists(iconName2)).toBe(false);
+
+ // onLoad should have been called only once for previous icon
+ expect(onLoadCalled).toBe(iconName);
+
+ // Send icon data
+ next();
+
+ // Test it again
+ expect(iconExists(iconName2)).toBe(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 as HTMLDivElement)
+ .innerHTML;
+
+ // Check HTML
+ expect(html).toBe(
+ ''
+ );
+
+ // onLoad should have been called for second icon
+ expect(onLoadCalled).toBe(iconName2);
+
+ done();
+ }, 0);
+ }, 0);
+ },
+ });
+
+ // Check if icon has been loaded
+ expect(iconExists(iconName)).toBe(false);
+
+ // Render component
+ const component = render(ChangeIcon, {
+ icon1: iconName,
+ icon2: iconName2,
+ expose: (swap: TriggerSwap) => {
+ triggerSwap = swap;
+ },
+ onLoad: (name: string) => {
+ // onLoad should be called only once per icon
+ switch (name) {
+ // First onLoad call
+ case iconName:
+ expect(onLoadCalled).toBe('');
+ break;
+
+ // Second onLoad call
+ case iconName2:
+ expect(onLoadCalled).toBe(iconName);
+ break;
+
+ default:
+ throw new Error(`Unexpected onLoad('${name}') call`);
+ }
+ onLoadCalled = name;
+ },
+ });
+
+ // Should render empty icon
+ const html = component.container.innerHTML;
+ expect(html).toBe('');
+
+ // onLoad should not have been called yet
+ expect(onLoadCalled).toBe('');
+ });
+
+ test('changing icon property while loading', (done) => {
+ const prefix = nextPrefix();
+ const name = 'changing-prop';
+ const name2 = 'changing-prop2';
+ const iconName = `@${provider}:${prefix}:${name}`;
+ const iconName2 = `@${provider}:${prefix}:${name2}`;
+ const className = `iconify iconify--${prefix} iconify--${provider}`;
+ let onLoadCalled = ''; // Name of icon from last onLoad call
+ let isSync = true;
+ let triggerSwap: TriggerSwap | undefined;
+
+ mockAPIData({
+ type: 'icons',
+ provider,
+ prefix,
+ response: {
+ prefix,
+ icons: {
+ [name]: iconData,
+ },
+ },
+ delay: (next) => {
+ // Should have been called asynchronously
+ expect(isSync).toBe(false);
+
+ // Icon should not have loaded yet
+ expect(iconExists(iconName)).toBe(false);
+
+ // Send icon data
+ next();
+ },
+ });
+
+ mockAPIData({
+ type: 'icons',
+ provider,
+ prefix,
+ response: {
+ prefix,
+ icons: {
+ [name2]: iconData2,
+ },
+ },
+ delay: (next) => {
+ // Should have been called asynchronously
+ expect(isSync).toBe(false);
+
+ // Icon should not have loaded yet
+ expect(iconExists(iconName2)).toBe(false);
+
+ // Send icon data
+ next();
+
+ // Test it again
+ expect(iconExists(iconName2)).toBe(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 as HTMLDivElement)
+ .innerHTML;
+
+ // Check HTML
+ expect(html).toBe(
+ ''
+ );
+
+ // onLoad should have been called for second icon
+ expect(onLoadCalled).toBe(iconName2);
+
+ done();
+ }, 0);
+ }, 0);
+ },
+ });
+
+ // Check if icon has been loaded
+ expect(iconExists(iconName)).toBe(false);
+
+ // Render component
+ const component = render(ChangeIcon, {
+ icon1: iconName,
+ icon2: iconName2,
+ expose: (swap: TriggerSwap) => {
+ triggerSwap = swap;
+ },
+ onLoad: (name: string) => {
+ // onLoad should be called only for second icon
+ expect(name).toBe(iconName2);
+ onLoadCalled = name;
+ },
+ });
+
+ // Should render empty icon
+ const html = component.container.innerHTML;
+ expect(html).toBe('');
+
+ // Fixture callback should have been called
+ expect(typeof triggerSwap).toBe('function');
+
+ // Change property
+ triggerSwap!();
+
+ // Async
+ isSync = false;
+
+ // onLoad should not have been called yet
+ expect(onLoadCalled).toBe('');
+ });
+
+ test('changing multiple properties', (done) => {
+ const prefix = nextPrefix();
+ const name = 'multiple-props';
+ const iconName = `@${provider}:${prefix}:${name}`;
+ const className = `iconify iconify--${prefix} iconify--${provider}`;
+ let onLoadCalled = false;
+ let triggerSwap: TriggerSwap | undefined;
+
+ mockAPIData({
+ type: 'icons',
+ provider,
+ prefix,
+ response: {
+ prefix,
+ icons: {
+ [name]: iconData,
+ },
+ },
+ delay: (next) => {
+ // Fixture callback should have been called
+ expect(typeof triggerSwap).toBe('function');
+
+ // Icon should not have loaded yet
+ expect(iconExists(iconName)).toBe(false);
+
+ // Send icon data
+ next();
+
+ // Test it again
+ expect(iconExists(iconName)).toBe(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 as HTMLDivElement)
+ .innerHTML;
+
+ // Check HTML
+ expect(html).toBe(
+ ''
+ );
+
+ // onLoad should have been called
+ expect(onLoadCalled).toBe(true);
+
+ // 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 as HTMLDivElement)
+ .innerHTML;
+
+ expect(html).toBe(
+ ''
+ );
+
+ done();
+ }, 0);
+ }, 0);
+ }, 0);
+ }, 0);
+ },
+ });
+
+ // Check if icon has been loaded
+ expect(iconExists(iconName)).toBe(false);
+
+ // Render component
+ const component = render(ChangeProps, {
+ icon: iconName,
+ expose: (swap: TriggerSwap) => {
+ triggerSwap = swap;
+ },
+ onLoad: (name: string) => {
+ expect(name).toBe(iconName);
+ // Should be called only once
+ expect(onLoadCalled).toBe(false);
+ onLoadCalled = true;
+ },
+ });
+
+ // Should render empty icon
+ const html = component.container.innerHTML;
+ expect(html).toBe('');
+
+ // onLoad should not have been called yet
+ expect(onLoadCalled).toBe(false);
+ });
+});
diff --git a/packages/svelte/tests/api/fixtures/ChangeIcon.svelte b/packages/svelte/tests/api/fixtures/ChangeIcon.svelte
new file mode 100644
index 0000000..f61341a
--- /dev/null
+++ b/packages/svelte/tests/api/fixtures/ChangeIcon.svelte
@@ -0,0 +1,19 @@
+
+
\ No newline at end of file
diff --git a/packages/svelte/tests/api/fixtures/ChangeProps.svelte b/packages/svelte/tests/api/fixtures/ChangeProps.svelte
new file mode 100644
index 0000000..f780d0f
--- /dev/null
+++ b/packages/svelte/tests/api/fixtures/ChangeProps.svelte
@@ -0,0 +1,24 @@
+
+
\ No newline at end of file