From 93c93a3330fda096351002d520e16951f784d9d5 Mon Sep 17 00:00:00 2001
From: Vjacheslav Trushkin <cyberalien@gmail.com>
Date: Fri, 14 May 2021 21:39:12 +0300
Subject: [PATCH] Rebuild Svelte component: component is now a default export,
 svelte component is used as main export to make it work correctly with SSR

---
 .../sapper-demo/src/components/Nav.svelte     |   2 +-
 .../sapper-demo/src/routes/blog/index.svelte  |   4 +-
 packages/sapper-demo/src/routes/index.svelte  |   6 +-
 .../src/demo-components/Checkbox.svelte       |   2 +-
 .../src/demo-components/Inline.svelte         |   4 +-
 .../src/demo-components/UsageFull.svelte      |   2 +-
 .../demo-components/UsageFullOffline.svelte   |   2 +-
 .../src/demo-components/UsageOffline.svelte   |   2 +-
 .../svelte-demo/src/samples/Alignment.svelte  |   2 +-
 .../svelte-demo/src/samples/ColorStyle.svelte |   2 +-
 .../svelte-demo/src/samples/Inline.svelte     |   2 +-
 .../svelte-demo/src/samples/Sample.svelte     |   2 +-
 packages/svelte-demo/src/samples/Style.svelte |   2 +-
 .../src/samples/Transformations.svelte        |   4 +-
 packages/svelte/api-extractor.functions.json  |   9 ++
 packages/svelte/api-extractor.iconify.json    |  38 +----
 ...ractor.offline.json => api-extractor.json} |   5 -
 .../api-extractor.offline-functions.json      |   9 ++
 .../svelte/api-extractor.offline-iconify.json |   9 ++
 packages/svelte/build.js                      | 131 ++++++++++++++++--
 packages/svelte/copy.js                       |  45 ------
 packages/svelte/package.json                  |  10 +-
 packages/svelte/rollup.config.js              |  13 +-
 packages/svelte/src/Icon.svelte               |  37 +++++
 packages/svelte/src/OfflineIcon.svelte        |  15 ++
 packages/svelte/src/OfflineIcon.svelte.d.ts   |   3 -
 packages/svelte/src/iconify.ts                |   4 +-
 .../src/{offline.ts => offline-iconify.ts}    |   4 +-
 .../src/{Icon.svelte.d.ts => svelte.d.ts}     |   3 +
 packages/svelte/tests/api/10-api-mock.test.js |   2 +-
 .../tests/api/20-rendering-from-api.test.js   |   2 +-
 .../tests/api/30-changing-props.test.js       |   2 +-
 .../tests/api/fixtures/ChangeIcon.svelte      |   2 +-
 .../tests/api/fixtures/ChangeProps.svelte     |   2 +-
 packages/svelte/tests/api/load.js             |   2 +-
 .../svelte/tests/iconify/10-basic.test.js     |   5 +-
 .../svelte/tests/iconify/10-empty.test.js     |   2 +-
 .../tests/iconify/20-attributes.test.js       |   5 +-
 .../tests/iconify/20-dimensions.test.js       |   5 +-
 packages/svelte/tests/iconify/20-ids.test.js  |   5 +-
 .../svelte/tests/iconify/20-inline.test.js    |   2 +-
 .../tests/iconify/20-transformations.test.js  |   2 +-
 .../svelte/tests/offline/10-basic.test.js     |   5 +-
 .../svelte/tests/offline/10-empty.test.js     |   2 +-
 .../tests/offline/20-attributes.test.js       |   5 +-
 .../tests/offline/20-dimensions.test.js       |   5 +-
 packages/svelte/tests/offline/20-ids.test.js  |   5 +-
 .../svelte/tests/offline/20-inline.test.js    |   2 +-
 .../svelte/tests/offline/20-storage.test.js   |  17 +--
 .../tests/offline/20-transformations.test.js  |   2 +-
 50 files changed, 273 insertions(+), 181 deletions(-)
 create mode 100644 packages/svelte/api-extractor.functions.json
 rename packages/svelte/{api-extractor.offline.json => api-extractor.json} (82%)
 create mode 100644 packages/svelte/api-extractor.offline-functions.json
 create mode 100644 packages/svelte/api-extractor.offline-iconify.json
 delete mode 100644 packages/svelte/copy.js
 delete mode 100644 packages/svelte/src/OfflineIcon.svelte.d.ts
 rename packages/svelte/src/{offline.ts => offline-iconify.ts} (77%)
 rename packages/svelte/src/{Icon.svelte.d.ts => svelte.d.ts} (77%)

diff --git a/packages/sapper-demo/src/components/Nav.svelte b/packages/sapper-demo/src/components/Nav.svelte
index 8e442c5..348293a 100644
--- a/packages/sapper-demo/src/components/Nav.svelte
+++ b/packages/sapper-demo/src/components/Nav.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { Icon } from '@iconify/svelte/dist/offline';
+	import Icon from '@iconify/svelte';
 	import homeIcon from '@iconify-icons/bi/house-door';
 	import blogIcon from '@iconify-icons/bi/file-text';
 	import aboutIcon from '@iconify-icons/bi/question-octagon';
