@payfit/unity-components
Version:
32 lines (31 loc) • 1.7 kB
TypeScript
import { IconProps } from '@payfit/unity-icons';
import * as React from 'react';
export type AvatarIconProps = Omit<IconProps, 'size' | 'color'>;
/**
* The AvatarIcon component displays an icon within an Avatar component, using the Unity icon system.
* It automatically sizes the icon based on the parent Avatar's size and inherits the text color from the Avatar's color variant.
* @param {AvatarIconProps} props - Props for the AvatarIcon component
* @example
* ```tsx
* import { Avatar, AvatarIcon } from '@payfit/unity-components'
*
* function Example() {
* return (
* <Avatar size="lg" color="teal" variant="circle" aria-label="Vacation">
* <AvatarIcon src="PalmFilled" alt="Palm tree" />
* </Avatar>
* )
* }
* ```
* @remarks
* - Must be used as a child of an Avatar component
* - Icons automatically scale: 20px for small to large avatars, 24px for extra-large avatars
* - The icon color is inherited from the parent Avatar's text color
* @see {@link AvatarIconProps} for all available props
* @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/avatar/parts GitHub}
* @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=19-3741 Figma}
* @see Design docs in {@link https://www.payfit.design/24f360409/p/69c10a-avatar Payfit.design}
* @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-avatar-avataricon unity-components.payfit.io}
*/
declare const AvatarIcon: React.ForwardRefExoticComponent<AvatarIconProps & React.RefAttributes<HTMLDivElement>>;
export { AvatarIcon };