Support addIcon, addCollection and referencing icon by name in Svelte component

packages/svelte-demo/src/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { Icon } from '@iconify/svelte';
+	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';
@@ -18,6 +18,8 @@
 		width: 128,
 		height: 128,
 	};	
+
+	addIcon('demo', adminCustomizer);
 </script>
 
 <style>
@@ -89,6 +91,10 @@
 			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!

packages/svelte/package.json

@@ -2,7 +2,7 @@
 	"name": "@iconify/svelte",
 	"description": "Iconify icon component for Svelte.",
 	"author": "Vjacheslav Trushkin",
-	"version": "1.0.4",
+	"version": "2.0.0-dev",
 	"license": "MIT",
 	"bugs": "https://github.com/iconify/iconify/issues",
 	"homepage": "https://github.com/iconify/iconify",

packages/svelte/rollup.config.js

@@ -10,7 +10,7 @@ import pkg from './package.json';
 try {
 	fs.mkdirSync(__dirname + '/dist');
 } catch (err) {}
-['Icon.svelte'].forEach((file) => {
+['OfflineIcon.svelte'].forEach((file) => {
 	fs.writeFileSync(
 		__dirname + '/dist/' + file,
 		fs.readFileSync(__dirname + '/src/' + file)
@@ -48,12 +48,12 @@ export default [
 			commonjs(),
 		],
 	},
-	// Files included in Icon.svelte as bundles without dependencies
+	// Files included in OfflineIcon.svelte as bundles without dependencies
 	{
-		input: 'src/generate-icon.ts',
+		input: 'src/offline.ts',
 		output: [
 			{
-				file: 'dist/generate-icon.js',
+				file: 'dist/offline.js',
 				format: 'es',
 			},
 		],

packages/svelte/src/OfflineIcon.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { generateIcon } from './generate-icon';
+	import { generateIcon } from './offline';
 
 	// Generated data
 	let data;
@@ -9,6 +9,10 @@
 	}
 </script>
 
+{#if data === null}
+	<slot />
+{:else}
 <svg {...data.attributes}>
 	{@html data.body}
 </svg>
+{/if}

packages/svelte/src/index.ts

@@ -1 +1,2 @@
-export { default as Icon } from './Icon.svelte';
+export { default as Icon } from './OfflineIcon.svelte';
+export { addIcon, addCollection } from './offline';

packages/svelte/src/offline.ts

@@ -0,0 +1,68 @@
+import type { IconifyIcon, IconifyJSON } from '@iconify/types';
+import { fullIcon } from '@iconify/core/lib/icon';
+import { parseIconSet } from '@iconify/core/lib/icon/icon-set';
+import { render } from './render';
+import type { RenderResult } from './render';
+import type { IconProps } from './props';
+
+/**
+ * Storage for icons referred by name
+ */
+const storage: Record<string, Required<IconifyIcon>> = Object.create(null);
+
+/**
+ * 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;
+		}
+	});
+}

packages/svelte/src/render.ts

@@ -1,3 +1,4 @@
+import type { IconifyIcon } from '@iconify/types';
 import { defaults } from '@iconify/core/lib/customisations';
 import {
 	flipFromString,
@@ -23,7 +24,7 @@ const svgDefaults = {
 /**
  * Result
  */
-export interface GenerateIconResult {
+export interface RenderResult {
 	attributes: Record<string, unknown>;
 	body: string;
 }
@@ -31,15 +32,12 @@ export interface GenerateIconResult {
 /**
  * Generate icon from properties
  */
-export function generateIcon(props: IconProps): GenerateIconResult {
-	let iconData = fullIcon(props.icon);
-	if (!iconData) {
-		return {
-			attributes: svgDefaults,
-			body: '',
-		};
-	}
-
+export function render(
+	// Icon must be validated before calling this function
+	icon: Required<IconifyIcon>,
+	// Properties
+	props: IconProps
+): RenderResult {
 	const customisations = merge(defaults, props as typeof defaults);
 	const componentProps = merge(svgDefaults) as Record<string, unknown>;
 
@@ -100,7 +98,7 @@ export function generateIcon(props: IconProps): GenerateIconResult {
 	}
 
 	// Generate icon
-	const item = iconToSVG(iconData, customisations);
+	const item = iconToSVG(icon, customisations);
 
 	// Add icon stuff
 	for (let key in item.attributes) {