feat: Use cloud icons, remove font awesome pro (#239)

polkadot-cloud · Oct 8, 2024 · 3c4a455 · 3c4a455
2 parents 170d11c + da293a4
commit 3c4a455
Show file tree

Hide file tree

Showing 43 changed files with 365 additions and 410 deletions.
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -4,9 +4,6 @@ on:
   push:
     branches: [main]
 
-env:
-  FONTAWESOME_PACKAGE_TOKEN: ${{ secrets.FONTAWESOME_PACKAGE_TOKEN }}
-
 jobs:
   merge:
     runs-on: ubuntu-latest
@@ -19,7 +16,6 @@ jobs:
         with:
           node-version: 18
           registry-url: https://registry.npmjs.org
-          cache: 'yarn'
 
       - name: Merge
         uses: devmasx/merge-branch@master
@@ -41,7 +37,6 @@ jobs:
         with:
           node-version: 18
           registry-url: https://registry.npmjs.org
-          cache: 'yarn'
 
       - name: Install
         run: yarn install

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -6,17 +6,12 @@ on:
   pull_request:
     branches: [main]
 
-env:
-  FONTAWESOME_PACKAGE_TOKEN: ${{ secrets.FONTAWESOME_PACKAGE_TOKEN }}
-
 jobs:
   check-license:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@master
       - uses: actions/setup-node@v4
-        with:
-          cache: 'yarn'
       - name: Check License Lines
         uses: kt3k/license_checker@v1.0.6
 
@@ -27,8 +22,6 @@ jobs:
     steps:
       - uses: actions/checkout@master
       - uses: actions/setup-node@v4
-        with:
-          cache: 'yarn'
       - name: Check Markdown Links
         uses: gaurav-nelson/github-action-markdown-link-check@v1
         with:
@@ -47,7 +40,6 @@ jobs:
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
-          cache: 'yarn'
           node-version: ${{ matrix.node-version }}
       - run: yarn install
       - run: yarn test

diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -1,9 +1,3 @@
 nodeLinker: node-modules
 
 yarnPath: .yarn/releases/yarn-4.1.1.cjs
-
-npmScopes:
-  fortawesome:
-    npmAlwaysAuth: true
-    npmRegistryServer: 'https://npm.fontawesome.com/'
-    npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN}
diff --git a/package.json b/package.json
@@ -18,14 +18,10 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
-    "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
-    "@fortawesome/pro-duotone-svg-icons": "^6.5.2",
-    "@fortawesome/pro-regular-svg-icons": "^6.5.2",
-    "@fortawesome/pro-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@fortawesome/sharp-regular-svg-icons": "^6.5.2",
     "@ledgerhq/hw-transport-webhid": "^6.29.2",
+    "@polkadot-cloud/icons": "1.0.0",
     "@polkadot/api": "^12.0.2",
     "@polkadot/rpc-provider": "12.0.2",
     "@tanstack/react-query": "^5.53.3",

diff --git a/src/canvas/RuntimeSnapshot/PalletItem.tsx b/src/canvas/RuntimeSnapshot/PalletItem.tsx
@@ -4,15 +4,16 @@
 import { motion } from 'framer-motion';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { CanvasSubheading, RuntimeItemWrapper } from 'canvas/Wrappers';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { PalletItemScraped } from 'model/Scraper/types';
 import { Fragment, useRef, useState } from 'react';
