@dynamic-labs/iconic 0.1.51 → 1.1.0-alpha.25

package/README.md

@@ -2,7 +2,6 @@
 
 1. Add the SVG file to the appropriate folder
 1. Add a `createIconic` component to the `index.ts` in that folder for that icon (iconName should be lowercase)
-1. Bump the version in package.json
 1. run `nvm use`
 1. run `yarn install` if not yet
 1. run `yarn test -u` to update test fixtures
@@ -15,13 +14,8 @@
 1. Open a PR
 1. After merge Release (see below), which will update the sprite.svg
 
-*It will take up to 24 hours for new icon to be seen due to cache*
+_It will take up to 24 hours for new icon to be seen due to cache_
 
 ### Releasing
 
 This process updates Dynamic's sprite.svg
-
-## Prereq
-Don't forget to bump the version in package.json if you added any new file
-
-Run github action (publish)[https://github.com/dynamic-labs/iconic/actions/workflows/publish.yml] to publish new version and deploy sprite svg

package/_virtual/_tslib.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+exports.__rest = __rest;

package/_virtual/_tslib.js

@@ -0,0 +1,33 @@
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+export { __rest };

package/package.json

@@ -1,68 +1,35 @@
 {
   "name": "@dynamic-labs/iconic",
-  "version": "0.1.51",
-  "description": "A library of icons used by Dynamic Lab's SDK, served via CDN",
-  "main": "dist/src/index.js",
-  "scripts": {
-    "build": "rimraf dist build && tsc && ts-node ./scripts/build-sprite.ts",
-    "test": "jest",
-    "lint": "eslint .",
-    "lint:fix": "eslint --fix",
-    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
-  },
+  "version": "1.1.0-alpha.25",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/dynamic-labs/iconic.git"
+    "url": "https://github.com/dynamic-labs/DynamicAuth.git",
+    "directory": "packages/iconic"
   },
-  "author": "Dynamic Labs, Inc.",
-  "license": "MIT",
+  "description": "A React SDK for implementing wallet web3 authentication and authorization to your website.",
   "bugs": {
-    "url": "https://github.com/dynamic-labs/iconic/issues"
-  },
-  "homepage": "https://github.com/dynamic-labs/iconic#readme",
-  "devDependencies": {
-    "@babel/preset-react": "^7.18.6",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@types/fs-extra": "^11.0.1",
-    "@types/jest": "^29.4.0",
-    "@types/node": "^18.13.0",
-    "@types/react": "^18.0.27",
-    "@types/svg-sprite": "^0.0.34",
-    "@types/svgo": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.0.0",
-    "eslint": "^8.0.1",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-config-standard-with-typescript": "^34.0.0",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-n": "^15.0.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-react": "^7.32.2",
-    "fs-extra": "^11.1.0",
-    "jest": "^29.4.2",
-    "jest-environment-jsdom": "^29.4.2",
-    "prettier": "^2.8.4",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "rimraf": "^4.1.2",
-    "svg-sprite": "^2.0.2",
-    "svgo": "^3.0.2",
-    "ts-jest": "^29.0.5",
-    "ts-node": "^10.9.1",
-    "typescript": "*"
-  },
-  "peerDependencies": {
-    "react": "^17.0.2 || ^18.0.0"
+    "url": "https://github.com/dynamic-labs/DynamicAuth/issues"
   },
+  "homepage": "https://github.com/dynamic-labs/DynamicAuth#readme",
+  "author": "Dynamic Labs, Inc.",
+  "license": "MIT",
+  "main": "./src/index.cjs",
+  "module": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "type": "module",
   "exports": {
-    ".": "./dist/src/index.js",
+    ".": {
+      "types": "./src/index.d.ts",
+      "import": "./src/index.js",
+      "require": "./src/index.cjs"
+    },
     "./package.json": "./package.json"
   },
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
-  ],
-  "dependencies": {}
-}
+  "peerDependencies": {
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0"
+  },
+  "dependencies": {
+    "@dynamic-labs/logger": "1.1.0-alpha.25"
+  }
+}