diff --git a/packages/sapper-demo/src/routes/blog/index.svelte b/packages/sapper-demo/src/routes/blog/index.svelte
index ac4ce5b..4f6a90f 100644
--- a/packages/sapper-demo/src/routes/blog/index.svelte
+++ b/packages/sapper-demo/src/routes/blog/index.svelte
@@ -17,11 +17,11 @@
 
 	onMount(async () => {
 		const promises = [
-			import('@iconify/svelte/dist/offline-bundle'),
+			import('@iconify/svelte'),
 			import('@iconify-icons/bi/link-45deg'),
 		];
 		const results = await Promise.all(promises);
-		Icon = results[0].Icon;
+		Icon = results[0].default;
 		postIcon = results[1].default;
 	});
 
diff --git a/packages/sapper-demo/src/routes/index.svelte b/packages/sapper-demo/src/routes/index.svelte
index 3ee2e98..512e168 100644
--- a/packages/sapper-demo/src/routes/index.svelte
+++ b/packages/sapper-demo/src/routes/index.svelte
@@ -1,6 +1,6 @@
 <script>
 	// Render icon on server
-	import { Icon } from '@iconify/svelte/dist/offline';
+	import Icon from '@iconify/svelte';
 	import successIcon from '@iconify-icons/openmoji/artist-medium-light-skin-tone';
 
 	// Dynamically load icon component, icon data and render it on client side
@@ -13,11 +13,11 @@
 
 	onMount(async () => {
 		let promises = [
-			import('@iconify/svelte/dist/offline-bundle'),
+			import('@iconify/svelte'),
 			import('@iconify-icons/openmoji/artist-medium-light-skin-tone'),
 		];
 		const results = await Promise.all(promises);
-		Icon = results[0].Icon;
+		Icon = results[0].default;
 		successIcon = results[1].default;
 	});
 	*/
diff --git a/packages/svelte-demo/src/demo-components/Checkbox.svelte b/packages/svelte-demo/src/demo-components/Checkbox.svelte
index 0f10698..62ab931 100644
--- a/packages/svelte-demo/src/demo-components/Checkbox.svelte
+++ b/packages/svelte-demo/src/demo-components/Checkbox.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { Icon } from '@iconify/svelte/dist/offline';
+    import Icon from '@iconify/svelte/dist/offline';
     import checkedIcon from '@iconify-icons/uil/check-square';
     import uncheckedIcon from '@iconify-icons/uil/square';
 
diff --git a/packages/svelte-demo/src/demo-components/Inline.svelte b/packages/svelte-demo/src/demo-components/Inline.svelte
index 7bd8f0f..54bc215 100644
--- a/packages/svelte-demo/src/demo-components/Inline.svelte
+++ b/packages/svelte-demo/src/demo-components/Inline.svelte
@@ -1,6 +1,6 @@
 <script>
-    import { Icon as OfflineIcon } from '@iconify/svelte/dist/offline';
-    import { Icon as FullIcon } from '@iconify/svelte';
+    import OfflineIcon from '@iconify/svelte/dist/offline';
+    import FullIcon from '@iconify/svelte';
 </script>
 
 <section class="inline-demo">
diff --git a/packages/svelte-demo/src/demo-components/UsageFull.svelte b/packages/svelte-demo/src/demo-components/UsageFull.svelte
index 3a36094..d937a45 100644
--- a/packages/svelte-demo/src/demo-components/UsageFull.svelte
+++ b/packages/svelte-demo/src/demo-components/UsageFull.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { Icon } from '@iconify/svelte';
+	import Icon from '@iconify/svelte';
 </script>
 
 <section class="icon-24">
diff --git a/packages/svelte-demo/src/demo-components/UsageFullOffline.svelte b/packages/svelte-demo/src/demo-components/UsageFullOffline.svelte
index 6a98cf3..a31c473 100644
--- a/packages/svelte-demo/src/demo-components/UsageFullOffline.svelte
+++ b/packages/svelte-demo/src/demo-components/UsageFullOffline.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { Icon } from '@iconify/svelte';
+	import Icon from '@iconify/svelte';
     import accountIcon from '@iconify-icons/mdi-light/account';
     import alertIcon from '@iconify-icons/mdi-light/alert';
 </script>
diff --git a/packages/svelte-demo/src/demo-components/UsageOffline.svelte b/packages/svelte-demo/src/demo-components/UsageOffline.svelte
index d3875df..444cf3e 100644
--- a/packages/svelte-demo/src/demo-components/UsageOffline.svelte
+++ b/packages/svelte-demo/src/demo-components/UsageOffline.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { Icon } from '@iconify/svelte/dist/offline';
+	import Icon from '@iconify/svelte/dist/offline';
     import accountIcon from '@iconify-icons/mdi-light/account';
     import alertIcon from '@iconify-icons/mdi-light/alert';
 </script>
diff --git a/packages/svelte-demo/src/samples/Alignment.svelte b/packages/svelte-demo/src/samples/Alignment.svelte
index ca20e48..ace4fff 100644
--- a/packages/svelte-demo/src/samples/Alignment.svelte
+++ b/packages/svelte-demo/src/samples/Alignment.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { Icon } from '@iconify/svelte';
+	import Icon from '@iconify/svelte';
 
 	const paperclipIcon = 'dashicons:paperclip';
 </script>
diff --git a/packages/svelte-demo/src/samples/ColorStyle.svelte b/packages/svelte-demo/src/samples/ColorStyle.svelte
index bc7d0f1..f4c6fff 100644
--- a/packages/svelte-demo/src/samples/ColorStyle.svelte
+++ b/packages/svelte-demo/src/samples/ColorStyle.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { Icon } from '@iconify/svelte';
+	import Icon from '@iconify/svelte';
 
 	const adminUsers = 'dashicons:admin-users';
 	const icon1Style = 'color: purple; vertical-align: 0; font-size: 2em;';
