Skip to content

Commit 1c11f12

Browse files
joyenjoyerjoyenjoyer
committed
feat(ui-avatar): add lucide icons to Avatar
1 parent 4a1277b commit 1c11f12

File tree

8 files changed

+347
-129
lines changed

8 files changed

+347
-129
lines changed

‎packages/ui-avatar/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"@instructure/ui-axe-check": "workspace:*",
3535
"@instructure/ui-babel-preset": "workspace:*",
3636
"@instructure/ui-color-utils": "workspace:*",
37+
"@instructure/ui-icons-lucide": "workspace:*",
3738
"@instructure/ui-themes": "workspace:*",
3839
"@testing-library/jest-dom": "^6.6.3",
3940
"@testing-library/react": "15.0.7",

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

Lines changed: 108 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -16,22 +16,22 @@ readonly: true
1616

1717
<div>
1818
<View display="block" padding="small medium" background="primary">
19-
<Avatar name="Arthur C. Clarke" />
20-
<Avatar name="James Arias" color="accent2" />
21-
<Avatar name="Charles Kimball" color="accent3" />
22-
<Avatar name="Melissa Reed" color="accent4" />
23-
<Avatar name="Heather Wheeler" color="accent5" />
24-
<Avatar name="David Herbert" color="accent6" />
25-
<Avatar name="Isaac Asimov" color="accent1" />
19+
<Avatar name="Arthur C. Clarke" />
20+
<Avatar name="James Arias" color="accent2" />
21+
<Avatar name="Charles Kimball" color="accent3" />
22+
<Avatar name="Melissa Reed" color="accent4" />
23+
<Avatar name="Heather Wheeler" color="accent5" />
24+
<Avatar name="David Herbert" color="accent6" />
25+
<Avatar name="Isaac Asimov" color="accent1" />
2626
</View>
2727
<View display="block" padding="small medium" background="primary">
28-
<Avatar name="Arthur C. Clarke" hasInverseColor />
29-
<Avatar name="James Arias" color="accent2" hasInverseColor />
30-
<Avatar name="Charles Kimball" color="accent3" hasInverseColor />
31-
<Avatar name="Melissa Reed" color="accent4" hasInverseColor />
32-
<Avatar name="Heather Wheeler" color="accent5" hasInverseColor />
33-
<Avatar name="David Herbert" color="accent6" hasInverseColor />
34-
<Avatar name="Isaac Asimov" color="accent1" hasInverseColor />
28+
<Avatar name="Arthur C. Clarke" hasInverseColor />
29+
<Avatar name="James Arias" color="accent2" hasInverseColor />
30+
<Avatar name="Charles Kimball" color="accent3" hasInverseColor />
31+
<Avatar name="Melissa Reed" color="accent4" hasInverseColor />
32+
<Avatar name="Heather Wheeler" color="accent5" hasInverseColor />
33+
<Avatar name="David Herbert" color="accent6" hasInverseColor />
34+
<Avatar name="Isaac Asimov" color="accent1" hasInverseColor />
3535
</View>
3636
</div>
3737
```
@@ -46,16 +46,44 @@ type: example
4646
readonly: true
4747
---
4848
<View display="block" padding="small medium" background="primary">
49-
<Avatar size="xx-small" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
50-
<Avatar size="x-small" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
51-
<Avatar size="small" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
52-
<Avatar size="medium" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
53-
<Avatar size="large" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
54-
<Avatar size="x-large" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
55-
<Avatar size="xx-large" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
49+
<Avatar size="xx-small" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
50+
<Avatar size="x-small" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
51+
<Avatar size="small" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
52+
<Avatar size="medium" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
53+
<Avatar size="large" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
54+
<Avatar size="x-large" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
55+
<Avatar size="xx-large" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
5656
</View>
5757
```
5858