package/src/Iconic.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const ICONIC_SPRITE_URL = 'https://iconic.dynamic-static-assets.com/icons/sprite.svg';
+const createIconic = (props) => {
+    const Icon = Object.assign(Object.assign({}, props), { function: (props) => {
+            const url = `${ICONIC_SPRITE_URL}#${Icon.iconName}`;
+            return (jsxRuntime.jsx("img", Object.assign({ "data-testid": `iconic-${Icon.iconName}`, src: url, alt: Icon.alt }, props)));
+        } });
+    const IconicComponent = Icon.function.bind(Icon);
+    Object.assign(IconicComponent, {
+        iconName: Icon.iconName,
+        sourcePath: Icon.sourcePath,
+    });
+    return IconicComponent;
+};
+
+exports.ICONIC_SPRITE_URL = ICONIC_SPRITE_URL;
+exports.createIconic = createIconic;

package/{dist/src → src}/Iconic.d.ts

@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-export declare const ICONIC_SPRITE_URL: `https://iconic.dynamic-static-assets.com/icons/sprite.svg?v=${string}`;
+export declare const ICONIC_SPRITE_URL: "https://iconic.dynamic-static-assets.com/icons/sprite.svg";
 export type Iconic = FC<React.SVGProps<SVGSVGElement> & {
     title?: string | undefined;
 }> & {

package/src/Iconic.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+
+const ICONIC_SPRITE_URL = 'https://iconic.dynamic-static-assets.com/icons/sprite.svg';
+const createIconic = (props) => {
+    const Icon = Object.assign(Object.assign({}, props), { function: (props) => {
+            const url = `${ICONIC_SPRITE_URL}#${Icon.iconName}`;
+            return (jsx("img", Object.assign({ "data-testid": `iconic-${Icon.iconName}`, src: url, alt: Icon.alt }, props)));
+        } });
+    const IconicComponent = Icon.function.bind(Icon);
+    Object.assign(IconicComponent, {
+        iconName: Icon.iconName,
+        sourcePath: Icon.sourcePath,
+    });
+    return IconicComponent;
+};
+
+export { ICONIC_SPRITE_URL, createIconic };

package/src/components/SocialIcon.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var findSocialIcon = require('./findSocialIcon.cjs');
+
+const SocialIcon = (_a) => {
+    var { name, variant } = _a, props = _tslib.__rest(_a, ["name", "variant"]);
+    const Icon = findSocialIcon.findSocialIcon(name, variant);
+    if (!Icon)
+        return null;
+    return jsxRuntime.jsx(Icon, Object.assign({}, props));
+};
+
+exports.SocialIcon = SocialIcon;

package/{dist/src → src}/components/SocialIcon.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import type { ThemeVariant } from '../types';
 type SocialIconProps = React.SVGProps<SVGSVGElement> & {
     name: string;
     variant?: ThemeVariant;
 };
-export declare const SocialIcon: ({ name, variant, ...props }: SocialIconProps) => JSX.Element;
+export declare const SocialIcon: ({ name, variant, ...props }: SocialIconProps) => JSX.Element | null;
 export {};

package/src/components/SocialIcon.js

@@ -0,0 +1,13 @@
+import { __rest } from '../../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import { findSocialIcon } from './findSocialIcon.js';
+
+const SocialIcon = (_a) => {
+    var { name, variant } = _a, props = __rest(_a, ["name", "variant"]);
+    const Icon = findSocialIcon(name, variant);
+    if (!Icon)
+        return null;
+    return jsx(Icon, Object.assign({}, props));
+};
+
+export { SocialIcon };

package/src/components/findSocialIcon.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var logger = require('../logger.cjs');
+var getSocialIcon = require('./getSocialIcon.cjs');
+
+const findSocialIcon = (name, variant = 'light') => {
+    try {
+        return getSocialIcon.getSocialIcon(name, variant);
+    }
+    catch (e) {
+        logger.logger.error(e);
+        return null;
+    }
+};
+
+exports.findSocialIcon = findSocialIcon;

package/src/components/findSocialIcon.js

@@ -0,0 +1,14 @@
+import { logger } from '../logger.js';
+import { getSocialIcon } from './getSocialIcon.js';
+
+const findSocialIcon = (name, variant = 'light') => {
+    try {
+        return getSocialIcon(name, variant);
+    }
+    catch (e) {
+        logger.error(e);
+        return null;
+    }
+};
+
+export { findSocialIcon };

package/src/components/getSocialIcon.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../icons/social/index.cjs');
+
+const getSocialIcon = (name, variant = 'light') => {
+    const map = Object.fromEntries(Object.values(index).map((icon) => [icon.iconName, icon]));
+    if (variant === 'dark') {
+        const darkIcon = map[`${name.toLowerCase()}-dark`];
+        if (darkIcon)
+            return darkIcon;
+    }
+    const icon = map[name.toLowerCase()];
+    if (icon)
+        return icon;
+    throw new Error(`Icon ${name}, not found`);
+};
+
+exports.getSocialIcon = getSocialIcon;

package/src/components/getSocialIcon.js

@@ -0,0 +1,16 @@
+import * as index from '../icons/social/index.js';
+
+const getSocialIcon = (name, variant = 'light') => {
+    const map = Object.fromEntries(Object.values(index).map((icon) => [icon.iconName, icon]));
+    if (variant === 'dark') {
+        const darkIcon = map[`${name.toLowerCase()}-dark`];
+        if (darkIcon)
+            return darkIcon;
+    }
+    const icon = map[name.toLowerCase()];
+    if (icon)
+        return icon;
+    throw new Error(`Icon ${name}, not found`);
+};
+
+export { getSocialIcon };

package/src/icons/browsers/index.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Iconic = require('../../Iconic.cjs');
+
+const BraveIcon = Iconic.createIconic({
+    alt: 'Brave Browser',
+    iconName: 'brave',
+    sourcePath: 'icons/browsers/brave.svg',
+});
+const ChromeIcon = Iconic.createIconic({
+    alt: 'Chrome Browser',
+    iconName: 'chrome',
+    sourcePath: 'icons/browsers/chrome.svg',
+});
+const EdgeIcon = Iconic.createIconic({
+    alt: 'Edge Browser',
+    iconName: 'edge',
+    sourcePath: 'icons/browsers/edge.svg',
+});
+const FirefoxIcon = Iconic.createIconic({
+    alt: 'Firefox Browser',
+    iconName: 'firefox',
+    sourcePath: 'icons/browsers/firefox.svg',
+});
+const OperaIcon = Iconic.createIconic({
+    alt: 'Opera Browser',
+    iconName: 'opera',
+    sourcePath: 'icons/browsers/opera.svg',
+});
+const SafariIcon = Iconic.createIconic({
+    alt: 'Opera Browser',
+    iconName: 'safari',
+    sourcePath: 'icons/browsers/safari.svg',
+});
+
+exports.BraveIcon = BraveIcon;
+exports.ChromeIcon = ChromeIcon;
+exports.EdgeIcon = EdgeIcon;
+exports.FirefoxIcon = FirefoxIcon;
+exports.OperaIcon = OperaIcon;
+exports.SafariIcon = SafariIcon;

package/src/icons/browsers/index.js

@@ -0,0 +1,34 @@
+import { createIconic } from '../../Iconic.js';
+
+const BraveIcon = createIconic({
+    alt: 'Brave Browser',
+    iconName: 'brave',
+    sourcePath: 'icons/browsers/brave.svg',
+});
+const ChromeIcon = createIconic({
+    alt: 'Chrome Browser',
+    iconName: 'chrome',
+    sourcePath: 'icons/browsers/chrome.svg',
+});
+const EdgeIcon = createIconic({
+    alt: 'Edge Browser',
+    iconName: 'edge',
+    sourcePath: 'icons/browsers/edge.svg',
+});
+const FirefoxIcon = createIconic({
+    alt: 'Firefox Browser',
+    iconName: 'firefox',
+    sourcePath: 'icons/browsers/firefox.svg',
+});
+const OperaIcon = createIconic({
+    alt: 'Opera Browser',
+    iconName: 'opera',
+    sourcePath: 'icons/browsers/opera.svg',
+});
+const SafariIcon = createIconic({
+    alt: 'Opera Browser',
+    iconName: 'safari',
+    sourcePath: 'icons/browsers/safari.svg',
+});
+
+export { BraveIcon, ChromeIcon, EdgeIcon, FirefoxIcon, OperaIcon, SafariIcon };

package/src/icons/chains/index.cjs

@@ -0,0 +1,121 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Iconic = require('../../Iconic.cjs');
+
+const AlgorandIcon = Iconic.createIconic({
+    alt: 'Algorand Chain',
+    iconName: 'algorand',
+    sourcePath: 'icons/chains/algorand.svg',
+});
+const ArbitrumIcon = Iconic.createIconic({
+    alt: 'Arbitrum Chain',
+    iconName: 'arbitrum',
+    sourcePath: 'icons/chains/arbitrum.svg',
+});
+const AuroraIcon = Iconic.createIconic({
+    alt: 'Aurora Chain',
+    iconName: 'aurora',
+    sourcePath: 'icons/chains/aurora.svg',
+});
+const BaseChainIcon = Iconic.createIconic({
+    alt: 'Base Chain',
+    iconName: 'base',
+    sourcePath: 'icons/chains/base.svg',
+});
+const BitcoinIcon = Iconic.createIconic({
+    alt: 'Bitcoin Chain',
+    iconName: 'bitcoin',
+    sourcePath: 'icons/chains/bitcoin.svg',
+});
+const BnbIcon = Iconic.createIconic({
+    alt: 'BNB Chain',
+    iconName: 'bnb',
+    sourcePath: 'icons/chains/bnb.svg',
+});
+const CosmosIcon = Iconic.createIconic({
+    alt: 'Cosmos Chain',
+    iconName: 'cosmos',
+    sourcePath: 'icons/chains/cosmos.svg',
+});
+const OsmosisIcon = Iconic.createIconic({
+    alt: 'Osmosis Chain',
+    iconName: 'osmosis',
+    sourcePath: 'icons/chains/osmosis.svg',
+});
+const AxelarIcon = Iconic.createIconic({
+    alt: 'Axelar Chain',
+    iconName: 'axelar',
+    sourcePath: 'icons/chains/axelar.svg',
+});
+const EthereumIcon = Iconic.createIconic({
+    alt: 'Ethereum Chain',
+    iconName: 'ethereum',
+    sourcePath: 'icons/chains/ethereum.svg',
+});
+const GoerliIcon = Iconic.createIconic({
+    alt: 'Goerli Chain',
+    iconName: 'goerli',
+    sourcePath: 'icons/chains/goerli.svg',
+});
+const ZkSyncIcon = Iconic.createIconic({
+    alt: 'zkSync Era Chain',
+    iconName: 'zkSync',
+    sourcePath: 'icons/chains/zkSync.svg',
+});
+const FlowIcon = Iconic.createIconic({
+    alt: 'Flow Chain',
+    iconName: 'flow',
+    sourcePath: 'icons/chains/flow.svg',
+});
+const GnosisIcon = Iconic.createIconic({
+    alt: 'Gnosis Chain',
+    iconName: 'gnosis',
+    sourcePath: 'icons/chains/gnosis.svg',
+});
+const OptimismIcon = Iconic.createIconic({
+    alt: 'Optimism Chain',
+    iconName: 'optimism',
+    sourcePath: 'icons/chains/optimism.svg',
+});
+const PalmIcon = Iconic.createIconic({
+    alt: 'Palm Chain',
+    iconName: 'palm',
+    sourcePath: 'icons/chains/palm.svg',
+});
+const PolygonIcon = Iconic.createIconic({
+    alt: 'Polygon Chain',
+    iconName: 'polygon',
+    sourcePath: 'icons/chains/polygon.svg',
+});
+const SolanaIcon = Iconic.createIconic({
+    alt: 'Solana Chain',
+    iconName: 'solana',
+    sourcePath: 'icons/chains/solana.svg',
+});
+const StarknetIcon = Iconic.createIconic({
+    alt: 'Starknet Chain',
+    iconName: 'starknet',
+    sourcePath: 'icons/chains/starknet.svg',
+});
+
+exports.AlgorandIcon = AlgorandIcon;
+exports.ArbitrumIcon = ArbitrumIcon;
+exports.AuroraIcon = AuroraIcon;
+exports.AxelarIcon = AxelarIcon;
+exports.BaseChainIcon = BaseChainIcon;
+exports.BitcoinIcon = BitcoinIcon;
+exports.BnbIcon = BnbIcon;
+exports.CosmosIcon = CosmosIcon;
+exports.EthereumIcon = EthereumIcon;
+exports.FlowIcon = FlowIcon;
+exports.GnosisIcon = GnosisIcon;
+exports.GoerliIcon = GoerliIcon;
+exports.OptimismIcon = OptimismIcon;
+exports.OsmosisIcon = OsmosisIcon;
+exports.PalmIcon = PalmIcon;
+exports.PolygonIcon = PolygonIcon;
+exports.SolanaIcon = SolanaIcon;
+exports.StarknetIcon = StarknetIcon;
+exports.ZkSyncIcon = ZkSyncIcon;

package/src/icons/chains/index.js

@@ -0,0 +1,99 @@
+import { createIconic } from '../../Iconic.js';
+
+const AlgorandIcon = createIconic({
+    alt: 'Algorand Chain',
+    iconName: 'algorand',
+    sourcePath: 'icons/chains/algorand.svg',
+});
+const ArbitrumIcon = createIconic({
+    alt: 'Arbitrum Chain',
+    iconName: 'arbitrum',
+    sourcePath: 'icons/chains/arbitrum.svg',
+});
+const AuroraIcon = createIconic({
+    alt: 'Aurora Chain',
+    iconName: 'aurora',
+    sourcePath: 'icons/chains/aurora.svg',
+});
+const BaseChainIcon = createIconic({
+    alt: 'Base Chain',
+    iconName: 'base',
+    sourcePath: 'icons/chains/base.svg',
+});
+const BitcoinIcon = createIconic({
+    alt: 'Bitcoin Chain',
+    iconName: 'bitcoin',
+    sourcePath: 'icons/chains/bitcoin.svg',
+});
+const BnbIcon = createIconic({
+    alt: 'BNB Chain',
+    iconName: 'bnb',
+    sourcePath: 'icons/chains/bnb.svg',
+});
+const CosmosIcon = createIconic({
+    alt: 'Cosmos Chain',
+    iconName: 'cosmos',
+    sourcePath: 'icons/chains/cosmos.svg',
+});
+const OsmosisIcon = createIconic({
+    alt: 'Osmosis Chain',
+    iconName: 'osmosis',
+    sourcePath: 'icons/chains/osmosis.svg',
+});
+const AxelarIcon = createIconic({
+    alt: 'Axelar Chain',
+    iconName: 'axelar',
+    sourcePath: 'icons/chains/axelar.svg',
+});
+const EthereumIcon = createIconic({
+    alt: 'Ethereum Chain',
+    iconName: 'ethereum',
+    sourcePath: 'icons/chains/ethereum.svg',
+});
+const GoerliIcon = createIconic({
+    alt: 'Goerli Chain',
+    iconName: 'goerli',
+    sourcePath: 'icons/chains/goerli.svg',
+});
+const ZkSyncIcon = createIconic({
+    alt: 'zkSync Era Chain',
+    iconName: 'zkSync',
+    sourcePath: 'icons/chains/zkSync.svg',
+});
+const FlowIcon = createIconic({
+    alt: 'Flow Chain',
+    iconName: 'flow',
+    sourcePath: 'icons/chains/flow.svg',
+});
+const GnosisIcon = createIconic({
+    alt: 'Gnosis Chain',
+    iconName: 'gnosis',
+    sourcePath: 'icons/chains/gnosis.svg',
+});
+const OptimismIcon = createIconic({
+    alt: 'Optimism Chain',
+    iconName: 'optimism',
+    sourcePath: 'icons/chains/optimism.svg',
+});
+const PalmIcon = createIconic({
+    alt: 'Palm Chain',
+    iconName: 'palm',
+    sourcePath: 'icons/chains/palm.svg',
+});
+const PolygonIcon = createIconic({
+    alt: 'Polygon Chain',
+    iconName: 'polygon',
+    sourcePath: 'icons/chains/polygon.svg',
+});
+const SolanaIcon = createIconic({
+    alt: 'Solana Chain',
+    iconName: 'solana',
+    sourcePath: 'icons/chains/solana.svg',
+});
+const StarknetIcon = createIconic({
+    alt: 'Starknet Chain',
+    iconName: 'starknet',
+    sourcePath: 'icons/chains/starknet.svg',
+});
+
+export { AlgorandIcon, ArbitrumIcon, AuroraIcon, AxelarIcon, BaseChainIcon, BitcoinIcon, BnbIcon, CosmosIcon, EthereumIcon, FlowIcon, GnosisIcon, GoerliIcon, OptimismIcon, OsmosisIcon, PalmIcon, PolygonIcon, SolanaIcon, StarknetIcon, ZkSyncIcon };