Vue 2 component with API support

packages/vue2/src/iconify.ts

@@ -1,72 +1,292 @@
 import Vue, { CreateElement, VNode } from 'vue';
 import { ExtendedVue } from 'vue/types/vue';
-import { IconifyIcon, IconifyJSON } from '@iconify/types';
+import { IconifyJSON } from '@iconify/types';
+
+// Core
+import { IconifyIconName } from '@iconify/core/lib/icon/name';
 import {
+	IconifyIconSize,
 	IconifyHorizontalIconAlignment,
 	IconifyVerticalIconAlignment,
-	IconifyIconSize,
 } from '@iconify/core/lib/customisations';
-import { fullIcon } from '@iconify/core/lib/icon';
-import { parseIconSet } from '@iconify/core/lib/icon/icon-set';
 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 {
+	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 {
+	IconifyBrowserCacheType,
+	IconifyBrowserCacheFunctions,
+} from '@iconify/core/lib/browser-storage/functions';
+
+// Properties
+import {
+	IconProps,
 	IconifyIconCustomisations,
 	IconifyIconProps,
-	IconProps,
 } from './props';
+
+// Render SVG
 import { render } from './render';
 
 /**
- * Export stuff from props.ts
+ * Export required types
- */
-export { IconifyIconCustomisations, IconifyIconProps, IconProps };
-
-/**
- * Export types that could be used in component
  */
+// Function sets
 export {
-	IconifyIcon,
+	IconifyStorageFunctions,
-	IconifyJSON,
+	IconifyBuilderFunctions,
-	IconifyHorizontalIconAlignment,
+	IconifyBrowserCacheFunctions,
-	IconifyVerticalIconAlignment,
+	IconifyAPIFunctions,
-	IconifyIconSize,
+	IconifyAPIInternalFunctions,
 };
 
-/**
+// JSON stuff
- * Storage for icons referred by name
+export { IconifyIcon, IconifyJSON, IconifyIconName };
- */
+
-const storage: Record<string, Required<IconifyIcon>> = Object.create(null);
+// Customisations
+export {
+	IconifyIconCustomisations,
+	IconifyIconSize,
+	IconifyHorizontalIconAlignment,
+	IconifyVerticalIconAlignment,
+	IconifyIconProps,
+	IconProps,
+};
+
+// API
+export {
+	IconifyAPIConfig,
+	IconifyIconLoaderCallback,
+	IconifyIconLoaderAbort,
+	IconifyAPIInternalStorage,
+	IconifyAPIModule,
+	GetAPIConfig,
+	IconifyAPIPrepareQuery,
+	IconifyAPISendQuery,
+	PartialIconifyAPIConfig,
+};
+
+/* Browser cache */
+export { IconifyBrowserCacheType };
 
 /**
- * Add icon to storage, allowing to call it by name
+ * Enable and disable browser cache
- *
- * @param name
- * @param data
  */
-export function addIcon(name: string, data: IconifyIcon): void {
+export const enableCache = (storage: IconifyBrowserCacheType) =>
-	storage[name] = fullIcon(data);
+	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));
+	}
 }
 
 /**
- * Add collection to storage, allowing to call icons by name
+ * Browser stuff
- *
- * @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(
+if (typeof document !== 'undefined' && typeof window !== 'undefined') {
-	data: IconifyJSON,
+	// Set cache and load existing cache
-	prefix?: string | boolean
+	coreModules.cache = storeCache;
-): void {
+	loadCache();
-	const iconPrefix: string =
+
-		typeof prefix === 'string'
+	const _window = window;
-			? prefix
+
-			: prefix !== false && typeof data.prefix === 'string'
+	// Load icons from global "IconifyPreload"
-			? data.prefix + ':'
+	interface WindowWithIconifyPreload {
-			: '';
+		IconifyPreload: IconifyJSON[] | IconifyJSON;
-	parseIconSet(data, (name, icon) => {
+	}
-		if (icon !== null) {
+	if (
-			storage[iconPrefix + name] = icon;
+		((_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);
+				}
+			}
+		}
+	}
 }
 
 /**
@@ -77,27 +297,87 @@ export const Icon = Vue.extend({
 	// In Vue 2 style is still passed!
 	inheritAttrs: false,
 
+	// Set initial data
+	data() {
+		return {
+			// Mounted status
+			mounted: false,
+		};
+	},
+
+	beforeMount() {
+		// Current icon name
+		this._name = '';
+
+		// Loading
+		this._loadingIcon = null;
+
+		// Mark as mounted
+		this.mounted = true;
+	},
+
+	beforeDestroy() {
+		this.abortLoading();
+	},
+
+	methods: {
+		abortLoading() {
+			if (this._loadingIcon) {
+				this._loadingIcon.abort();
+				this._loadingIcon = null;
+			}
+		},
+		// Get data for icon to render or null
+		getIcon(icon) {
+			// Icon is an object
+			if (
+				typeof icon === 'object' &&
+				icon !== null &&
+				typeof icon.body === 'string'
+			) {
+				// Stop loading
+				this._name = '';
+				this.abortLoading();
+				return fullIcon(icon);
+			}
+
+			// Invalid icon?
+			if (typeof icon !== 'string') {
+				this.abortLoading();
+				return null;
+			}
+
+			// Load icon
+			const data = getIconData(icon);
+			if (data === null) {
+				// Icon needs to be loaded
+				if (!this._loadingIcon || this._loadingIcon.name !== icon) {
+					// New icon to load
+					this.abortLoading();
+					this._name = '';
+					this._loadingIcon = {
+						name: icon,
+						abort: API.loadIcons([icon], () => {
+							this.$forceUpdate();
+						}),
+					};
+				}
+				return null;
+			}
+
+			// Icon data is available
+			this._name = icon;
+			this.abortLoading();
+			return data;
+		},
+	},
+
 	// Render icon
 	render(createElement: CreateElement): VNode {
-		const props = this.$attrs;
+		function placeholder(slots): VNode {
-
-		// Check icon
-		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'
-		) {
 			// Render child nodes
-			if (this.$slots.default) {
+			if (slots.default) {
-				const result = this.$slots.default;
+				const result = slots.default;
 				if (result instanceof Array && result.length > 0) {
 					// If there are multiple child nodes, they must be wrapped in Vue 2
 					return result.length === 1
@@ -107,6 +387,19 @@ export const Icon = Vue.extend({
 			}
 			return (null as unknown) as VNode;
 		}
+		if (!this.mounted) {
+			return placeholder(this.$slots);
+		}
+
+		// Get icon data
+		const props = this.$attrs;
+		const icon = this.getIcon(props.icon);
+
+		// Validate icon object
+		if (!icon) {
+			// Render child nodes
+			return placeholder(this.$slots);
+		}
 
 		// Valid icon: render it
 		return render(createElement, props, this.$data, icon);

packages/vue2/tests/api/10-api-mock.test.js

@@ -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();
+		});
+	});
+});

packages/vue2/tests/api/20-rendering-from-api.test.js

@@ -0,0 +1,158 @@
+import { mount } from '@vue/test-utils';
+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 Wrapper = {
+				components: { Icon },
+				template: `<Icon icon="${iconName}" />`,
+			};
+			const wrapper = mount(Wrapper, {});
+			const html = wrapper.html().replace(/\s*\n\s*/g, '');
+
+			// 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(() => {
+						// Check HTML
+						expect(wrapper.html().replace(/\s*\n\s*/g, '')).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 Wrapper = {
+			components: { Icon },
+			template: `<Icon icon="${iconName}" />`,
+		};
+		const wrapper = mount(Wrapper, {});
+
+		// Should render empty icon
+		expect(wrapper.html()).toEqual('');
+	});
+
+	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(() => {
+						expect(wrapper.html()).toEqual('');
+
+						done();
+					}, 0);
+				}, 0);
+			},
+		});
+
+		// Check if icon has been loaded
+		expect(iconExists(iconName)).toEqual(false);
+
+		// Render component
+		const Wrapper = {
+			components: { Icon },
+			template: `<Icon icon="${iconName}" />`,
+		};
+		const wrapper = mount(Wrapper, {});
+
+		// Should render empty icon
+		expect(wrapper.html()).toEqual('');
+	});
+});