59+
### Using Lucide Icons
60+
61+
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.
62+
63+
```js
64+
---
65+
type: example
66+
---
67+
<div>
68+
<View display="block" padding="small medium">
69+
<Avatar name="User Avatar" size="xx-small" renderIcon={UserInstUIIcon} />
70+
<Avatar name="User Avatar" size="x-small" renderIcon={UserInstUIIcon} />
71+
<Avatar name="User Avatar" size="small" renderIcon={UserInstUIIcon} />
72+
<Avatar name="User Avatar" size="medium" renderIcon={UserInstUIIcon} />
73+
<Avatar name="User Avatar" size="large" renderIcon={UserInstUIIcon} />
74+
<Avatar name="User Avatar" size="x-large" renderIcon={UserInstUIIcon} />
75+
<Avatar name="User Avatar" size="xx-large" renderIcon={UserInstUIIcon} />
76+
</View>
77+
<View display="block" padding="small medium">
78+
<Avatar name="Profile" size="small" color="accent2" renderIcon={<CircleUserInstUIIcon />} />
79+
<Avatar name="Group" size="medium" color="accent3" renderIcon={<UsersInstUIIcon />} />
80+
<Avatar name="Settings" size="large" color="accent4" renderIcon={<SettingsInstUIIcon />} />
81+
</View>
82+
</div>
83+
```
84+
85+
**Note:** When using Lucide icons with Avatar, do not specify the `size` and `color` prop on the icon itself. The Avatar component will automatically pass the appropriate size and color based on the current theme. Icon should be passed as either a reference to the icon component (`UserInstUIIcon`) or as JSX (`<UserInstUIIcon />`).
86+
5987
### Size
6088

