From acf5245fd92a441d26e8b7fbf6a5e90ed7801021 Mon Sep 17 00:00:00 2001 From: gmolki Date: Thu, 4 Jul 2024 14:49:35 +0200 Subject: [PATCH 1/2] feat: Add gradient to Icon --- src/components/common/Icon/cmp.tsx | 74 +++++++++++++++++++++------ src/components/common/Icon/styles.tsx | 21 ++++++++ src/components/common/Icon/types.ts | 1 + 3 files changed, 80 insertions(+), 16 deletions(-) diff --git a/src/components/common/Icon/cmp.tsx b/src/components/common/Icon/cmp.tsx index bdd71ce8..e318a973 100644 --- a/src/components/common/Icon/cmp.tsx +++ b/src/components/common/Icon/cmp.tsx @@ -14,21 +14,52 @@ import { StyledCustomIconCss, StyledIcon } from './styles' import * as customIcons from './custom/index' import styled, { useTheme } from 'styled-components' +import { Gradient } from '../../../themes/types' // @todo: Think about it as we are including all the icons on the final bundle library.add(far, fab, fass) const iconPrefixes: IconPrefix[] = ['fass', 'fab', 'far', 'custom'] +const GradientDefinition = ({ + gradient, + id, +}: { + gradient?: Gradient + id?: string +}) => { + if (!gradient) return null + + return ( + + + + {gradient.colors.map((color, index) => ( + + ))} + + + + ) +} +GradientDefinition.displayName = 'GradientDefinition' + export const Icon = ({ name, prefix = 'fass', size: $iconSize = 'md', color, + gradient, ...rest }: IconProps) => { const theme = useTheme() const $color = color ? theme.color[color] || color : color + const $gradient = gradient ? theme.gradient[gradient] : undefined + const $gradientId = $gradient ? `svg-gradient-${gradient}` : undefined for (const p of [prefix, ...iconPrefixes.filter((p) => p !== prefix)]) { if (p === 'custom') { @@ -40,13 +71,17 @@ export const Icon = ({ ` return ( - + <> + + + ) } else { const iconName = name as FAIconName @@ -58,15 +93,19 @@ export const Icon = ({ if (!icon) continue return ( - + <> + + + ) } } @@ -75,4 +114,7 @@ export const Icon = ({ } Icon.displayName = 'Icon' +export const GradientDefinitionMemo = memo( + GradientDefinition, +) as typeof GradientDefinition export default memo(Icon) as typeof Icon diff --git a/src/components/common/Icon/styles.tsx b/src/components/common/Icon/styles.tsx index 5ef47f29..21955784 100644 --- a/src/components/common/Icon/styles.tsx +++ b/src/components/common/Icon/styles.tsx @@ -7,6 +7,7 @@ import { IconSize } from './types' export interface StyledIconProps extends FontAwesomeIconProps { $iconSize: IconSize + $gradientId?: string } export const StyledIconSizeCss = css` @@ -65,8 +66,28 @@ export const StyledCustomIconCss = css` vertical-align: -0.125em; ${StyledIconSizeCss}; fill: ${({ $color }) => $color || 'currentColor'}; + + ${({ $gradientId }) => { + if (!$gradientId) return '' + + return css` + & path { + fill: url(#${$gradientId}); + } + ` + }}; ` export const StyledIcon = styled(FontAwesomeIcon)` ${StyledIconSizeCss} + + ${({ $gradientId }) => { + if (!$gradientId) return '' + + return css` + & path { + fill: url(#${$gradientId}); + } + ` + }}; ` diff --git a/src/components/common/Icon/types.ts b/src/components/common/Icon/types.ts index 8adbd293..2866a575 100644 --- a/src/components/common/Icon/types.ts +++ b/src/components/common/Icon/types.ts @@ -30,5 +30,6 @@ export interface IconProps extends Omit { name: IconName size?: IconSize prefix?: IconPrefix + gradient?: string // className?: string } From bd354a877dcd1d4c9db4de2d8d96e55962ff42eb Mon Sep 17 00:00:00 2001 From: gmolki Date: Thu, 4 Jul 2024 20:14:59 +0200 Subject: [PATCH 2/2] feat: add custom icons --- .../common/Icon/custom/computeSolutions.tsx | 16 ++++++ .../common/Icon/custom/confidential.tsx | 16 ++++++ .../common/Icon/custom/dashboard.tsx | 12 +++++ .../common/Icon/custom/functions.tsx | 15 ++++++ src/components/common/Icon/custom/index.ts | 8 +++ .../common/Icon/custom/instance.tsx | 18 +++++++ .../common/Icon/custom/manageWebsite.tsx | 12 +++++ .../common/Icon/custom/storageSolutions.tsx | 14 +++++ .../common/Icon/custom/web3HostingBox.tsx | 54 +++++++++++++++++++ src/components/common/Icon/types.ts | 8 +++ 10 files changed, 173 insertions(+) create mode 100644 src/components/common/Icon/custom/computeSolutions.tsx create mode 100644 src/components/common/Icon/custom/confidential.tsx create mode 100644 src/components/common/Icon/custom/dashboard.tsx create mode 100644 src/components/common/Icon/custom/functions.tsx create mode 100644 src/components/common/Icon/custom/instance.tsx create mode 100644 src/components/common/Icon/custom/manageWebsite.tsx create mode 100644 src/components/common/Icon/custom/storageSolutions.tsx create mode 100644 src/components/common/Icon/custom/web3HostingBox.tsx diff --git a/src/components/common/Icon/custom/computeSolutions.tsx b/src/components/common/Icon/custom/computeSolutions.tsx new file mode 100644 index 00000000..ee8aad1a --- /dev/null +++ b/src/components/common/Icon/custom/computeSolutions.tsx @@ -0,0 +1,16 @@ +import React, { SVGAttributes, memo } from 'react' + +const ComputeSolutions = (props: SVGAttributes) => { + return ( + + + + + + + + + ) +} + +export default memo(ComputeSolutions) as typeof ComputeSolutions diff --git a/src/components/common/Icon/custom/confidential.tsx b/src/components/common/Icon/custom/confidential.tsx new file mode 100644 index 00000000..8feda56d --- /dev/null +++ b/src/components/common/Icon/custom/confidential.tsx @@ -0,0 +1,16 @@ +import React, { SVGAttributes, memo } from 'react' + +const ComputeSolutions = (props: SVGAttributes) => { + return ( + + + + + + + + + ) +} + +export default memo(ComputeSolutions) as typeof ComputeSolutions diff --git a/src/components/common/Icon/custom/dashboard.tsx b/src/components/common/Icon/custom/dashboard.tsx new file mode 100644 index 00000000..593b6b51 --- /dev/null +++ b/src/components/common/Icon/custom/dashboard.tsx @@ -0,0 +1,12 @@ +import React, { SVGAttributes, memo } from 'react' + +const Dashboard = (props: SVGAttributes) => { + return ( + + + + + ) +} + +export default memo(Dashboard) as typeof Dashboard diff --git a/src/components/common/Icon/custom/functions.tsx b/src/components/common/Icon/custom/functions.tsx new file mode 100644 index 00000000..31de6ab0 --- /dev/null +++ b/src/components/common/Icon/custom/functions.tsx @@ -0,0 +1,15 @@ +import React, { SVGAttributes, memo } from 'react' + +const Dashboard = (props: SVGAttributes) => { + return ( + + + + + + + + ) +} + +export default memo(Dashboard) as typeof Dashboard diff --git a/src/components/common/Icon/custom/index.ts b/src/components/common/Icon/custom/index.ts index 297c79c3..1e7204e3 100644 --- a/src/components/common/Icon/custom/index.ts +++ b/src/components/common/Icon/custom/index.ts @@ -16,3 +16,11 @@ export { default as solana } from './solana' export { default as swap } from './swap' export { default as tezos } from './tezos' export { default as walletConnect } from './walletConnect' +export { default as storageSolutions } from './storageSolutions' +export { default as computeSolutions } from './computeSolutions' +export { default as web3HostingBox } from './web3HostingBox' +export { default as dashboard } from './dashboard' +export { default as functions } from './functions' +export { default as instance } from './instance' +export { default as confidential } from './confidential' +export { default as manageWebsite } from './manageWebsite' diff --git a/src/components/common/Icon/custom/instance.tsx b/src/components/common/Icon/custom/instance.tsx new file mode 100644 index 00000000..159eeecd --- /dev/null +++ b/src/components/common/Icon/custom/instance.tsx @@ -0,0 +1,18 @@ +import React, { SVGAttributes, memo } from 'react' + +const Instance = (props: SVGAttributes) => { + return ( + + + + + + + + + + + ) +} + +export default memo(Instance) as typeof Instance diff --git a/src/components/common/Icon/custom/manageWebsite.tsx b/src/components/common/Icon/custom/manageWebsite.tsx new file mode 100644 index 00000000..7bc813f4 --- /dev/null +++ b/src/components/common/Icon/custom/manageWebsite.tsx @@ -0,0 +1,12 @@ +import React, { SVGAttributes, memo } from 'react' + +const ManageWebsite = (props: SVGAttributes) => { + return ( + + + + + ) +} + +export default memo(ManageWebsite) as typeof ManageWebsite diff --git a/src/components/common/Icon/custom/storageSolutions.tsx b/src/components/common/Icon/custom/storageSolutions.tsx new file mode 100644 index 00000000..dca96025 --- /dev/null +++ b/src/components/common/Icon/custom/storageSolutions.tsx @@ -0,0 +1,14 @@ +import React, { SVGAttributes, memo } from 'react' + +const StorageSolutions = (props: SVGAttributes) => { + return ( + + + + + + + ) +} + +export default memo(StorageSolutions) as typeof StorageSolutions diff --git a/src/components/common/Icon/custom/web3HostingBox.tsx b/src/components/common/Icon/custom/web3HostingBox.tsx new file mode 100644 index 00000000..eaf64ad3 --- /dev/null +++ b/src/components/common/Icon/custom/web3HostingBox.tsx @@ -0,0 +1,54 @@ +import React, { SVGAttributes, memo } from 'react' + +const Web3HostingBox = (props: SVGAttributes) => { + return ( + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default memo(Web3HostingBox) as typeof Web3HostingBox diff --git a/src/components/common/Icon/types.ts b/src/components/common/Icon/types.ts index 2866a575..4aefd59c 100644 --- a/src/components/common/Icon/types.ts +++ b/src/components/common/Icon/types.ts @@ -23,6 +23,14 @@ export type CustomIconName = | 'swap' | 'tezos' | 'walletConnect' + | 'storageSolutions' + | 'computeSolutions' + | 'web3HostingBox' + | 'dashboard' + | 'functions' + | 'instance' + | 'confidential' + | 'manageWebsite' export type IconName = CustomIconName | FAIconName