refactor: use size instead of width & height props

ltfschoen · Mar 4, 2023 · 6eba248 · 6eba248
1 parent de05fe6
commit 6eba248
Show file tree

Hide file tree

Showing 298 changed files with 4,021 additions and 593 deletions.
diff --git a/apps/web/src/archetypes/NFT/Modal/NftDialog.tsx b/apps/web/src/archetypes/NFT/Modal/NftDialog.tsx
@@ -71,7 +71,7 @@ const NftDialog = ({ onRequestDismiss, ...props }: NftDialogProps) => {
           },
         }}
       >
-        <X width="24px" height="24px" />
+        <X />
       </Button>
       <div
         css={{
@@ -254,7 +254,7 @@ const NftDialog = ({ onRequestDismiss, ...props }: NftDialogProps) => {
                       <a href={nft?.platformUri} target="_blank" rel="noreferrer" css={{ color: '#fff' }}>
                         {nft?.provider}
                       </a>
-                      <ExternalLink height={'0.75em'} />
+                      <ExternalLink size="0.75em" />
                     </span>
                   }
                 />

diff --git a/apps/web/src/components/recipes/PoolExitingInProgress/PoolExitingInProgress.tsx b/apps/web/src/components/recipes/PoolExitingInProgress/PoolExitingInProgress.tsx
@@ -25,7 +25,7 @@ const PoolExitingInProgress = () => {
           marginBottom: '2.4rem',
         }}
       >
-        <Info width="1em" height="1em" css={{ verticalAlign: 'middle' }} /> You are currently unstaking
+        <Info size="1em" css={{ verticalAlign: 'middle' }} /> You are currently unstaking
       </Text.Body>
       <Text.Body>
         Please select a different account to continue staking.

diff --git a/apps/web/src/components/recipes/PoolSelectorItem/PoolSelectorItem.tsx b/apps/web/src/components/recipes/PoolSelectorItem/PoolSelectorItem.tsx
@@ -66,7 +66,7 @@ const PoolSelectorItem = (props: PoolSelectorItemProps) => {
         </Tooltip>
         {props.poolDetailUrl !== undefined && (
           <Button as="a" variant="noop" href={props.poolDetailUrl} target="_blank">
-            <ExternalLink width="1.4rem" height="1.4rem" />
+            <ExternalLink size="1.4rem" />
           </Button>
         )}
       </header>
@@ -89,7 +89,7 @@ const PoolSelectorItem = (props: PoolSelectorItemProps) => {
                 {Array(3)
                   .fill(undefined)
                   .map((_, index) => (
-                    <Star width="1.4rem" height="1.4rem" fill={index < props.rating ? 'currentColor' : 'none'} />
+                    <Star size="1.4rem" fill={index < props.rating ? 'currentColor' : 'none'} />
                   ))}
               </div>
             )}
@@ -106,14 +106,14 @@ const PoolSelectorItem = (props: PoolSelectorItemProps) => {
                 >
                   {props.memberCount}
                 </Text.Body>
-                <User width="1.4rem" height="1.4rem" />
+                <User size="1.4rem" />
               </div>
             )}
           </Tooltip>
         </div>
         {props.talismanRecommended && (
           <Tooltip content="Talisman top recommended pool">
-            {tooltipProps => <Union {...tooltipProps} width="1.4rem" height="1.4rem" />}
+            {tooltipProps => <Union {...tooltipProps} size="1.4rem" />}
           </Tooltip>
         )}
       </Text.Body>