packages/vue2/tests/api/30-changing-props.test.js

@@ -0,0 +1,263 @@
+import { mount } from '@vue/test-utils';
+import { Icon, 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,
+};
+
+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}`;
+
+		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 (one to handle API response, one to re-render)
+				setTimeout(() => {
+					setTimeout(() => {
+						expect(wrapper.html().replace(/\s*\n\s*/g, '')).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>'
+						);
+
+						wrapper.setProps({
+							icon: iconName2,
+						});
+					}, 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(() => {
+						expect(wrapper.html().replace(/\s*\n\s*/g, '')).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 wrapper = mount(Icon, {
+			propsData: {
+				icon: iconName,
+			},
+		});
+
+		// Should render placeholder
+		expect(wrapper.html()).toEqual('');
+	});
+
+	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}`;
+		let isSync = true;
+
+		mockAPIData({
+			provider,
+			prefix,
+			response: {
+				prefix,
+				icons: {
+					[name]: iconData,
+				},
+			},
+			delay: (next) => {
+				// Should have been called asynchronously, which means icon name has changed
+				expect(isSync).toEqual(false);
+
+				// Send icon data
+				next();
+			},
+		});
+
+		mockAPIData({
+			provider,
+			prefix,
+			response: {
+				prefix,
+				icons: {
+					[name2]: iconData2,
+				},
+			},
+			delay: (next) => {
+				// Should have been called asynchronously
+				expect(isSync).toEqual(false);
+
+				// 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 (one to handle API response, one to re-render)
+				setTimeout(() => {
+					setTimeout(() => {
+						expect(wrapper.html().replace(/\s*\n\s*/g, '')).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 wrapper = mount(Icon, {
+			propsData: {
+				icon: iconName,
+			},
+		});
+
+		// Should render placeholder
+		expect(wrapper.html()).toEqual('');
+
+		// Change icon name
+		wrapper.setProps({
+			icon: iconName2,
+		});
+
+		// Async
+		isSync = false;
+	});
+
+	test('changing multiple properties', (done) => {
+		const prefix = nextPrefix();
+		const name = 'multiple-props';
+		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 (one to handle API response, one to re-render)
+				setTimeout(() => {
+					setTimeout(() => {
+						expect(wrapper.html().replace(/\s*\n\s*/g, '')).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
+						wrapper.setProps({
+							icon: iconName,
+							hFlip: true,
+							// Vue 2 issue: changing style in unit test doesn't work, so changing color
+							// TODO: test changing style in live demo to see if its a unit test bug or component issue
+							color: 'red',
+						});
+
+						// Wait for 1 tick
+						setTimeout(() => {
+							expect(
+								wrapper.html().replace(/\s*\n\s*/g, '')
+							).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" style="color: red;"><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);
+			},
+		});
+
+		// Check if icon has been loaded
+		expect(iconExists(iconName)).toEqual(false);
+
+		// Render component with placeholder text
+		const wrapper = mount(Icon, {
+			propsData: {
+				icon: iconName,
+			},
+		});
+
+		// Should be empty
+		expect(wrapper.html()).toEqual('');
+	});
+});

packages/vue2/tests/api/load.js

@@ -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++;