-import { faChevronDown } from '@fortawesome/pro-solid-svg-icons';
+import { CloudIcon } from '@polkadot-cloud/icons';
+import { iconChevronDown } from '@polkadot-cloud/icons/solid';
 import type { Sync } from '@w3ux/types';
 import { EmptyItem } from './EmptyItem';
 import { getMotionProps } from './Utils';
 import type { PalletItemProps } from './types';
 import { Subheading } from './Subheading';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 export const PalletItem = ({ pallet, scraper }: PalletItemProps) => {
   const { name } = pallet;
@@ -114,10 +115,11 @@ export const PalletItem = ({ pallet, scraper }: PalletItemProps) => {
     <>
       <CanvasSubheading>
         <span>
-          <FontAwesomeIcon
-            icon={palletExpanded ? faChevronDown : faChevronRight}
-            transform="shrink-6"
-          />
+          {palletExpanded ? (
+            <CloudIcon icon={iconChevronDown} transform="shrink-6" />
+          ) : (
+            <FontAwesomeIcon icon={faChevronRight} transform="shrink-6" />
+          )}
         </span>
         <button
           type="button"

diff --git a/src/library/Buttons/ButtonIconCircle/index.tsx b/src/library/Buttons/ButtonIconCircle/index.tsx
@@ -1,25 +1,23 @@
 // Copyright 2024 @polkadot-cloud/polkadot-developer-console authors & contributors
 // SPDX-License-Identifier: AGPL-3.0
 
-import type { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faClone } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import type { MouseEvent as ReactMouseEvent, RefObject } from 'react';
+import type { FC, MouseEvent as ReactMouseEvent, RefObject } from 'react';
 import { useRef } from 'react';
 import { Wrapper } from './Wrapper';
 import { useTooltip } from 'contexts/Tooltip';
+import { CloudIcon } from '@polkadot-cloud/icons';
 
 export const ButtonIconCircle = ({
   tooltipText,
   id,
   transform,
   onClick,
-  icon = faClone, // Default icon to clone (most used).
+  icon,
 }: {
   tooltipText?: string;
   transform?: string;
   id: string;
-  icon?: IconProp;
+  icon?: FC;
   onClick: (
     ev: ReactMouseEvent<HTMLElement, MouseEvent>,
     ref: RefObject<HTMLButtonElement>
@@ -42,7 +40,7 @@ export const ButtonIconCircle = ({
         }
       }}
     >
-      <FontAwesomeIcon icon={icon} transform={transform} />
+      {icon && <CloudIcon icon={icon} transform={transform} />}
     </Wrapper>
   );
 };
diff --git a/src/library/ConnectOverlay/ManageLedger.tsx b/src/library/ConnectOverlay/ManageLedger.tsx
@@ -17,17 +17,17 @@ import { ChainSearchInput } from './ChainSearchInput';
 import type { ManageHardwareProps } from './types';
 import { useEffectIgnoreInitial } from '@w3ux/hooks';
 import { ImportButtonWrapper, SubHeadingWrapper } from './Wrappers';
-import { faUsbDrive } from '@fortawesome/pro-duotone-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { CloudIcon } from '@polkadot-cloud/icons';
 import { LedgerChains } from 'contexts/LedgerHardware/defaults';
 import { useLedgerHardware } from 'contexts/LedgerHardware';
 import type { LedgerResponse } from 'contexts/LedgerHardware/types';
+import { iconUsbDrive } from '@polkadot-cloud/icons/duotone';
 import {
   getLedgerApp,
   getLocalLedgerAddresses,
 } from 'contexts/LedgerHardware/Utils';
-import { faSquareMinus } from '@fortawesome/pro-solid-svg-icons';
 import type { AnyJson } from '@w3ux/types';
+import { iconSquareMinus } from '@polkadot-cloud/icons/solid';
 
 export const ManageLedger = ({
   getMotionProps,
@@ -259,8 +259,8 @@ export const ManageLedger = ({
                   }
                 }}
               >
-                <FontAwesomeIcon
-                  icon={faSquareMinus}
+                <CloudIcon
+                  icon={iconSquareMinus}
                   style={{ marginRight: '0.4rem' }}
                 />
                 Reset
@@ -275,8 +275,8 @@ export const ManageLedger = ({
                 }
               }}
             >
-              <FontAwesomeIcon
-                icon={faUsbDrive}
+              <CloudIcon
+                icon={iconUsbDrive}
                 style={{ marginRight: '0.4rem' }}
               />
 

diff --git a/src/library/ConnectOverlay/ManageWalletConnect.tsx b/src/library/ConnectOverlay/ManageWalletConnect.tsx
@@ -19,7 +19,8 @@ import { NetworkDirectory } from 'config/networks';
 import { useWalletConnect } from 'contexts/WalletConnect';
 import type { AnyJson } from '@w3ux/types';
 import { useChainSpaceEnv } from 'contexts/ChainSpaceEnv';
-import { faLink, faRefresh } from '@fortawesome/pro-duotone-svg-icons';
+import { iconRefresh, iconLink } from '@polkadot-cloud/icons/duotone';
+import { CloudIcon } from '@polkadot-cloud/icons';
 
 export const ManageWalletConnect = ({
   getMotionProps,
@@ -191,10 +192,7 @@ export const ManageWalletConnect = ({
                   }
                 }}
               >
-                <FontAwesomeIcon
-                  icon={faLink}
-                  style={{ marginRight: '0.4rem' }}
-                />
+                <CloudIcon icon={iconLink} style={{ marginRight: '0.4rem' }} />
                 Connect
               </button>
             ) : (
@@ -205,7 +203,7 @@ export const ManageWalletConnect = ({
                   }}
                 >
                   {!importActive && (
-                    <FontAwesomeIcon icon={faRefresh} transform="shrink-2" />
+                    <CloudIcon icon={iconRefresh} transform="shrink-2" />
                   )}
                   {!wcInitialized
                     ? 'Initialising'

diff --git a/src/library/ContextMenu/SearchInput/index.tsx b/src/library/ContextMenu/SearchInput/index.tsx
@@ -5,11 +5,11 @@ import { useActiveTab } from 'contexts/ActiveTab';
 import { SearchWrapper } from '../Wrappers';
 import type { SearchInputProps } from './types';
 import { useChainUi } from 'contexts/ChainUi';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
-  faWandSparkles,
-  faDeleteLeft,
-} from '@fortawesome/pro-duotone-svg-icons';
+  iconWandSparkles,
+  iconDeleteLeft,
+} from '@polkadot-cloud/icons/duotone';
+import { CloudIcon } from '@polkadot-cloud/icons';
 
 export const SearchInput = ({
   inputRef,
@@ -94,7 +94,7 @@ export const SearchInput = ({
             }
           }}
         >
-          <FontAwesomeIcon icon={faDeleteLeft} transform="grow-1" />
+          <CloudIcon icon={iconDeleteLeft} transform="grow-1" />
         </button>
       </div>
       {isChainUi && (
@@ -109,7 +109,7 @@ export const SearchInput = ({
             );
           }}
         >
-          <FontAwesomeIcon icon={faWandSparkles} transform="shrink-3" />
+          <CloudIcon icon={iconWandSparkles} transform="shrink-3" />
         </button>
       )}
     </SearchWrapper>

diff --git a/src/library/Header/index.tsx b/src/library/Header/index.tsx
@@ -8,8 +8,9 @@ import { useGlitch } from 'react-powerglitch';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { DiscussionsUrl, DocsUrl, GithubRepoUrl } from 'consts';
-import { faFileDoc, faMessages } from '@fortawesome/pro-solid-svg-icons';
+import { iconFileDoc, iconMessages } from '@polkadot-cloud/icons/solid';
 import LogoSVG from 'svg/Logo.svg?react';
+import { CloudIcon } from '@polkadot-cloud/icons';
 
 export const Header = () => {
   const glitch = useGlitch({
@@ -48,11 +49,11 @@ export const Header = () => {
       </div>
       <div>
         <button type="button" onClick={() => window.open(DocsUrl)}>
-          <FontAwesomeIcon icon={faFileDoc} transform="grow-2" />
+          <CloudIcon icon={iconFileDoc} transform="grow-2" />
         </button>
 
         <button type="button" onClick={() => window.open(DiscussionsUrl)}>
-          <FontAwesomeIcon icon={faMessages} transform="shrink-0" />
+          <CloudIcon icon={iconMessages} transform="shrink-0" />
         </button>
 
         <button type="button" onClick={() => window.open(GithubRepoUrl)}>

diff --git a/src/library/Inputs/Select/index.tsx b/src/library/Inputs/Select/index.tsx
@@ -13,7 +13,8 @@ import {
 } from 'library/Inputs/Wrappers';
 import type { SelectProps } from './types';
 import { Icon } from './Icon';
-import { faCheck } from '@fortawesome/pro-duotone-svg-icons';
+import { iconCheck } from '@polkadot-cloud/icons/duotone';
+import { CloudIcon } from '@polkadot-cloud/icons';
 
 export const Select = ({
   values,
@@ -70,10 +71,11 @@ export const Select = ({
           <SelectTextWrapper>{currentValue || `No Values`}</SelectTextWrapper>
         </span>
         <span>
-          <FontAwesomeIcon
-            icon={disabled ? faCheck : faChevronDown}
-            transform="shrink-4"
-          />
+          {disabled ? (
+            <CloudIcon icon={iconCheck} transform="shrink-4" />
+          ) : (
+            <FontAwesomeIcon icon={faChevronDown} transform="shrink-4" />
+          )}
         </span>
       </SelectItemWrapper>
 

diff --git a/src/library/Modal/Title.tsx b/src/library/Modal/Title.tsx
@@ -5,7 +5,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useOverlay } from 'library/Overlay/Provider';
 import { TitleWrapper } from './Wrappers';
 import type { TitleProps } from './types';
-import { faTimes } from '@fortawesome/pro-duotone-svg-icons';
+import { iconTimes } from '@polkadot-cloud/icons/duotone';
+import { CloudIcon } from '@polkadot-cloud/icons';
 
 export const Title = ({ title, icon, fixed, Svg, style }: TitleProps) => {
   const { setModalStatus } = useOverlay().modal;
@@ -24,7 +25,7 @@ export const Title = ({ title, icon, fixed, Svg, style }: TitleProps) => {
       </div>
       <div>
         <button type="button" onClick={() => setModalStatus('closing')}>
-          <FontAwesomeIcon icon={faTimes} transform="grow-2" />
+          <CloudIcon icon={iconTimes} transform="grow-2" />
         </button>
       </div>
     </TitleWrapper>

diff --git a/src/library/SubmitTx/ButtonSubmitLarge.tsx b/src/library/SubmitTx/ButtonSubmitLarge.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import type { ButtonSubmitLargeProps } from './types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { CloudIcon } from '@polkadot-cloud/icons';
 import { appendOrEmpty } from '@w3ux/utils';
 import { CallToActionWrapper } from 'library/CallToAction';
 
@@ -27,10 +27,7 @@ export const ButtonSubmitLarge = ({
               disabled={disabled}
             >
               {icon && (
-                <FontAwesomeIcon
-                  icon={icon}
-                  transform={iconTransform || undefined}
-                />
+                <CloudIcon icon={icon} transform={iconTransform || undefined} />
               )}
               {submitText}
             </button>

diff --git a/src/library/SubmitTx/Default.tsx b/src/library/SubmitTx/Default.tsx
@@ -7,11 +7,11 @@ import type { SubmitProps } from './types';
 import { ButtonSubmitLarge } from './ButtonSubmitLarge';
 import { appendOrEmpty } from '@w3ux/utils';
 import { EstimatedTxFee } from 'library/Tx/EstimatedTxFee';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowAltCircleUp } from '@fortawesome/pro-duotone-svg-icons';
+import { iconArrowAltCircleUp } from '@polkadot-cloud/icons/duotone';
 import { useImportedAccounts } from 'contexts/ImportedAccounts';
 import { ButtonText } from 'library/Buttons/ButtonText';
 import { useExtrinsicData } from './ExtrinsicDataProvider';
+import { CloudIcon } from '@polkadot-cloud/icons';
 
 export const Default = ({
   onSubmit,
@@ -42,8 +42,8 @@ export const Default = ({
           {displayFor !== 'card' && (
             <ButtonText onClick={() => onSubmit()} disabled={disabled}>
               {submitText || ''}
-              <FontAwesomeIcon
-                icon={faArrowAltCircleUp}
+              <CloudIcon
+                icon={iconArrowAltCircleUp}
                 transform="grow-2"
                 className="iconRight"
               />
@@ -57,7 +57,7 @@ export const Default = ({
           disabled={disabled}
           onSubmit={onSubmit}
           submitText={submitText || ''}
-          icon={faArrowAltCircleUp}
+          icon={iconArrowAltCircleUp}
           pulse={!disabled}
         />
       )}