-
-
Notifications
You must be signed in to change notification settings - Fork 932
/
CdsIcon.tsx
53 lines (48 loc) · 1.49 KB
/
CdsIcon.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import { ClarityIcons } from '@cds/core/icon';
import { IconShapeTuple } from '@cds/core/icon/interfaces/icon.interfaces';
import React, { DOMAttributes, useEffect } from 'react';
type CustomElement<T> = Partial<T & DOMAttributes<T> & { children: any }>;
export interface CdsIconProps {
shape: string;
size: string | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
direction: 'up' | 'down' | 'left' | 'right';
flip: 'horizontal' | 'vertical';
solid: boolean;
status: 'info' | 'success' | 'warning' | 'danger';
inverse: boolean;
badge: 'info' | 'success' | 'warning' | 'danger';
}
declare global {
namespace JSX {
interface IntrinsicElements {
['cds-icon']: CustomElement<CdsIconProps>;
}
}
}
export function registerCdsIcon(icon: IconShapeTuple) {
ClarityIcons.addIcons(icon);
}
/**
* @description
* A React wrapper for the Clarity UI icon component.
*
* @example
* ```ts
* import { userIcon } from '@cds/core/icon';
* import { CdsIcon } from '@vendure/admin-ui/react';
*
* registerCdsIcon(userIcon);
* export function MyComponent() {
* return <CdsIcon icon={userIcon} badge="warning" solid size="lg"></CdsIcon>;
* }
* ```
*
* @docsCategory react-components
*/
export function CdsIcon(props: { icon: IconShapeTuple; className?: string } & Partial<CdsIconProps>) {
const { icon, ...rest } = props;
useEffect(() => {
ClarityIcons.addIcons(icon);
}, [icon]);
return <cds-icon {...rest} shape={icon[0]}></cds-icon>;
}