diff --git a/packages/react/src/iconify.ts b/packages/react/src/iconify.ts
index 06e4c6a..b705d7b 100644
--- a/packages/react/src/iconify.ts
+++ b/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 =
- typeof fetch === 'function' && typeof Promise === 'function'
- ? getFetchAPIModule
- : getJSONPAPIModule;
+ 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) {
- 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,
diff --git a/packages/react/tests/api/10-api-mock.test.js b/packages/react/tests/api/10-api-mock.test.js
new file mode 100644
index 0000000..39871e9
--- /dev/null
+++ b/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: '',
+ },
+ },
+ },
+ });
+
+ // 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();
+ });
+ });
+});
diff --git a/packages/react/tests/api/20-rendering-from-api.js b/packages/react/tests/api/20-rendering-from-api.js
new file mode 100644
index 0000000..333034c
--- /dev/null
+++ b/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:
+ '',
+ 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();
+ 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();
+ });
+ });
+});
diff --git a/packages/react/tests/api/load.js b/packages/react/tests/api/load.js
new file mode 100644
index 0000000..e6483e9
--- /dev/null
+++ b/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++;
diff --git a/packages/react/tests/iconify/10-basic.test.js b/packages/react/tests/iconify/10-basic.test.js
index beaec32..6ddef24 100644
--- a/packages/react/tests/iconify/10-basic.test.js
+++ b/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 = {
diff --git a/packages/react/tests/iconify/10-empty.test.js b/packages/react/tests/iconify/10-empty.test.js
index 6216f70..4c2854a 100644
--- a/packages/react/tests/iconify/10-empty.test.js
+++ b/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', () => {
diff --git a/packages/react/tests/iconify/20-attributes.test.js b/packages/react/tests/iconify/20-attributes.test.js
index f8fec54..e3623b7 100644
--- a/packages/react/tests/iconify/20-attributes.test.js
+++ b/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 = {
diff --git a/packages/react/tests/iconify/20-dimensions.test.js b/packages/react/tests/iconify/20-dimensions.test.js
index 887ddf9..27f3718 100644
--- a/packages/react/tests/iconify/20-dimensions.test.js
+++ b/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 = {
diff --git a/packages/react/tests/iconify/20-ids.test.js b/packages/react/tests/iconify/20-ids.test.js
index 22100a0..f3bf3d8 100644
--- a/packages/react/tests/iconify/20-ids.test.js
+++ b/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 = {
diff --git a/packages/react/tests/iconify/20-inline.test.js b/packages/react/tests/iconify/20-inline.test.js
index 9d62fd9..c8a1d1c 100644
--- a/packages/react/tests/iconify/20-inline.test.js
+++ b/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 = {
diff --git a/packages/react/tests/iconify/20-transformations.test.js b/packages/react/tests/iconify/20-transformations.test.js
index 020d924..7a513f4 100644
--- a/packages/react/tests/iconify/20-transformations.test.js
+++ b/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 = {
diff --git a/packages/react/tests/offline/10-basic.test.js b/packages/react/tests/offline/10-basic.test.js
index e78fdbf..168efd7 100644
--- a/packages/react/tests/offline/10-basic.test.js
+++ b/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 = {
diff --git a/packages/react/tests/offline/10-empty.test.js b/packages/react/tests/offline/10-empty.test.js
index 5dd2b83..cae57a3 100644
--- a/packages/react/tests/offline/10-empty.test.js
+++ b/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', () => {
diff --git a/packages/react/tests/offline/20-attributes.test.js b/packages/react/tests/offline/20-attributes.test.js
index bcb4e82..03051ed 100644
--- a/packages/react/tests/offline/20-attributes.test.js
+++ b/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 = {
diff --git a/packages/react/tests/offline/20-dimensions.test.js b/packages/react/tests/offline/20-dimensions.test.js
index 583bd74..0924f22 100644
--- a/packages/react/tests/offline/20-dimensions.test.js
+++ b/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 = {
diff --git a/packages/react/tests/offline/20-ids.test.js b/packages/react/tests/offline/20-ids.test.js
index 2a3f863..948c4d0 100644
--- a/packages/react/tests/offline/20-ids.test.js
+++ b/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 = {
diff --git a/packages/react/tests/offline/20-inline.test.js b/packages/react/tests/offline/20-inline.test.js
index a476fa3..7d8ab68 100644
--- a/packages/react/tests/offline/20-inline.test.js
+++ b/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 = {
diff --git a/packages/react/tests/offline/20-storage.test.js b/packages/react/tests/offline/20-storage.test.js
index 22769d0..fc79a39 100644
--- a/packages/react/tests/offline/20-storage.test.js
+++ b/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 = {
diff --git a/packages/react/tests/offline/20-transformations.test.js b/packages/react/tests/offline/20-transformations.test.js
index f55d85f..094a557 100644
--- a/packages/react/tests/offline/20-transformations.test.js
+++ b/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 = {