diff --git a/packages/svelte-demo/src/samples/Inline.svelte b/packages/svelte-demo/src/samples/Inline.svelte
index 2910647..d360411 100644
--- a/packages/svelte-demo/src/samples/Inline.svelte
+++ b/packages/svelte-demo/src/samples/Inline.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { Icon } from '@iconify/svelte';
+	import Icon from '@iconify/svelte';
 
 	const demoIcon = {
 		width: 16,
diff --git a/packages/svelte-demo/src/samples/Sample.svelte b/packages/svelte-demo/src/samples/Sample.svelte
index 557df30..858939f 100644
--- a/packages/svelte-demo/src/samples/Sample.svelte
+++ b/packages/svelte-demo/src/samples/Sample.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { Icon } from '@iconify/svelte';
+	import Icon from '@iconify/svelte';
 
 	const adminCustomizer = 'dashicons:admin-customizer';
 </script>
diff --git a/packages/svelte-demo/src/samples/Style.svelte b/packages/svelte-demo/src/samples/Style.svelte
index 45dc9e0..d4b4f20 100644
--- a/packages/svelte-demo/src/samples/Style.svelte
+++ b/packages/svelte-demo/src/samples/Style.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { Icon } from '@iconify/svelte';
+	import Icon from '@iconify/svelte';
 
 	const paperclipIcon = 'dashicons:paperclip';
 	const redIcon = 'color: red;';
diff --git a/packages/svelte-demo/src/samples/Transformations.svelte b/packages/svelte-demo/src/samples/Transformations.svelte
index 1d3b91c..579a1ee 100644
--- a/packages/svelte-demo/src/samples/Transformations.svelte
+++ b/packages/svelte-demo/src/samples/Transformations.svelte
@@ -1,7 +1,7 @@
 <script>
-	import { Icon } from '@iconify/svelte';
+	import Icon from '@iconify/svelte';
 
-const paperclipIcon = 'dashicons:paperclip';
+	const paperclipIcon = 'dashicons:paperclip';
 </script>
 
 <style>
diff --git a/packages/svelte/api-extractor.functions.json b/packages/svelte/api-extractor.functions.json
new file mode 100644
index 0000000..498123a
--- /dev/null
+++ b/packages/svelte/api-extractor.functions.json
@@ -0,0 +1,9 @@
+{
+	"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+	"extends": "./api-extractor.json",
+	"mainEntryPointFilePath": "lib/functions.d.ts",
+	"dtsRollup": {
+		"enabled": true,
+		"untrimmedFilePath": "<projectFolder>/dist/functions.d.ts"
+	}
+}
diff --git a/packages/svelte/api-extractor.iconify.json b/packages/svelte/api-extractor.iconify.json
index b64d76d..41aa3e8 100644
--- a/packages/svelte/api-extractor.iconify.json
+++ b/packages/svelte/api-extractor.iconify.json
@@ -1,45 +1,9 @@
 {
 	"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+	"extends": "./api-extractor.json",
 	"mainEntryPointFilePath": "lib/iconify.d.ts",
-	"bundledPackages": [
-		"@iconify/types",
-		"@iconify/core",
-		"@cyberalien/redundancy"
-	],
-	"compiler": {
-		"skipLibCheck": true
-	},
-	"apiReport": {
-		"enabled": false
-	},
-	"docModel": {
-		"enabled": false
-	},
 	"dtsRollup": {
 		"enabled": true,
 		"untrimmedFilePath": "<projectFolder>/dist/iconify.d.ts"
-	},
-	"tsdocMetadata": {
-		"enabled": false
-	},
-	"messages": {
-		"compilerMessageReporting": {
-			"default": {
-				"logLevel": "warning"
-			}
-		},
-		"extractorMessageReporting": {
-			"default": {
-				"logLevel": "warning"
-			},
-			"ae-missing-release-tag": {
-				"logLevel": "none"
-			}
-		},
-		"tsdocMessageReporting": {
-			"default": {
-				"logLevel": "warning"
-			}
-		}
 	}
 }
diff --git a/packages/svelte/api-extractor.offline.json b/packages/svelte/api-extractor.json
similarity index 82%
rename from packages/svelte/api-extractor.offline.json
rename to packages/svelte/api-extractor.json
index 33b086c..d8a3021 100644
--- a/packages/svelte/api-extractor.offline.json
+++ b/packages/svelte/api-extractor.json
@@ -1,6 +1,5 @@
 {
 	"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
-	"mainEntryPointFilePath": "lib/offline.d.ts",
 	"bundledPackages": [
 		"@iconify/types",
 		"@iconify/core",
@@ -15,10 +14,6 @@
 	"docModel": {
 		"enabled": false
 	},
-	"dtsRollup": {
-		"enabled": true,
-		"untrimmedFilePath": "<projectFolder>/dist/offline.d.ts"
-	},
 	"tsdocMetadata": {
 		"enabled": false
 	},
diff --git a/packages/svelte/api-extractor.offline-functions.json b/packages/svelte/api-extractor.offline-functions.json
new file mode 100644
index 0000000..64dcbe6
--- /dev/null
+++ b/packages/svelte/api-extractor.offline-functions.json
@@ -0,0 +1,9 @@
+{
+	"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+	"extends": "./api-extractor.json",
+	"mainEntryPointFilePath": "lib/offline-functions.d.ts",
+	"dtsRollup": {
+		"enabled": true,
+		"untrimmedFilePath": "<projectFolder>/dist/offline-functions.d.ts"
+	}
+}
diff --git a/packages/svelte/api-extractor.offline-iconify.json b/packages/svelte/api-extractor.offline-iconify.json
new file mode 100644
index 0000000..a6c79d0
--- /dev/null
+++ b/packages/svelte/api-extractor.offline-iconify.json
@@ -0,0 +1,9 @@
+{
+	"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+	"extends": "./api-extractor.json",
+	"mainEntryPointFilePath": "lib/offline-iconify.d.ts",
+	"dtsRollup": {
+		"enabled": true,
+		"untrimmedFilePath": "<projectFolder>/dist/offline-iconify.d.ts"
+	}
+}
diff --git a/packages/svelte/build.js b/packages/svelte/build.js
index 0f7738f..2587319 100644
--- a/packages/svelte/build.js
+++ b/packages/svelte/build.js
@@ -7,13 +7,17 @@ const packagesDir = path.dirname(__dirname);
 // List of commands to run
 const commands = [];
 
+// api-extractor command line
+const extractor = (name) =>
+	`api-extractor run --local --verbose --config api-extractor.${name}.json`;
+
 // Parse command line
 const compile = {
 	core: false,
 	tsc: true,
 	bundles: true,
-	copy: true,
 	api: true,
+	finish: true,
 };
 process.argv.slice(2).forEach((cmd) => {
 	if (cmd.slice(0, 2) !== '--') {
@@ -72,23 +76,66 @@ if (compile.core) {
 
 // Compile other packages
 Object.keys(compile).forEach((key) => {
-	if (key !== 'core' && compile[key]) {
-		commands.push({
-			cmd: 'npm',
-			args: ['run', 'build:' + key],
-		});
+	if (!compile[key]) {
+		return;
+	}
+	switch (key) {
+		case 'core':
+			break;
+
+		case 'api':
+			apiFiles().forEach((name) => {
+				const cmd = extractor(name).split(' ');
+				commands.push({
+					cmd: cmd.shift(),
+					args: cmd,
+				});
+			});
+			break;
+
+		case 'finish':
+			commands.push(cleanup);
+			break;
+
+		default:
+			commands.push({
+				cmd: 'npm',
+				args: ['run', 'build:' + key],
+			});
 	}
 });
 
+/**
+ * Get all api-extractor.*.json files
+ */
+function apiFiles() {
+	return fs
+		.readdirSync(__dirname)
+		.map((item) => {
+			const parts = item.split('.');
+			if (parts.pop() !== 'json' || parts.shift() !== 'api-extractor') {
+				return '';
+			}
+			return parts.length === 1 ? parts[0] : '';
+		})
+		.filter((item) => item !== '');
+}
+
 /**
  * Run next command
  */
-const next = () => {
+function next() {
 	const item = commands.shift();
 	if (item === void 0) {
 		process.exit(0);
 	}
 
+	if (typeof item === 'function') {
+		item();
+		process.nextTick(next);
+		return;
+	}
+
 	if (item.cwd === void 0) {
 		item.cwd = __dirname;
 	}
@@ -103,5 +150,73 @@ const next = () => {
 	} else {
 		process.exit(result.status);
 	}
-};
+}
 next();
+
+/**
+ * Cleanup
+ */
+function cleanup() {
+	// Merge TypeScript files
+	const sourceDir = __dirname + '/src/';
+	const distDir = __dirname + '/dist/';
+
+	function createTypes() {
+		// Get Svelte file, split it. Import and content should be separated by empty line
+		const svelteParts = fs
+			.readFileSync(sourceDir + 'svelte.d.ts', 'utf8')
+			.trim()
+			.replace(/\r/g, '')
+			.split('\n\n');
+		if (svelteParts.lenght < 2) {
+			throw new Error(
+				'Error parsing svelte.d.ts. Imports and content should be separated by 2 new lines'
+			);
+		}
+		const svelteImport = svelteParts.shift() + '\n\n';
+		const svelteContent = '\n\n' + svelteParts.join('\n\n');
+
+		// Merge files
+		[
+			// Full component
+			{
+				source: 'iconify.d.ts',
+				target: 'index.d.ts',
+			},
+			{
+				source: 'iconify.d.ts',
+				target: 'Icon.svelte.d.ts',
+			},
+			// Offline component
+			{
+				source: 'offline-iconify.d.ts',
+				target: 'offline.d.ts',
+			},
+			{
+				source: 'offline-iconify.d.ts',
+				target: 'OfflineIcon.svelte.d.ts',
+			},
+		].forEach((item) => {
+			const content =
+				svelteImport +
+				fs
+					.readFileSync(distDir + item.source, 'utf8')
+					.replace('export { }', '')
+					.trim() +
+				svelteContent;
+			fs.writeFileSync(distDir + item.target, content, 'utf8');
+			console.log(`Created dist/${item.target}`);
+		});
+	}
+
+	function copyComponents() {
+		['Icon.svelte', 'OfflineIcon.svelte'].forEach((name) => {
+			const content = fs.readFileSync(sourceDir + name, 'utf8');
+			fs.writeFileSync(distDir + name, content, 'utf8');
+			console.log(`Copied dist/${name}`);
+		});
+	}
+
+	createTypes();
+	copyComponents();
+}
diff --git a/packages/svelte/copy.js b/packages/svelte/copy.js
deleted file mode 100644
index fb21504..0000000
--- a/packages/svelte/copy.js
+++ /dev/null
@@ -1,45 +0,0 @@
-const fs = require('fs');
-
-// Directories
-const rootDir = __dirname + '/';
-const distDir = 'dist';
-const sourceDir = 'src';
-const libDir = 'lib';
-
-// Create lib and dist
-try {
-	fs.mkdirSync(rootDir + libDir);
-} catch (err) {}
-try {
-	fs.mkdirSync(rootDir + distDir);
-} catch (err) {}
-
-// Copy Svelte files and definitions to lib
-// These files are required by api-extractor, not aren't created by tsc
-[
-	'Icon.svelte',
-	'Icon.svelte.d.ts',
-	'OfflineIcon.svelte',
-	'OfflineIcon.svelte.d.ts',
-].forEach((file) => {
-	const target = libDir + '/' + file;
-	const source = sourceDir + '/' + file;
-	fs.writeFileSync(rootDir + target, fs.readFileSync(rootDir + source));
-	console.log('copied', source, '->', target);
-});
-
-// Copy pre-compiled files
-// These files should not have imports that don't exist in all 3 directories: src, lib and dest
-[
-	'Icon.svelte',
-	'Icon.svelte.d.ts',
-	'OfflineIcon.svelte',
-	'OfflineIcon.svelte.d.ts',
-	'iconify.js',
-	'offline.js',
-].forEach((file) => {
-	const target = distDir + '/' + file;
-	const source = libDir + '/' + file;
-	fs.writeFileSync(rootDir + target, fs.readFileSync(rootDir + source));
-	console.log('copied', source, '->', target);
-});
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index b2486f3..e7f55ee 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.0.0-alpha.6",
+	"version": "2.0.0-alpha.7",
 	"license": "MIT",
 	"bugs": "https://github.com/iconify/iconify/issues",
 	"homepage": "https://github.com/iconify/iconify",
@@ -11,17 +11,15 @@
 		"url": "https://github.com/iconify/iconify.git",
 		"directory": "packages/svelte"
 	},
-	"svelte": "dist/iconify.js",
+	"svelte": "dist/Icon.svelte",
 	"module": "dist/bundle.mjs",
 	"main": "dist/bundle.js",
-	"types": "dist/iconify.d.ts",
+	"types": "dist/bundle.d.ts",
 	"scripts": {
 		"build": "node build",
-		"build:copy": "node copy",
 		"build:tsc": "tsc -b",
 		"build:bundles": "rollup -c rollup.config.js",
-		"prebuild:api": "api-extractor run --local --verbose --config api-extractor.offline.json",
-		"build:api": "api-extractor run --local --verbose --config api-extractor.iconify.json",
+		"build:api": "node build --only-api",
 		"pretest": "npm run build",
 		"test": "jest"
 	},
diff --git a/packages/svelte/rollup.config.js b/packages/svelte/rollup.config.js
index 3b14e39..e1bed2f 100644
--- a/packages/svelte/rollup.config.js
+++ b/packages/svelte/rollup.config.js
@@ -12,10 +12,10 @@ const sourceDir = 'src';
 export default [
 	// Bundle everything
 	{
-		input: sourceDir + '/iconify.ts',
+		input: sourceDir + '/Icon.svelte',
 		output: [
-			{ file: targetDir + '/bundle.mjs', format: 'es' },
-			{ file: targetDir + '/bundle.js', format: 'cjs' },
+			{ file: targetDir + '/index.mjs', format: 'es' },
+			{ file: targetDir + '/index.js', format: 'cjs' },
 		],
 		plugins: [
 			svelte({
@@ -29,10 +29,10 @@ export default [
 		],
 	},
 	{
-		input: sourceDir + '/offline.ts',
+		input: sourceDir + '/OfflineIcon.svelte',
 		output: [
-			{ file: targetDir + '/offline-bundle.mjs', format: 'es' },
-			{ file: targetDir + '/offline-bundle.js', format: 'cjs' },
+			{ file: targetDir + '/offline.mjs', format: 'es' },
+			{ file: targetDir + '/offline.js', format: 'cjs' },
 		],
 		plugins: [
 			svelte({
@@ -45,6 +45,7 @@ export default [
 			commonjs(),
 		],
 	},
+
 	// Files included in Icon.svelte as bundle
 	{
 		input: sourceDir + '/functions.ts',
diff --git a/packages/svelte/src/Icon.svelte b/packages/svelte/src/Icon.svelte
index fcc9446..e792885 100644
--- a/packages/svelte/src/Icon.svelte
+++ b/packages/svelte/src/Icon.svelte
@@ -1,3 +1,40 @@
+<script context="module">
+
+// Export stuff.
+// Important: duplicate of iconify.ts. When changing exports, they must be changed in both files.
+import { 
+	enableCache,
+	disableCache, 
+	iconExists,
+	getIcon,
+	listIcons,
+	addIcon,
+	addCollection,
+	calculateSize,
+	replaceIDs,
+	buildIcon,
+	loadIcons,
+	addAPIProvider,
+	_api
+} from './functions';
+
+export { 
+	enableCache,
+	disableCache, 
+	iconExists,
+	getIcon,
+	listIcons,
+	addIcon,
+	addCollection,
+	calculateSize,
+	replaceIDs,
+	buildIcon,
+	loadIcons,
+	addAPIProvider,
+	_api
+}
+
+</script>
 <script>
 	import { onMount, onDestroy } from 'svelte';
 	import { checkIconState, generateIcon } from './functions';
diff --git a/packages/svelte/src/OfflineIcon.svelte b/packages/svelte/src/OfflineIcon.svelte
index 6ccbf3e..0cf82f9 100644
--- a/packages/svelte/src/OfflineIcon.svelte
+++ b/packages/svelte/src/OfflineIcon.svelte
@@ -1,3 +1,18 @@
+<script context="module">
+
+// Export stuff.
+// Important: duplicate of offline-iconify.ts. When changing exports, they must be changed in both files.
+import {
+	addIcon,
+	addCollection
+} from './offline-functions';
+
+export {
+	addIcon,
+	addCollection
+}
+	
+</script>
 <script>
 	import { generateIcon } from './offline-functions';
 
diff --git a/packages/svelte/src/OfflineIcon.svelte.d.ts b/packages/svelte/src/OfflineIcon.svelte.d.ts
deleted file mode 100644
index 24b3b8f..0000000
--- a/packages/svelte/src/OfflineIcon.svelte.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { SvelteComponent } from 'svelte';
-
-export default class Icon extends SvelteComponent {}
diff --git a/packages/svelte/src/iconify.ts b/packages/svelte/src/iconify.ts
index 5194fb4..5809d4a 100644
--- a/packages/svelte/src/iconify.ts
+++ b/packages/svelte/src/iconify.ts
@@ -42,11 +42,11 @@ export { RawIconCustomisations, IconifyIconBuildResult } from './functions';
 // Browser cache
 export { IconifyBrowserCacheType } from './functions';
 
-// Component and params
-export { default as Icon } from './Icon.svelte';
+// Component params
 export { IconifyIconOnLoad } from './functions';
 
 // Functions
+// Important: duplicate of global exports in Icon.svelte. When changing exports, they must be changed in both files.
 export { enableCache, disableCache } from './functions';
 
 export {
diff --git a/packages/svelte/src/offline.ts b/packages/svelte/src/offline-iconify.ts
similarity index 77%
rename from packages/svelte/src/offline.ts
rename to packages/svelte/src/offline-iconify.ts
index c41e913..073ca94 100644
--- a/packages/svelte/src/offline.ts
+++ b/packages/svelte/src/offline-iconify.ts
@@ -10,8 +10,6 @@ export type {
 // Types from props.ts
 export type { IconifyIconCustomisations, IconProps } from './props';
 
-// Component
-export { default as Icon } from './OfflineIcon.svelte';
-
 // Functions
+// Important: duplicate of global exports in OfflineIcon.svelte. When changing exports, they must be changed in both files.
 export { addIcon, addCollection } from './offline-functions';
diff --git a/packages/svelte/src/Icon.svelte.d.ts b/packages/svelte/src/svelte.d.ts
similarity index 77%
rename from packages/svelte/src/Icon.svelte.d.ts
rename to packages/svelte/src/svelte.d.ts
index 24b3b8f..b56bc65 100644
--- a/packages/svelte/src/Icon.svelte.d.ts
+++ b/packages/svelte/src/svelte.d.ts
@@ -1,3 +1,6 @@
 import { SvelteComponent } from 'svelte';
 
+/**
+ * Svelte component
+ */
 export default class Icon extends SvelteComponent {}
diff --git a/packages/svelte/tests/api/10-api-mock.test.js b/packages/svelte/tests/api/10-api-mock.test.js
index b7baf8c..6c7dcc8 100644
--- a/packages/svelte/tests/api/10-api-mock.test.js
+++ b/packages/svelte/tests/api/10-api-mock.test.js
@@ -1,4 +1,4 @@
-import { loadIcons, iconExists } from '../../dist/iconify';
+import { loadIcons, iconExists } from '../../dist/';
 import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
 import { provider, nextPrefix } from './load';
 
diff --git a/packages/svelte/tests/api/20-rendering-from-api.test.js b/packages/svelte/tests/api/20-rendering-from-api.test.js
index 92d59e0..b3b0069 100644
--- a/packages/svelte/tests/api/20-rendering-from-api.test.js
+++ b/packages/svelte/tests/api/20-rendering-from-api.test.js
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/svelte';
-import { Icon, loadIcons, iconExists } from '../../dist/iconify';
+import Icon, { loadIcons, iconExists } from '../../dist/';
 import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
 import { provider, nextPrefix } from './load';
 
diff --git a/packages/svelte/tests/api/30-changing-props.test.js b/packages/svelte/tests/api/30-changing-props.test.js
index 41bcb75..fdeaf0f 100644
--- a/packages/svelte/tests/api/30-changing-props.test.js
+++ b/packages/svelte/tests/api/30-changing-props.test.js
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/svelte';
-import { iconExists } from '../../dist/iconify';
+import { iconExists } from '../../dist/';
 import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
 import { provider, nextPrefix } from './load';
 import ChangeIcon from './fixtures/ChangeIcon.svelte';
diff --git a/packages/svelte/tests/api/fixtures/ChangeIcon.svelte b/packages/svelte/tests/api/fixtures/ChangeIcon.svelte
index b05594a..3e32a98 100644
--- a/packages/svelte/tests/api/fixtures/ChangeIcon.svelte
+++ b/packages/svelte/tests/api/fixtures/ChangeIcon.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { Icon } from '../../../dist/iconify';
+    import Icon from '../../../dist/';
 
     export let icon1;
     export let icon2;
diff --git a/packages/svelte/tests/api/fixtures/ChangeProps.svelte b/packages/svelte/tests/api/fixtures/ChangeProps.svelte
index 83a48c9..f2f7a95 100644
--- a/packages/svelte/tests/api/fixtures/ChangeProps.svelte
+++ b/packages/svelte/tests/api/fixtures/ChangeProps.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { Icon } from '../../../dist/iconify';
+    import Icon from '../../../dist/';
 
     export let icon;
     export let expose;
diff --git a/packages/svelte/tests/api/load.js b/packages/svelte/tests/api/load.js
index 215edc7..bcd10c9 100644
--- a/packages/svelte/tests/api/load.js
+++ b/packages/svelte/tests/api/load.js
@@ -1,4 +1,4 @@
-import { _api, addAPIProvider } from '../../dist/iconify';
+import { _api, addAPIProvider } from '../../dist/';
 import { mockAPIModule } from '@iconify/core/lib/api/modules/mock';
 
 // API provider for tests
diff --git a/packages/svelte/tests/iconify/10-basic.test.js b/packages/svelte/tests/iconify/10-basic.test.js
index e878099..d52edb5 100644
--- a/packages/svelte/tests/iconify/10-basic.test.js
+++ b/packages/svelte/tests/iconify/10-basic.test.js
@@ -1,9 +1,8 @@
 import { render } from '@testing-library/svelte';
-import { Icon } from '../../dist/iconify';
+import Icon from '../../dist/';
 
 const iconData = {
-	body:
-		'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
+	body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
 	width: 24,
 	height: 24,
 };
diff --git a/packages/svelte/tests/iconify/10-empty.test.js b/packages/svelte/tests/iconify/10-empty.test.js
index d28f6c0..d948cf2 100644
--- a/packages/svelte/tests/iconify/10-empty.test.js
+++ b/packages/svelte/tests/iconify/10-empty.test.js
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/svelte';
-import { Icon } from '../../dist/iconify';
+import Icon from '../../dist/';
 
 describe('Empty icon', () => {
 	test('basic test', () => {
diff --git a/packages/svelte/tests/iconify/20-attributes.test.js b/packages/svelte/tests/iconify/20-attributes.test.js
index 428bdfe..341827d 100644
--- a/packages/svelte/tests/iconify/20-attributes.test.js
+++ b/packages/svelte/tests/iconify/20-attributes.test.js
@@ -1,9 +1,8 @@
 import { render } from '@testing-library/svelte';
-import { Icon } from '../../dist/iconify';
+import Icon from '../../dist/';
 
 const iconData = {
-	body:
-		'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
+	body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
 	width: 24,
 	height: 24,
 };
diff --git a/packages/svelte/tests/iconify/20-dimensions.test.js b/packages/svelte/tests/iconify/20-dimensions.test.js
index 2ee0d2b..d3bebf2 100644
--- a/packages/svelte/tests/iconify/20-dimensions.test.js
+++ b/packages/svelte/tests/iconify/20-dimensions.test.js
@@ -1,9 +1,8 @@
 import { render } from '@testing-library/svelte';
-import { Icon } from '../../dist/iconify';
+import Icon from '../../dist/';
 
 const iconData = {
-	body:
-		'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
+	body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
 	width: 24,
 	height: 24,
 };
diff --git a/packages/svelte/tests/iconify/20-ids.test.js b/packages/svelte/tests/iconify/20-ids.test.js
index c0dfb87..a35c7ce 100644
--- a/packages/svelte/tests/iconify/20-ids.test.js
+++ b/packages/svelte/tests/iconify/20-ids.test.js
@@ -1,9 +1,8 @@
 import { render } from '@testing-library/svelte';
-import { Icon } from '../../dist/iconify';
+import Icon from '../../dist/';
 
 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>',
+	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,
 };
diff --git a/packages/svelte/tests/iconify/20-inline.test.js b/packages/svelte/tests/iconify/20-inline.test.js
index 94ba5a5..6f23f81 100644
--- a/packages/svelte/tests/iconify/20-inline.test.js
+++ b/packages/svelte/tests/iconify/20-inline.test.js
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/svelte';
-import { Icon } from '../../dist/iconify';
+import Icon from '../../dist/';
 
 const iconData = {
 	body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
diff --git a/packages/svelte/tests/iconify/20-transformations.test.js b/packages/svelte/tests/iconify/20-transformations.test.js
index 2210bca..86c6095 100644
--- a/packages/svelte/tests/iconify/20-transformations.test.js
+++ b/packages/svelte/tests/iconify/20-transformations.test.js
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/svelte';
-import { Icon } from '../../dist/iconify';
+import Icon from '../../dist/';
 
 const iconData = {
 	body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
diff --git a/packages/svelte/tests/offline/10-basic.test.js b/packages/svelte/tests/offline/10-basic.test.js
index 4dd636c..372e3db 100644
--- a/packages/svelte/tests/offline/10-basic.test.js
+++ b/packages/svelte/tests/offline/10-basic.test.js
@@ -1,9 +1,8 @@
 import { render } from '@testing-library/svelte';
-import { Icon } from '../../dist/offline';
+import Icon from '../../dist/offline';
 
 const iconData = {
-	body:
-		'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
+	body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
 	width: 24,
 	height: 24,
 };
diff --git a/packages/svelte/tests/offline/10-empty.test.js b/packages/svelte/tests/offline/10-empty.test.js
index d28f6c0..5323e3e 100644
--- a/packages/svelte/tests/offline/10-empty.test.js
+++ b/packages/svelte/tests/offline/10-empty.test.js
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/svelte';
-import { Icon } from '../../dist/iconify';
+import Icon from '../../dist/offline';
 
 describe('Empty icon', () => {
 	test('basic test', () => {
diff --git a/packages/svelte/tests/offline/20-attributes.test.js b/packages/svelte/tests/offline/20-attributes.test.js
index 65043c0..f962157 100644
--- a/packages/svelte/tests/offline/20-attributes.test.js
+++ b/packages/svelte/tests/offline/20-attributes.test.js
@@ -1,9 +1,8 @@
 import { render } from '@testing-library/svelte';
-import { Icon } from '../../dist/offline';
+import Icon from '../../dist/offline';
 
 const iconData = {
-	body:
-		'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
+	body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
 	width: 24,
 	height: 24,
 };
diff --git a/packages/svelte/tests/offline/20-dimensions.test.js b/packages/svelte/tests/offline/20-dimensions.test.js
index 95e40a2..9daff49 100644
--- a/packages/svelte/tests/offline/20-dimensions.test.js
+++ b/packages/svelte/tests/offline/20-dimensions.test.js
@@ -1,9 +1,8 @@
 import { render } from '@testing-library/svelte';
-import { Icon } from '../../dist/offline';
+import Icon from '../../dist/offline';
 
 const iconData = {
-	body:
-		'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
+	body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
 	width: 24,
 	height: 24,
 };
diff --git a/packages/svelte/tests/offline/20-ids.test.js b/packages/svelte/tests/offline/20-ids.test.js
index 0b5cd55..7ec2ef6 100644
--- a/packages/svelte/tests/offline/20-ids.test.js
+++ b/packages/svelte/tests/offline/20-ids.test.js
@@ -1,9 +1,8 @@
 import { render } from '@testing-library/svelte';
-import { Icon } from '../../dist/offline';
+import Icon from '../../dist/offline';
 
 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>',
+	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,
 };
diff --git a/packages/svelte/tests/offline/20-inline.test.js b/packages/svelte/tests/offline/20-inline.test.js
index ca0e736..dd63bed 100644
--- a/packages/svelte/tests/offline/20-inline.test.js
+++ b/packages/svelte/tests/offline/20-inline.test.js
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/svelte';
-import { Icon } from '../../dist/offline';
+import Icon from '../../dist/offline';
 
 const iconData = {
 	body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
diff --git a/packages/svelte/tests/offline/20-storage.test.js b/packages/svelte/tests/offline/20-storage.test.js
index c018d85..c807fc3 100644
--- a/packages/svelte/tests/offline/20-storage.test.js
+++ b/packages/svelte/tests/offline/20-storage.test.js
@@ -1,9 +1,8 @@
 import { render } from '@testing-library/svelte';
-import { Icon, addIcon, addCollection } from '../../dist/offline';
+import Icon, { addIcon, addCollection } from '../../dist/offline';
 
 const iconData = {
-	body:
-		'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
+	body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
 	width: 24,
 	height: 24,
 };
@@ -26,12 +25,10 @@ describe('Using storage', () => {
 			prefix: 'mdi-light',
 			icons: {
 				account: {
-					body:
-						'<path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.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-5z" fill="currentColor"/>',
+					body: '<path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.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-5z" fill="currentColor"/>',
 				},
 				home: {
-					body:
-						'<path d="M16 8.414l-4.5-4.5L4.414 11H6v8h3v-6h5v6h3v-8h1.586L17 9.414V6h-1v2.414zM2 12l9.5-9.5L15 6V5h3v4l3 3h-3v7.998h-5v-6h-3v6H5V12H2z" fill="currentColor"/>',
+					body: '<path d="M16 8.414l-4.5-4.5L4.414 11H6v8h3v-6h5v6h3v-8h1.586L17 9.414V6h-1v2.414zM2 12l9.5-9.5L15 6V5h3v4l3 3h-3v7.998h-5v-6h-3v6H5V12H2z" fill="currentColor"/>',
 				},
 			},
 			width: 24,
@@ -54,12 +51,10 @@ describe('Using storage', () => {
 			prefix: 'mdi-light',
 			icons: {
 				'account-alert': {
-					body:
-						'<path d="M10.5 14c4.142 0 7.5 1.567 7.5 3.5V20H3v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S4 16.12 4 17.5V19h13v-1.5zM10.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM20 16v-1h1v1h-1zm0-3V7h1v6h-1z" fill="currentColor"/>',
+					body: '<path d="M10.5 14c4.142 0 7.5 1.567 7.5 3.5V20H3v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S4 16.12 4 17.5V19h13v-1.5zM10.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM20 16v-1h1v1h-1zm0-3V7h1v6h-1z" fill="currentColor"/>',
 				},
 				'link': {
-					body:
-						'<path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"/>',
+					body: '<path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"/>',
 				},
 			},
 			width: 24,
diff --git a/packages/svelte/tests/offline/20-transformations.test.js b/packages/svelte/tests/offline/20-transformations.test.js
index c44cafa..aa428a8 100644
--- a/packages/svelte/tests/offline/20-transformations.test.js
+++ b/packages/svelte/tests/offline/20-transformations.test.js
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/svelte';
-import { Icon } from '../../dist/offline';
+import Icon from '../../dist/offline';
 
 const iconData = {
 	body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',