Refactoring React: full component, without automatic data loading yet

packages/react/src/iconify.ts

@@ -186,19 +186,23 @@ allowSimpleNames(true);
 // Set API
 coreModules.api = API;
 
-let getAPIModule: GetIconifyAPIModule;
+// Use Fetch API by default
+let getAPIModule: GetIconifyAPIModule = getFetchAPIModule;
 try {
-	getAPIModule =
+	if (typeof document !== 'undefined' && typeof window !== 'undefined') {
-		typeof fetch === 'function' && typeof Promise === 'function'
+		// If window and document exist, attempt to load whatever module is available, otherwise use Fetch API
-			? getFetchAPIModule
+		getAPIModule =
-			: getJSONPAPIModule;
+			typeof fetch === 'function' && typeof Promise === 'function'
+				? getFetchAPIModule
+				: getJSONPAPIModule;
+	}
 } catch (err) {
-	getAPIModule = getJSONPAPIModule;
+	//
 }
 setAPIModule('', getAPIModule(getAPIConfig));
 
 /**
- * Enable node-fetch for getting icons on server side
+ * Function to enable node-fetch for getting icons on server side
  */
 export function setNodeFetch(nodeFetch: typeof fetch) {
 	setFetch(nodeFetch);
@@ -288,10 +292,6 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') {
 /**
  * Component
  */
-
-/**
- * Generate icon
- */
 function component(
 	props: IconProps,
 	inline: boolean,

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

@@ -0,0 +1,40 @@
+import { loadIcons, iconExists } from '../../lib/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/react/tests/api/20-rendering-from-api.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Icon, loadIcons, iconExists } from '../../lib/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 = 'mock-test';
+		const iconName = `@${provider}:${prefix}:${name}`;
+		mockAPIData({
+			provider,
+			prefix,
+			response: {
+				prefix,
+				icons: {
+					[name]: iconData,
+				},
+			},
+		});
+
+		// Check if icon has been loaded
+		expect(iconExists(iconName)).toEqual(false);
+
+		// Load icon
+		loadIcons([iconName], (loaded, missing, pending) => {
+			// Make sure icon has been loaded
+			expect(loaded).toMatchObject([
+				{
+					provider,
+					prefix,
+					name,
+				},
+			]);
+			expect(missing).toMatchObject([]);
+			expect(pending).toMatchObject([]);
+			expect(iconExists(iconName)).toEqual(true);
+
+			// Render component
+			const component = renderer.create(<Icon icon={iconName} />);
+			const tree = component.toJSON();
+
+			expect(tree).toMatchObject({
+				type: 'svg',
+				props: {
+					'xmlns': 'http://www.w3.org/2000/svg',
+					'xmlnsXlink': 'http://www.w3.org/1999/xlink',
+					'aria-hidden': true,
+					'role': 'img',
+					'style': {},
+					'dangerouslySetInnerHTML': {
+						__html: iconData.body,
+					},
+					'width': '1em',
+					'height': '1em',
+					'preserveAspectRatio': 'xMidYMid meet',
+					'viewBox': '0 0 ' + iconData.width + ' ' + iconData.height,
+				},
+				children: null,
+			});
+
+			done();
+		});
+	});
+});

packages/react/tests/api/load.js

@@ -0,0 +1,15 @@
+import { _api, addAPIProvider } from '../../lib/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++;

packages/react/tests/iconify/10-basic.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, InlineIcon } from '../../dist/iconify';
+import { Icon, InlineIcon } from '../../lib/iconify';
 import renderer from 'react-test-renderer';
 
 const iconData = {

packages/react/tests/iconify/10-empty.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '../../dist/iconify';
+import { Icon } from '../../lib/iconify';
 import renderer from 'react-test-renderer';
 
 describe('Empty icon', () => {

packages/react/tests/iconify/20-attributes.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, InlineIcon } from '../../dist/iconify';
+import { Icon, InlineIcon } from '../../lib/iconify';
 import renderer from 'react-test-renderer';
 
 const iconData = {

packages/react/tests/iconify/20-dimensions.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InlineIcon } from '../../dist/iconify';
+import { InlineIcon } from '../../lib/iconify';
 import renderer from 'react-test-renderer';
 
 const iconData = {

packages/react/tests/iconify/20-ids.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '../../dist/iconify';
+import { Icon } from '../../lib/iconify';
 import renderer from 'react-test-renderer';
 
 const iconDataWithID = {

packages/react/tests/iconify/20-inline.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '../../dist/iconify';
+import { Icon } from '../../lib/iconify';
 import renderer from 'react-test-renderer';
 
 const iconData = {

packages/react/tests/iconify/20-transformations.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InlineIcon } from '../../dist/iconify';
+import { InlineIcon } from '../../lib/iconify';
 import renderer from 'react-test-renderer';
 
 const iconData = {

packages/react/tests/offline/10-basic.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, InlineIcon } from '../../dist/offline';
+import { Icon, InlineIcon } from '../../lib/offline';
 import renderer from 'react-test-renderer';
 
 const iconData = {

packages/react/tests/offline/10-empty.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '../../dist/offline';
+import { Icon } from '../../lib/offline';
 import renderer from 'react-test-renderer';
 
 describe('Empty icon', () => {

packages/react/tests/offline/20-attributes.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, InlineIcon } from '../../dist/offline';
+import { Icon, InlineIcon } from '../../lib/offline';
 import renderer from 'react-test-renderer';
 
 const iconData = {

packages/react/tests/offline/20-dimensions.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InlineIcon } from '../../dist/offline';
+import { InlineIcon } from '../../lib/offline';
 import renderer from 'react-test-renderer';
 
 const iconData = {

packages/react/tests/offline/20-ids.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '../../dist/offline';
+import { Icon } from '../../lib/offline';
 import renderer from 'react-test-renderer';
 
 const iconDataWithID = {

packages/react/tests/offline/20-inline.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '../../dist/offline';
+import { Icon } from '../../lib/offline';
 import renderer from 'react-test-renderer';
 
 const iconData = {

packages/react/tests/offline/20-storage.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, addIcon, addCollection } from '../../dist/offline';
+import { Icon, addIcon, addCollection } from '../../lib/offline';
 import renderer from 'react-test-renderer';
 
 const iconData = {

packages/react/tests/offline/20-transformations.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InlineIcon } from '../../dist/offline';
+import { InlineIcon } from '../../lib/offline';
 import renderer from 'react-test-renderer';
 
 const iconData = {