diff --git a/.changeset/early-apes-judge.md b/.changeset/early-apes-judge.md
new file mode 100644
index 00000000..c48057b7
--- /dev/null
+++ b/.changeset/early-apes-judge.md
@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+fix ``icon prop and symbol centering
diff --git a/packages/components/src/shortcut/shortcut.stories.tsx b/packages/components/src/shortcut/shortcut.stories.tsx
index 2967c778..0a92425b 100644
--- a/packages/components/src/shortcut/shortcut.stories.tsx
+++ b/packages/components/src/shortcut/shortcut.stories.tsx
@@ -9,7 +9,7 @@ const variants = ['primary', 'secondary', 'gray'] as const
// eslint-disable-next-line react/display-name
const renderVariant = (variant: (typeof variants)[number]) => (props: any) => (
-
+ } />
)
diff --git a/packages/components/src/shortcut/shortcut.tsx b/packages/components/src/shortcut/shortcut.tsx
index 15932851..a00e6e77 100644
--- a/packages/components/src/shortcut/shortcut.tsx
+++ b/packages/components/src/shortcut/shortcut.tsx
@@ -1,13 +1,14 @@
-import { forwardRef } from 'react'
+import { cloneElement, forwardRef } from 'react'
import { match, P } from 'ts-pattern'
import { cva } from '../utils/variants'
+import type { IconElement } from '../types'
import type { VariantProps } from '../utils/variants'
const styles = cva({
- base: 'flex size-4 flex-shrink-0 items-center justify-center rounded-6 border',
+ base: 'grid size-4 flex-shrink-0 place-items-center rounded-6 border',
variants: {
variant: {
primary: [
@@ -32,7 +33,7 @@ const styles = cva({
type Props = VariantProps &
(
| {
- icon: React.ComponentType>
+ icon: IconElement
symbol?: never
}
| {
@@ -42,15 +43,17 @@ type Props = VariantProps &
)
const Shortcut = (props: Props, ref: React.Ref) => {
- const { variant = 'primary', ...rest } = props
+ const { variant = 'primary' } = props
return (
-
+
{match(props)
.with({ symbol: P.string }, ({ symbol }) => (
{symbol}
))
- .with({ icon: P._ }, ({ icon: Icon }) => )
+ .with({ icon: P._ }, ({ icon }) =>
+ cloneElement(icon, { className: 'size-3' }),
+ )
.exhaustive()}
)