6189
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.
@@ -66,31 +94,31 @@ type: example
6694
---
6795
<div>
6896
<View display="block" padding="small medium">
69-
<Avatar name="Arthur C. Clarke" size="xx-small" />
70-
<Avatar name="James Arias" size="x-small" />
71-
<Avatar name="Charles Kimball" size="small" />
72-
<Avatar name="Melissa Reed" size="medium" />
73-
<Avatar name="Heather Wheeler" size="large" />
74-
<Avatar name="David Herbert" size="x-large" />
75-
<Avatar name="Isaac Asimov" size="xx-large" />
97+
<Avatar name="Arthur C. Clarke" size="xx-small" />
98+
<Avatar name="James Arias" size="x-small" />
99+
<Avatar name="Charles Kimball" size="small" />
100+
<Avatar name="Melissa Reed" size="medium" />
101+
<Avatar name="Heather Wheeler" size="large" />
102+
<Avatar name="David Herbert" size="x-large" />
103+
<Avatar name="Isaac Asimov" size="xx-large" />
76104
</View>
77105
<View display="block" padding="small medium" background="primary">
78-
<Avatar name="Arthur C. Clarke" size="xx-small" src={avatarSquare} />
79-
<Avatar name="James Arias" size="x-small" src={avatarSquare} />
80-
<Avatar name="Charles Kimball" size="small" src={avatarSquare} />
81-
<Avatar name="Melissa Reed" size="medium" src={avatarSquare} />
82-
<Avatar name="Heather Wheeler" size="large" src={avatarSquare} />
83-
<Avatar name="David Herbert" size="x-large" src={avatarSquare} />
84-
<Avatar name="Isaac Asimov" size="xx-large" src={avatarSquare} />
106+
<Avatar name="Arthur C. Clarke" size="xx-small" src={avatarSquare} />
107+
<Avatar name="James Arias" size="x-small" src={avatarSquare} />
108+
<Avatar name="Charles Kimball" size="small" src={avatarSquare} />
109+
<Avatar name="Melissa Reed" size="medium" src={avatarSquare} />
110+
<Avatar name="Heather Wheeler" size="large" src={avatarSquare} />
111+
<Avatar name="David Herbert" size="x-large" src={avatarSquare} />
112+
<Avatar name="Isaac Asimov" size="xx-large" src={avatarSquare} />
85113
</View>
86114
<View display="block" padding="small medium">
87-
<Avatar name="Arthur C. Clarke" renderIcon={<IconGroupLine />} size="xx-small" />
88-
<Avatar name="James Arias" renderIcon={<IconGroupLine />} size="x-small" />
89-
<Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} size="small" />
90-
<Avatar name="Melissa Reed" renderIcon={<IconGroupLine />} size="medium" />
91-
<Avatar name="Heather Wheeler" renderIcon={<IconGroupLine />} size="large" />
92-
<Avatar name="David Herbert" renderIcon={<IconGroupLine />} size="x-large" />
93-
<Avatar name="Isaac Asimov" renderIcon={<IconGroupLine />} size="xx-large" />
115+
<Avatar name="Arthur C. Clarke" renderIcon={UsersInstUIIcon} size="xx-small" />
116+
<Avatar name="James Arias" renderIcon={UsersInstUIIcon} size="x-small" />
117+
<Avatar name="Charles Kimball" renderIcon={UsersInstUIIcon} size="small" />
118+
<Avatar name="Melissa Reed" renderIcon={UsersInstUIIcon} size="medium" />
119+
<Avatar name="Heather Wheeler" renderIcon={UsersInstUIIcon} size="large" />
120+
<Avatar name="David Herbert" renderIcon={UsersInstUIIcon} size="x-large" />
121+
<Avatar name="Isaac Asimov" renderIcon={UsersInstUIIcon} size="xx-large" />
94122
</View>
95123
</div>
96124
```
@@ -105,22 +133,22 @@ type: example
105133
---
106134
<div>
107135
<View display="block" padding="small medium">
108-
<Avatar name="Arthur C. Clarke" />
109-
<Avatar name="James Arias" color="accent2" />
110-
<Avatar name="Charles Kimball" color="accent3" />
111-
<Avatar name="Melissa Reed" color="accent4" />
112-
<Avatar name="Heather Wheeler" color="accent5" />
113-
<Avatar name="David Herbert" color="accent6" />
114-
<Avatar name="Isaac Asimov" color="accent1" />
136+
<Avatar name="Arthur C. Clarke" />
137+
<Avatar name="James Arias" color="accent2" />
138+
<Avatar name="Charles Kimball" color="accent3" />
139+
<Avatar name="Melissa Reed" color="accent4" />
140+
<Avatar name="Heather Wheeler" color="accent5" />
141+
<Avatar name="David Herbert" color="accent6" />
142+
<Avatar name="Isaac Asimov" color="accent1" />
115143
</View>
116144
<View display="block" padding="small medium">
117-
<Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" />
118-
<Avatar renderIcon={<IconGroupLine />} name="James Arias" color="accent2" />
119-
<Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="accent3" />
120-
<Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="accent4" />
121-
<Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="accent5" />
122-
<Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="accent6" />
123-
<Avatar renderIcon={<IconGroupLine />} name="Isaac Asimov" color="accent1" />
145+
<Avatar renderIcon={UsersInstUIIcon} name="Arthur C. Clarke" />
146+
<Avatar renderIcon={UsersInstUIIcon} name="James Arias" color="accent2" />
147+
<Avatar renderIcon={UsersInstUIIcon} name="Charles Kimball" color="accent3" />
148+
<Avatar renderIcon={UsersInstUIIcon} name="Melissa Reed" color="accent4" />
149+
<Avatar renderIcon={UsersInstUIIcon} name="Heather Wheeler" color="accent5" />
150+
<Avatar renderIcon={UsersInstUIIcon} name="David Herbert" color="accent6" />
151+
<Avatar renderIcon={UsersInstUIIcon} name="Isaac Asimov" color="accent1" />
124152
</View>
125153
</div>
126154
```
@@ -135,22 +163,22 @@ type: example
135163
---
136164
<div>
137165
<View display="block" padding="small medium" background="primary">
138-
<Avatar name="Arthur C. Clarke" hasInverseColor margin="general.spaceXs" />
139-
<Avatar name="James Arias" color="accent2" hasInverseColor />
140-
<Avatar name="Charles Kimball" color="accent3" hasInverseColor />
141-
<Avatar name="Melissa Reed" color="accent4" hasInverseColor />
142-
<Avatar name="Heather Wheeler" color="accent5" hasInverseColor />
143-
<Avatar name="David Herbert" color="accent6" hasInverseColor />
144-
<Avatar name="Isaac Asimov" color="accent1" hasInverseColor />
166+
<Avatar name="Arthur C. Clarke" hasInverseColor />
167+
<Avatar name="James Arias" color="accent2" hasInverseColor />
168+
<Avatar name="Charles Kimball" color="accent3" hasInverseColor />
169+
<Avatar name="Melissa Reed" color="accent4" hasInverseColor />
170+
<Avatar name="Heather Wheeler" color="accent5" hasInverseColor />
171+
<Avatar name="David Herbert" color="accent6" hasInverseColor />
172+
<Avatar name="Isaac Asimov" color="accent1" hasInverseColor />
145173
</View>
146174
<View display="block" padding="small medium" background="primary">
147-
<Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" hasInverseColor />
148-
<Avatar renderIcon={<IconGroupLine />} name="James Arias" color="accent2" hasInverseColor />
149-
<Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="accent3" hasInverseColor />
150-
<Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="accent4" hasInverseColor />
151-
<Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="accent5" hasInverseColor />
152-
<Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="accent6" hasInverseColor />
153-
<Avatar renderIcon={<IconGroupLine />} name="Isaac Asimov" color="accent1" hasInverseColor />
175+
<Avatar renderIcon={UsersInstUIIcon} name="Arthur C. Clarke" hasInverseColor />
176+
<Avatar renderIcon={UsersInstUIIcon} name="James Arias" color="accent2" hasInverseColor />
177+
<Avatar renderIcon={UsersInstUIIcon} name="Charles Kimball" color="accent3" hasInverseColor />
178+
<Avatar renderIcon={UsersInstUIIcon} name="Melissa Reed" color="accent4" hasInverseColor />
179+
<Avatar renderIcon={UsersInstUIIcon} name="Heather Wheeler" color="accent5" hasInverseColor />
180+
<Avatar renderIcon={UsersInstUIIcon} name="David Herbert" color="accent6" hasInverseColor />
181+
<Avatar renderIcon={UsersInstUIIcon} name="Isaac Asimov" color="accent1" hasInverseColor />
154182
</View>
155183
</div>
156184
```
@@ -162,10 +190,10 @@ In case you need more control over the color, feel free to use the `themeOverrid
162190
type: example
163191
---
164192
<div>
165-
<Avatar name="Isaac Asimov" renderIcon={<IconGroupLine />} themeOverride={{ accent1TextColor: '#efb410' }} />
166-
<Avatar name="Heather Wheeler" color="accent5" themeOverride={{ accent5TextColor: 'magenta' }} />
167-
<Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} hasInverseColor themeOverride={{ textOnColor: 'lightblue', backgroundColor: 'black' }} />
168-
<Avatar name="David Herbert" hasInverseColor color="accent5" themeOverride={{ accent5BackgroundColor: '#efb410' }} />
193+
<Avatar name="Isaac Asimov" renderIcon={UsersInstUIIcon} themeOverride={{ accent1TextColor: '#efb410' }} />
194+
<Avatar name="Heather Wheeler" color="accent5" themeOverride={{ accent5TextColor: 'magenta' }} />
195+
<Avatar name="Charles Kimball" renderIcon={UsersInstUIIcon} hasInverseColor themeOverride={{ textOnColor: 'lightblue', backgroundColor: 'black' }} />
196+
<Avatar name="David Herbert" hasInverseColor color="accent5" themeOverride={{ accent5BackgroundColor: '#efb410' }} />
169197
</div>
170198
```
171199

@@ -179,14 +207,14 @@ type: example
179207
---
180208
<div>
181209
<Text>Inline avatars: </Text>
182-
<Avatar name="John Doe" size="small" display="inline" />
183-
<Avatar name="Jane Smith" size="small" display="inline" />
210+
<Avatar name="John Doe" size="small" display="inline" />
211+
<Avatar name="Jane Smith" size="small" display="inline" />
184212
<Text> are displayed inline with text.</Text>
185213

186214
<div style={{ marginTop: '1rem' }}>
187215
<Text>Block avatars:</Text>
188-
<Avatar name="John Doe" size="small" display="block" />
189-
<Avatar name="Jane Smith" size="small" display="block" />
216+
<Avatar name="John Doe" size="small" display="block" />
217+
<Avatar name="Jane Smith" size="small" display="block" />
190218
<Text>stack vertically.</Text>
191219
</div>
192220
</div>
@@ -202,7 +230,7 @@ type: example
202230
---
203231
<div>
204232
<Avatar name="Sarah Robinson" src={avatarSquare} showBorder="always" />
205-
<Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} showBorder="never" />
233+
<Avatar name="Sarah Robinson" renderIcon={UsersInstUIIcon} showBorder="never" />
206234
</div>
207235
```
208236

@@ -218,8 +246,7 @@ type: example
218246
<Avatar
219247
name="John Doe"
220248
src={avatarSquare}
221-
renderIcon={<IconGroupLine />}
222-
249+
renderIcon={UsersInstUIIcon}
223250
/>
224251
<Text>Image takes priority over icon</Text>
225252
</div>

0 commit comments

Comments
 (0)