feat(ui-avatar): add lucide icons to Avatar

Author: joyenjoyer

packages/ui-avatar/package.json

@@ -34,6 +34,7 @@
     "@instructure/ui-axe-check": "workspace:*",
     "@instructure/ui-babel-preset": "workspace:*",
     "@instructure/ui-color-utils": "workspace:*",
+    "@instructure/ui-icons-lucide": "workspace:*",
     "@instructure/ui-themes": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",

packages/ui-avatar/src/Avatar/README.md

@@ -142,6 +142,34 @@ readonly: true
 </View>
 ```
 
+### Using Lucide Icons
+
+Avatar automatically sizes Lucide icons based on the Avatar's `size` prop. You don't need to manually set the icon size - the Avatar component handles this for you.
+
+```js
+---
+type: example
+---
+<div>
+  <View display="block" padding="small medium">
+    <Avatar name="User Avatar" size="xx-small" renderIcon={UserInstUIIcon} />
+    <Avatar name="User Avatar" size="x-small" renderIcon={UserInstUIIcon} />
+    <Avatar name="User Avatar" size="small" renderIcon={UserInstUIIcon} />
+    <Avatar name="User Avatar" size="medium" renderIcon={UserInstUIIcon} />
+    <Avatar name="User Avatar" size="large" renderIcon={UserInstUIIcon} />
+    <Avatar name="User Avatar" size="x-large" renderIcon={UserInstUIIcon} />
+    <Avatar name="User Avatar" size="xx-large" renderIcon={UserInstUIIcon} />
+  </View>
+  <View display="block" padding="small medium">
+    <Avatar name="Profile" size="small" color="accent2" renderIcon={CircleUserInstUIIcon} />
+    <Avatar name="Group" size="medium" color="accent3" renderIcon={UsersInstUIIcon} />
+    <Avatar name="Settings" size="large" color="accent4" renderIcon={SettingsInstUIIcon} />
+  </View>
+</div>
+```
+
+**Note:** When using Lucide icons with Avatar, do not specify the `size` prop on the icon itself. The Avatar component will automatically pass the appropriate size based on its own `size` prop.
+
 ### Size
 
 The `size` prop allows you to select from `xx-small`, `x-small`, `small`, `medium` _(default)_, `large`, `x-large`, and `xx-large`. Each size has predefined dimensions and typography scales.

packages/ui-avatar/src/Avatar/__tests__/Avatar.test.tsx

@@ -29,6 +29,10 @@ import { runAxeCheck } from '@instructure/ui-axe-check'
 import '@testing-library/jest-dom'
 import Avatar from '../index'
 import { IconGroupLine } from '@instructure/ui-icons'
+import {
+  UserInstUIIcon,
+  CircleUserInstUIIcon
+} from '@instructure/ui-icons-lucide'
 
 describe('<Avatar />', () => {
   describe('for a11y', () => {
@@ -112,6 +116,113 @@ describe('<Avatar />', () => {
       const avatarSvg = container.querySelector('svg')
       expect(avatarSvg).toBeInTheDocument()
     })
+
+    it('should pass the correct size prop to icon based on Avatar size', async () => {
+      const MockIcon = vi.fn((props: any) => (
+        <svg data-testid="mock-icon" data-size={props.size}>
+          <circle cx="25" cy="75" r="20" />
+        </svg>
+      ))
+
+      const { container } = render(
+        <Avatar name="avatar name" size="medium" renderIcon={MockIcon} />
+      )
+
+      expect(MockIcon).toHaveBeenCalledWith(
+        expect.objectContaining({ size: 'md' })
+      )
+      const icon = container.querySelector('[data-testid="mock-icon"]')
+      expect(icon).toHaveAttribute('data-size', 'md')
+    })
+
+    it('should map xx-small Avatar to lg icon size', async () => {
+      const MockIcon = vi.fn(() => (
+        <svg data-testid="mock-icon">
+          <circle cx="25" cy="75" r="20" />
+        </svg>
+      ))
+
+      render(
+        <Avatar name="avatar name" size="xx-small" renderIcon={MockIcon} />
+      )
+
+      expect(MockIcon).toHaveBeenCalledWith(
+        expect.objectContaining({ size: 'xs' })
+      )
+    })
+
+    it('should map x-small Avatar to xl icon size', async () => {
+      const MockIcon = vi.fn(() => (
+        <svg data-testid="mock-icon">
+          <circle cx="25" cy="75" r="20" />
+        </svg>
+      ))
+
+      render(<Avatar name="avatar name" size="x-small" renderIcon={MockIcon} />)
+
+      expect(MockIcon).toHaveBeenCalledWith(
+        expect.objectContaining({ size: 'xs' })
+      )
+    })
+
+    it('should work with icons that ignore the size prop (backwards compatibility)', async () => {
+      const IconWithoutSize = () => (
+        <svg data-testid="icon-without-size">
+          <circle cx="25" cy="75" r="20" />
+        </svg>
+      )
+
+      const { container } = render(
+        <Avatar name="avatar name" size="large" renderIcon={IconWithoutSize} />
+      )
+
+      const icon = container.querySelector('[data-testid="icon-without-size"]')
+      expect(icon).toBeInTheDocument()
+    })
+
+    it('should display a Lucide icon with default size', async () => {
+      const { container } = render(
+        <Avatar name="avatar name" renderIcon={UserInstUIIcon} />
+      )
+
+      const avatarSvg = container.querySelector('svg')
+      expect(avatarSvg).toBeInTheDocument()
+    })
+
+    it('should display a Lucide icon with medium Avatar size', async () => {
+      const { container } = render(
+        <Avatar
+          name="avatar name"
+          size="medium"
+          renderIcon={CircleUserInstUIIcon}
+        />
+      )
+
+      const avatarSvg = container.querySelector('svg')
+      expect(avatarSvg).toBeInTheDocument()
+    })
+
+    it('should display a Lucide icon with xx-small Avatar size', async () => {
+      const { container } = render(
+        <Avatar
+          name="avatar name"
+          size="xx-small"
+          renderIcon={UserInstUIIcon}
+        />
+      )
+
+      const avatarSvg = container.querySelector('svg')
+      expect(avatarSvg).toBeInTheDocument()
+    })
+
+    it('should display a Lucide icon with x-small Avatar size', async () => {
+      const { container } = render(
+        <Avatar name="avatar name" size="x-small" renderIcon={UserInstUIIcon} />
+      )
+
+      const avatarSvg = container.querySelector('svg')
+      expect(avatarSvg).toBeInTheDocument()
+    })
   })
 
   describe('when an image src url is provided', () => {

packages/ui-avatar/src/Avatar/index.tsx

@@ -121,6 +121,17 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
       />
     )
 
+    // Map Avatar sizes to Lucide icon semantic size tokens
+    const avatarSizeToIconSize = {
+      'xx-small': 'xs',
+      'x-small': 'xs',
+      small: 'sm',
+      medium: 'md',
+      large: 'lg',
+      'x-large': 'xl',
+      'xx-large': '2xl'
+    } as const
+
     const renderContent = () => {
       //image in avatar - prioritize image over icon
       if (src) {
@@ -133,9 +144,14 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
       }
 
       //icon in avatar
-      //TODO-REWORK make the icon inherit the size prop of the Avatar when the icons have it
-      if (renderIcon) {
-        return callRenderProp(renderIcon)
+      if (
+        renderIcon &&
+        (renderIcon as React.ComponentType)?.displayName?.startsWith(
+          'wrapLucideIcon'
+        )
+      ) {
+        const iconSize = avatarSizeToIconSize[size]
+        return callRenderProp(renderIcon, { size: iconSize })
       }
 
       //initials in avatar

packages/ui-avatar/src/Avatar/props.ts

@@ -97,8 +97,9 @@ type AvatarOwnProps = {
   elementRef?: (element: Element | null) => void
   /**
    * An icon, or function that returns an icon that gets displayed. If the `src` prop is provided, `src` will have priority.
+   * When using Lucide icons, Avatar will automatically pass the appropriate size prop based on the Avatar's size.
    */
-  renderIcon?: Renderable
+  renderIcon?: Renderable<{ size?: string | number }>
 }
 
 export type AvatarState = {

packages/ui-avatar/tsconfig.build.json

@@ -33,6 +33,9 @@
     },
     {
       "path": "../ui-icons/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-icons-lucide/tsconfig.build.json"
     }
   ]
 }