diff --git a/apps/web/src/components/recipes/PoolUnstake/PoolUnstake.tsx b/apps/web/src/components/recipes/PoolUnstake/PoolUnstake.tsx
@@ -117,9 +117,7 @@ const PoolUnstake = (props: PoolUnstakeProps) => {
             <div>
               <Text.Body css={{ fontSize: '1.6rem', fontWeight: 'bold' }}>
                 {props.unstakingAmount}
-                {props.timeTilWithdrawable !== undefined && (
-                  <Lock width="1.2rem" height="1.2rem" css={{ marginLeft: '0.4rem' }} />
-                )}
+                {props.timeTilWithdrawable !== undefined && <Lock size="1.2rem" css={{ marginLeft: '0.4rem' }} />}
               </Text.Body>
             </div>
             <div>

diff --git a/apps/web/src/components/recipes/StakingInput/StakingInput.tsx b/apps/web/src/components/recipes/StakingInput/StakingInput.tsx
@@ -120,7 +120,7 @@ const StakingInput = Object.assign(
                 </Text.Body>
               </div>
               {props.noPoolsAvailable ? (
-                <Info width="1.4rem" height="1.4rem" />
+                <Info size="1.4rem" />
               ) : (
                 <motion.div
                   animate={String(poolInfoExpanded)}

diff --git a/apps/web/src/components/widgets/AccountsManagementMenu.tsx b/apps/web/src/components/widgets/AccountsManagementMenu.tsx
@@ -151,7 +151,7 @@ const AccountsManagementMenu = () => {
                 padding: '0 1.6rem',
               }}
             >
-              <Union width="1em" height="1em" /> My accounts
+              <Union size="1em" /> My accounts
             </Text.Body>
             {leadingMenuItem}
             {injectedAccounts.map(x => (
@@ -175,7 +175,7 @@ const AccountsManagementMenu = () => {
               as="header"
               css={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontWeight: 'bold', padding: '1.6rem' }}
             >
-              <Eye width="1em" height="1em" /> Watched accounts
+              <Eye size="1em" /> Watched accounts
             </Text.Body>
             {readonlyAccounts.map(x => (
               <Menu.Item onClick={() => setSelectedAccountAddresses(() => [x.address])}>

diff --git a/apps/web/src/domains/common/utils/toast.tsx b/apps/web/src/domains/common/utils/toast.tsx
@@ -90,7 +90,7 @@ export const toastExtrinsic = (
                 href={chain.subscanUrl + 'extrinsic/' + error?.txHash?.toString()}
                 target="_blank"
               >
-                Subscan <ExternalLink width="1.2rem" height="1.2rem" />
+                Subscan <ExternalLink size="1.2rem" />
               </Text.Body>
             </Text.Body>
           )}

diff --git a/packages/icons/.svgrrc b/packages/icons/.svgrrc
diff --git a/packages/icons/.svgrrc.js b/packages/icons/.svgrrc.js
@@ -0,0 +1,11 @@
+module.exports = {
+  outDir: 'src/components',
+  typescript: true,
+  prettier: true,
+  ref: true,
+  template: require('./template'),
+  svgProps: {
+    width: '{props.size ?? 24}',
+    height: '{props.size ?? 24}',
+  },
+}
diff --git a/packages/icons/src/components/Activity.tsx b/packages/icons/src/components/Activity.tsx
@@ -1,7 +1,19 @@
 import * as React from 'react'
 import { Ref, SVGProps, forwardRef } from 'react'
-const SvgActivity = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+const SvgActivity = (
+  props: Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> & {
+    size?: number | string
+  },
+  ref: Ref<SVGSVGElement>
+) => (
+  <svg
+    width={props.size ?? 24}
+    height={props.size ?? 24}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={ref}
+    {...props}
+  >
     <path
       d="M22 12h-4l-3 9L9 3l-3 9H2"
       stroke="currentColor"

diff --git a/packages/icons/src/components/Airplay.tsx b/packages/icons/src/components/Airplay.tsx
@@ -1,7 +1,19 @@
 import * as React from 'react'
 import { Ref, SVGProps, forwardRef } from 'react'
-const SvgAirplay = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+const SvgAirplay = (
+  props: Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> & {
+    size?: number | string
+  },
+  ref: Ref<SVGSVGElement>
+) => (
+  <svg
+    width={props.size ?? 24}
+    height={props.size ?? 24}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={ref}
+    {...props}
+  >
     <path
       d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"
       stroke="currentColor"

diff --git a/packages/icons/src/components/AlertCircle.tsx b/packages/icons/src/components/AlertCircle.tsx
@@ -1,7 +1,19 @@
 import * as React from 'react'
 import { Ref, SVGProps, forwardRef } from 'react'
-const SvgAlertCircle = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+const SvgAlertCircle = (
+  props: Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> & {
+    size?: number | string
+  },
+  ref: Ref<SVGSVGElement>
+) => (
+  <svg
+    width={props.size ?? 24}
+    height={props.size ?? 24}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={ref}
+    {...props}
+  >
     <g clipPath="url(#a)" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
       <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" />
       <path d="M12 8v4" />

diff --git a/packages/icons/src/components/AlertOctagon.tsx b/packages/icons/src/components/AlertOctagon.tsx
@@ -1,7 +1,19 @@
 import * as React from 'react'
 import { Ref, SVGProps, forwardRef } from 'react'
-const SvgAlertOctagon = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+const SvgAlertOctagon = (
+  props: Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> & {
+    size?: number | string
+  },
+  ref: Ref<SVGSVGElement>
+) => (
+  <svg
+    width={props.size ?? 24}
+    height={props.size ?? 24}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={ref}
+    {...props}
+  >
     <g clipPath="url(#a)" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
       <path d="M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86L7.86 2Z" />
       <path d="M12 16h.01" />

diff --git a/packages/icons/src/components/AlertTriangle.tsx b/packages/icons/src/components/AlertTriangle.tsx
@@ -1,7 +1,19 @@
 import * as React from 'react'
 import { Ref, SVGProps, forwardRef } from 'react'
-const SvgAlertTriangle = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+const SvgAlertTriangle = (
+  props: Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> & {
+    size?: number | string
+  },
+  ref: Ref<SVGSVGElement>
+) => (
+  <svg
+    width={props.size ?? 24}
+    height={props.size ?? 24}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={ref}
+    {...props}
+  >
     <g clipPath="url(#a)" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
       <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0v0Z" />
       <path d="M12 17h.01" />

diff --git a/packages/icons/src/components/AlignCenter.tsx b/packages/icons/src/components/AlignCenter.tsx
@@ -1,7 +1,19 @@
 import * as React from 'react'
 import { Ref, SVGProps, forwardRef } from 'react'
-const SvgAlignCenter = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+const SvgAlignCenter = (
+  props: Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> & {
+    size?: number | string
+  },
+  ref: Ref<SVGSVGElement>
+) => (
+  <svg
+    width={props.size ?? 24}
+    height={props.size ?? 24}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={ref}
+    {...props}
+  >
     <path d="M18 10H6" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
     <path d="M21 6H3" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
     <path d="M21 14H3" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />

diff --git a/packages/icons/src/components/AlignJustify.tsx b/packages/icons/src/components/AlignJustify.tsx
@@ -1,7 +1,19 @@
 import * as React from 'react'
 import { Ref, SVGProps, forwardRef } from 'react'
-const SvgAlignJustify = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+const SvgAlignJustify = (
+  props: Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> & {
+    size?: number | string
+  },
+  ref: Ref<SVGSVGElement>
+) => (
+  <svg
+    width={props.size ?? 24}
+    height={props.size ?? 24}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={ref}
+    {...props}
+  >
     <path d="M21 10H3" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
     <path d="M21 6H3" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
     <path d="M21 14H3" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />

diff --git a/packages/icons/src/components/AlignLeft.tsx b/packages/icons/src/components/AlignLeft.tsx
@@ -1,7 +1,19 @@
 import * as React from 'react'
 import { Ref, SVGProps, forwardRef } from 'react'
-const SvgAlignLeft = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+const SvgAlignLeft = (
+  props: Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> & {
+    size?: number | string
+  },
+  ref: Ref<SVGSVGElement>
+) => (
+  <svg
+    width={props.size ?? 24}
+    height={props.size ?? 24}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={ref}
+    {...props}
+  >
     <path d="M17 10H3" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
     <path d="M21 6H3" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
     <path d="M21 14H3" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />

diff --git a/packages/icons/src/components/AlignRight.tsx b/packages/icons/src/components/AlignRight.tsx
@@ -1,7 +1,19 @@
 import * as React from 'react'
 import { Ref, SVGProps, forwardRef } from 'react'
-const SvgAlignRight = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+const SvgAlignRight = (
+  props: Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> & {
+    size?: number | string
+  },
+  ref: Ref<SVGSVGElement>
+) => (
+  <svg
+    width={props.size ?? 24}
+    height={props.size ?? 24}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={ref}
+    {...props}
+  >
     <path d="M21 10H7" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
     <path d="M21 6H3" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
     <path d="M21 14H3" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />

diff --git a/packages/icons/src/components/Anchor.tsx b/packages/icons/src/components/Anchor.tsx
@@ -1,7 +1,19 @@
 import * as React from 'react'
 import { Ref, SVGProps, forwardRef } from 'react'
-const SvgAnchor = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+const SvgAnchor = (
+  props: Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> & {
+    size?: number | string
+  },
+  ref: Ref<SVGSVGElement>
+) => (
+  <svg
+    width={props.size ?? 24}
+    height={props.size ?? 24}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={ref}
+    {...props}
+  >
     <path
       d="M12 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
       stroke="currentColor"

diff --git a/packages/icons/src/components/Aperture.tsx b/packages/icons/src/components/Aperture.tsx
@@ -1,7 +1,19 @@
 import * as React from 'react'
 import { Ref, SVGProps, forwardRef } from 'react'
-const SvgAperture = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+const SvgAperture = (
+  props: Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> & {
+    size?: number | string
+  },
+  ref: Ref<SVGSVGElement>
+) => (
+  <svg
+    width={props.size ?? 24}
+    height={props.size ?? 24}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={ref}
+    {...props}
+  >
     <path
       d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"
       stroke="currentColor"

diff --git a/packages/icons/src/components/Archive.tsx b/packages/icons/src/components/Archive.tsx
@@ -1,7 +1,19 @@
 import * as React from 'react'
 import { Ref, SVGProps, forwardRef } from 'react'
-const SvgArchive = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
-  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+const SvgArchive = (
+  props: Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> & {
+    size?: number | string
+  },
+  ref: Ref<SVGSVGElement>
+) => (
+  <svg
+    width={props.size ?? 24}
+    height={props.size ?? 24}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ref={ref}
+    {...props}
+  >
     <path d="M21 8v13H3V8" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
     <path d="M23 3H1v5h22V3Z" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
     <path d="M10 12h4" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />