Move icons

cli/package.json

@@ -15,7 +15,7 @@
     "clean": "rm -rf ./dist",
     "build": "npx tsc --build && tsc-alias && yarn copy",
     "copy:internal": "copyfiles \"src/**/!(*.ts|*.js|*.tsx)\" dist/cli",
-    "copy:external": "copyfiles \"../src/common/css/**/!(*.ts|*.js|*.tsx)\" \"../src/common/icons/**/!(*.ts|*.js|*.tsx)\" \"../src/next/css/**/!(*.ts|*.js|*.tsx)\" dist/cli",
+    "copy:external": "copyfiles \"../src/common/css/**/!(*.ts|*.js|*.tsx)\" \"../src/icons/**/(*.ts|*.js|*.tsx)\" \"../static/icons/**/!(*.ts|*.js|*.tsx)\" \"../src/next/css/**/!(*.ts|*.js|*.tsx)\" dist/cli",
     "copy": "yarn copy:internal && yarn copy:external",
     "watch": "nodemon --watch src --ext '*' --exec yarn build",
     "prepack": "yarn build"

src/common/components/CustomNetworkDropdown/index.tsx

@@ -12,12 +12,14 @@ import type {
 } from '@theme/NavbarItem/DropdownNavbarItem';
 import './styles.css';
 
-import { IotaCore, Shimmer, Next } from '../../icons';
+import icons from '@site/src/icons';
 import {
   fetchSitemapUrlsFromNetwork,
   getBestNetworkUrlMatch,
 } from '@site/src/utils/networkUtils';
 
+const { IotaCore, Shimmer, Next } = icons;
+
 interface NetworkDropdownItem {
   label: string;
   routeBasePath: string;

src/common/components/Social/index.tsx

@@ -15,6 +15,7 @@ export interface SocialsConfig extends ThemeConfig {
 
 function SocialLink({ url, backgroundColor }: Social) {
   const { name, Icon } = get_socials_data(url);
+
   return (
     <a
       className='social__link padding-horiz--sm padding-vert--md'

src/common/components/Switcher/index.tsx

@@ -1,7 +1,7 @@
-import type { ComponentType, SVGProps } from 'react';
 import React, { useState } from 'react';
 import Link from '@docusaurus/Link';
 import clsx from 'clsx';
+import icons from '@site/src/icons/iota';
 
 import './styles.css';
 import { SwitcherProps } from '@site/src/utils/useSwitcher';
@@ -11,7 +11,7 @@ export type Item = {
   label: string;
   description?: string;
   badges?: string[];
-  icon?: ComponentType<SVGProps<SVGSVGElement>>;
+  icon?: string;
 };
 
 export type Version = Item;
@@ -52,6 +52,11 @@ enum SwitcherMenuState {
   Versions,
 }
 
+function Icon({ icon, className }: { icon: string; className: string }) {
+  const Comp = icons[icon];
+  return <Comp className={className} />;
+}
+
 type SwitcherMenuDropdownProps = { items: MenuItem[]; active: boolean };
 
 function SwitcherMenuDropdown(props: SwitcherMenuDropdownProps) {
@@ -64,7 +69,7 @@ function SwitcherMenuDropdown(props: SwitcherMenuDropdownProps) {
     >
       <ul className='switcher-menu__items'>
         {props.items.map(
-          ({ id, label, to, active, icon: Icon, description, badges = [] }) => (
+          ({ id, label, to, active, icon, description, badges = [] }) => (
             <li className='switcher-menu__item' key={id}>
               <Link
                 className={clsx(
@@ -73,7 +78,7 @@ function SwitcherMenuDropdown(props: SwitcherMenuDropdownProps) {
                 )}
                 to={to}
               >
-                {Icon && <Icon className='switcher-menu__icon' />}
+                {icon && <Icon icon={icon} className='switcher-menu__icon' />}
                 <div className='switcher-menu__content'>
                   <div className='switcher-menu__label'>
                     {label}

src/components/HomeLayout/AppLibrariesSection.tsx

@@ -1,11 +1,8 @@
 import React, { FC } from 'react';
 import Link from '@docusaurus/Link';
-import {
-  Identity,
-  SmartContracts,
-  Streams,
-  Stronghold,
-} from '@site/src/common/icons';
+import icons from '@site/src/icons';
+
+const { Identity, SmartContracts, Streams, Stronghold } = icons;
 
 interface LanguagesProps {
   languages?: { [key: string]: string };

src/components/HomeLayout/CoreLibrariesSection.tsx

@@ -3,7 +3,9 @@ import CoreLibImgDark from '@site/static/img/homepage/section_core_libraries_dar
 import ThemedImage from '@theme/ThemedImage';
 import React, { FC } from 'react';
 import Link from '@docusaurus/Link';
-import { Shimmer } from '@site/src/common/icons';
+import icons from '@site/src/icons';
+
+const { Shimmer } = icons;
 
 interface LanguagesProps {
   languages?: { [key: string]: string };

src/components/HomeLayout/index.tsx

@@ -7,7 +7,11 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import clsx from 'clsx';
 import './styles.css';
-import {
+import icons from '@site/src/icons';
+import CoreLibrariesSection from './CoreLibrariesSection';
+import AppLibrariesSection from './AppLibrariesSection';
+
+const {
   Chronicle,
   Discord,
   Hornet,
@@ -19,9 +23,7 @@ import {
   Tips,
   Tutorials,
   Wasp,
-} from '@site/src/common/icons';
-import CoreLibrariesSection from './CoreLibrariesSection';
-import AppLibrariesSection from './AppLibrariesSection';
+} = icons;
 
 interface HomepageSectionProps {
   header?: string;

src/icons/index.ts

@@ -0,0 +1,7 @@
+import iota from './iota';
+import socials from './socials';
+
+export default {
+  ...iota,
+  ...socials,
+};

src/icons/iota/index.ts

@@ -0,0 +1,47 @@
+import { default as Chronicle } from '@site/static/icons/iota/chronicle.svg';
+import { default as Chrysalis } from '@site/static/icons/iota/chrysalis.svg';
+import { default as GettingStarted } from '@site/static/icons/iota/getting_started.svg';
+import { default as GoShimmer } from '@site/static/icons/iota/go_shimmer.svg';
+import { default as Hornet } from '@site/static/icons/iota/hornet.svg';
+import { default as Identity } from '@site/static/icons/iota/identity.svg';
+import { default as IntegrationServices } from '@site/static/icons/iota/integration_services.svg';
+import { default as Iota20 } from '@site/static/icons/iota/iota_20.svg';
+import { default as IotaCore } from '@site/static/icons/iota/iota_core.svg';
+import { default as IotaToken } from '@site/static/icons/iota/iota_token.svg';
+import { default as Next } from '@site/static/icons/iota/next.svg';
+import { default as PickAWallet } from '@site/static/icons/iota/pick_a_wallet.svg';
+import { default as Search } from '@site/static/icons/iota/search.svg';
+import { default as Shimmer } from '@site/static/icons/iota/shimmer.svg';
+import { default as SmartContracts } from '@site/static/icons/iota/smart_contracts.svg';
+import { default as Streams } from '@site/static/icons/iota/streams.svg';
+import { default as Stronghold } from '@site/static/icons/iota/stronghold.svg';
+import { default as Tips } from '@site/static/icons/iota/tips.svg';
+import { default as Tools } from '@site/static/icons/iota/tools.svg';
+import { default as Tutorials } from '@site/static/icons/iota/tutorials.svg';
+import { default as Wallet } from '@site/static/icons/iota/wallet.svg';
+import { default as Wasp } from '@site/static/icons/iota/wasp.svg';
+
+export default {
+  Chronicle,
+  Chrysalis,
+  GettingStarted,
+  GoShimmer,
+  Hornet,
+  Identity,
+  IntegrationServices,
+  Iota20,
+  IotaCore,
+  IotaToken,
+  Next,
+  PickAWallet,
+  Search,
+  Shimmer,
+  SmartContracts,
+  Streams,
+  Stronghold,
+  Tips,
+  Tools,
+  Tutorials,
+  Wallet,
+  Wasp,
+};

src/icons/socials/index.ts

@@ -0,0 +1,19 @@
+import { default as Discord } from '@site/static/icons/socials/discord.svg';
+import { default as Facebook } from '@site/static/icons/socials/facebook.svg';
+import { default as Github } from '@site/static/icons/socials/github.svg';
+import { default as Instagram } from '@site/static/icons/socials/instagram.svg';
+import { default as LinkedIn } from '@site/static/icons/socials/linkedin.svg';
+import { default as Reddit } from '@site/static/icons/socials/reddit.svg';
+import { default as Twitter } from '@site/static/icons/socials/twitter.svg';
+import { default as Youtube } from '@site/static/icons/socials/youtube.svg';
+
+export default {
+  Discord,
+  Facebook,
+  Github,
+  Instagram,
+  LinkedIn,
+  Reddit,
+  Twitter,
+  Youtube,
+};

src/switcher.config.ts

@@ -1,23 +1,11 @@
 import type { Config } from './common/components/Switcher';
-import {
-  Chronicle,
-  GoShimmer,
-  Hornet,
-  Identity,
-  IotaCore,
-  SmartContracts,
-  Streams,
-  Stronghold,
-  Tools,
-  Wallet,
-} from './common/icons';
 
 const buildDocs = [
   {
     id: 'iota-sdk-1-0-0',
     label: 'IOTA SDK',
     description: 'Seamlessly integrate IOTA into your app.',
-    icon: IotaCore,
+    icon: 'IotaCore',
     subsection: 'build-layer-1',
     versions: [
       {
@@ -31,7 +19,7 @@ const buildDocs = [
     id: 'identity-rs-0-5',
     label: 'Identity',
     description: 'Trustless digital identity management.',
-    icon: Identity,
+    icon: 'Identity',
     subsection: 'build-layer-1',
     versions: [
       {
@@ -60,7 +48,7 @@ const buildDocs = [
     id: 'stronghold-rs',
     label: 'Stronghold',
     description: 'Securely store secrets.',
-    icon: Stronghold,
+    icon: 'Stronghold',
     subsection: 'build-layer-1',
     versions: [
       {
@@ -74,7 +62,7 @@ const buildDocs = [
     id: 'cli-wallet',
     label: 'CLI Wallet',
     description: 'Command line wallet.',
-    icon: Wallet,
+    icon: 'Wallet',
     subsection: 'build-layer-1',
     versions: [
       {
@@ -88,7 +76,7 @@ const buildDocs = [
     id: 'apis',
     label: 'APIs',
     description: 'All available APIs.',
-    icon: Tools,
+    icon: 'Tools',
     subsection: 'build-layer-1',
     versions: [
       {
@@ -100,7 +88,7 @@ const buildDocs = [
     id: 'iota-rs-1-4-0',
     label: 'iota.rs (deprecated)',
     description: 'Legacy client SDK.',
-    icon: IotaCore,
+    icon: 'IotaCore',
     subsection: 'build-layer-1',
     versions: [
       {
@@ -119,7 +107,7 @@ const buildDocs = [
     id: 'iotajs',
     label: 'iota.js (deprecated)',
     description: 'Legacy JavaScript SDK.',
-    icon: IotaCore,
+    icon: 'IotaCore',
     subsection: 'build-layer-1',
     versions: [
       {
@@ -133,7 +121,7 @@ const buildDocs = [
     id: 'wallet-rs-0-1-0',
     label: 'wallet.rs (deprecated)',
     description: 'Legacy wallet SDK.',
-    icon: Wallet,
+    icon: 'Wallet',
     subsection: 'build-layer-1',
     versions: [
       {
@@ -152,7 +140,7 @@ const buildDocs = [
     id: 'iota-streams',
     label: 'Streams (deprecated)',
     description: 'Secure data channels over the Tangle.',
-    icon: Streams,
+    icon: 'Streams',
     subsection: 'build-layer-1',
     versions: [
       {
@@ -166,7 +154,7 @@ const buildDocs = [
     id: 'smart-contract-0-7-0',
     label: 'Smart Contracts',
     description: 'Create smart contracts.',
-    icon: SmartContracts,
+    icon: 'SmartContracts',
     subsection: 'build-layer-2',
     versions: [
       {
@@ -183,7 +171,7 @@ const maintainDocs = [
     id: 'hornet-1-2-4',
     label: 'Hornet',
     description: 'The primary node software for IOTA.',
-    icon: Hornet,
+    icon: 'Hornet',
     subsection: 'maintain-layer-1',
     versions: [
       {
@@ -202,7 +190,7 @@ const maintainDocs = [
     id: 'wasp-0-7-0',
     label: 'Wasp',
     description: 'The node software to run an ISC network',
-    icon: SmartContracts,
+    icon: 'SmartContracts',
     subsection: 'maintain-layer-2',
     versions: [
       {
@@ -216,7 +204,7 @@ const maintainDocs = [
     id: 'chronicle-rs',
     label: 'Chronicle',
     description: 'Indexer, archival node, analytics.',
-    icon: Chronicle,
+    icon: 'Chronicle',
     subsection: 'maintain-layer-1',
     versions: [
       {
@@ -235,7 +223,7 @@ const maintainDocs = [
     id: 'goshimmer',
     label: 'GoShimmer',
     description: 'Research node implementation for IOTA 2.0',
-    icon: GoShimmer,
+    icon: 'GoShimmer',
     subsection: 'maintain-layer-1',
     versions: [
       {