Skip to content

Commit 2bc3b92

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

File tree

11 files changed

+966
-128
lines changed

11 files changed

+966
-128
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: 111 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,47 @@ 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+
Lucide icons in Avatar are automatically sized and colored according to the Avatar's `size` and `color` props, so manual adjustments are not needed on the icon itself.
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+
<View display="block" padding="small medium">
83+
<Avatar name="Profile" size="large" color="accent4" renderIcon={()=><CircleUserInstUIIcon />} />
84+
<Avatar name="Group" size="x-large" color="accent5" renderIcon={()=><UsersInstUIIcon />} />
85+
<Avatar name="Settings" size="xx-large" color="accent6" renderIcon={()=><SettingsInstUIIcon />} />
86+
</View>
87+
</div>
88+
```
89+
5990
### Size
6091

6192
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 +97,31 @@ type: example
6697
---
6798
<div>
6899
<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" />
100+
<Avatar name="Arthur C. Clarke" size="xx-small" />
101+
<Avatar name="James Arias" size="x-small" />
102+
<Avatar name="Charles Kimball" size="small" />
103+
<Avatar name="Melissa Reed" size="medium" />
104+
<Avatar name="Heather Wheeler" size="large" />
105+
<Avatar name="David Herbert" size="x-large" />
106+
<Avatar name="Isaac Asimov" size="xx-large" />
76107
</View>
77108
<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} />
109+
<Avatar name="Arthur C. Clarke" size="xx-small" src={avatarSquare} />
110+
<Avatar name="James Arias" size="x-small" src={avatarSquare} />
111+
<Avatar name="Charles Kimball" size="small" src={avatarSquare} />
112+
<Avatar name="Melissa Reed" size="medium" src={avatarSquare} />
113+
<Avatar name="Heather Wheeler" size="large" src={avatarSquare} />
114+
<Avatar name="David Herbert" size="x-large" src={avatarSquare} />
115+
<Avatar name="Isaac Asimov" size="xx-large" src={avatarSquare} />
85116
</View>
86117
<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" />
118+
<Avatar name="Arthur C. Clarke" renderIcon={UsersInstUIIcon} size="xx-small" />
119+
<Avatar name="James Arias" renderIcon={UsersInstUIIcon} size="x-small" />
120+
<Avatar name="Charles Kimball" renderIcon={UsersInstUIIcon} size="small" />
121+
<Avatar name="Melissa Reed" renderIcon={UsersInstUIIcon} size="medium" />
122+
<Avatar name="Heather Wheeler" renderIcon={UsersInstUIIcon} size="large" />
123+
<Avatar name="David Herbert" renderIcon={UsersInstUIIcon} size="x-large" />
124+
<Avatar name="Isaac Asimov" renderIcon={UsersInstUIIcon} size="xx-large" />
94125
</View>
95126
</div>
96127
```
@@ -105,22 +136,22 @@ type: example
105136
---
106137
<div>
107138
<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" />
139+
<Avatar name="Arthur C. Clarke" />
140+
<Avatar name="James Arias" color="accent2" />
141+
<Avatar name="Charles Kimball" color="accent3" />
142+
<Avatar name="Melissa Reed" color="accent4" />
143+
<Avatar name="Heather Wheeler" color="accent5" />
144+
<Avatar name="David Herbert" color="accent6" />
145+
<Avatar name="Isaac Asimov" color="accent1" />
115146
</View>
116147
<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" />
148+
<Avatar renderIcon={UsersInstUIIcon} name="Arthur C. Clarke" />
149+
<Avatar renderIcon={UsersInstUIIcon} name="James Arias" color="accent2" />
150+
<Avatar renderIcon={UsersInstUIIcon} name="Charles Kimball" color="accent3" />
151+
<Avatar renderIcon={UsersInstUIIcon} name="Melissa Reed" color="accent4" />
152+
<Avatar renderIcon={UsersInstUIIcon} name="Heather Wheeler" color="accent5" />
153+
<Avatar renderIcon={UsersInstUIIcon} name="David Herbert" color="accent6" />
154+
<Avatar renderIcon={UsersInstUIIcon} name="Isaac Asimov" color="accent1" />
124155
</View>
125156
</div>
126157
```
@@ -135,22 +166,22 @@ type: example
135166
---
136167
<div>
137168
<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 />
169+
<Avatar name="Arthur C. Clarke" hasInverseColor />
170+
<Avatar name="James Arias" color="accent2" hasInverseColor />
171+
<Avatar name="Charles Kimball" color="accent3" hasInverseColor />
172+
<Avatar name="Melissa Reed" color="accent4" hasInverseColor />
173+
<Avatar name="Heather Wheeler" color="accent5" hasInverseColor />
174+
<Avatar name="David Herbert" color="accent6" hasInverseColor />
175+
<Avatar name="Isaac Asimov" color="accent1" hasInverseColor />
145176
</View>
146177
<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 />
178+
<Avatar renderIcon={UsersInstUIIcon} name="Arthur C. Clarke" hasInverseColor />
179+
<Avatar renderIcon={UsersInstUIIcon} name="James Arias" color="accent2" hasInverseColor />
180+
<Avatar renderIcon={UsersInstUIIcon} name="Charles Kimball" color="accent3" hasInverseColor />
181+
<Avatar renderIcon={UsersInstUIIcon} name="Melissa Reed" color="accent4" hasInverseColor />
182+
<Avatar renderIcon={UsersInstUIIcon} name="Heather Wheeler" color="accent5" hasInverseColor />
183+
<Avatar renderIcon={UsersInstUIIcon} name="David Herbert" color="accent6" hasInverseColor />
184+
<Avatar renderIcon={UsersInstUIIcon} name="Isaac Asimov" color="accent1" hasInverseColor />
154185
</View>
155186
</div>
156187
```
@@ -162,10 +193,10 @@ In case you need more control over the color, feel free to use the `themeOverrid
162193
type: example
163194
---
164195
<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' }} />
196+
<Avatar name="Isaac Asimov" renderIcon={UsersInstUIIcon} themeOverride={{ accent1TextColor: '#efb410' }} />
197+
<Avatar name="Heather Wheeler" color="accent5" themeOverride={{ accent5TextColor: 'magenta' }} />
198+
<Avatar name="Charles Kimball" renderIcon={UsersInstUIIcon} hasInverseColor themeOverride={{ textOnColor: 'lightblue', backgroundColor: 'black' }} />
199+
<Avatar name="David Herbert" hasInverseColor color="accent5" themeOverride={{ accent5BackgroundColor: '#efb410' }} />
169200
</div>
170201
```
171202

@@ -179,14 +210,14 @@ type: example
179210
---
180211
<div>
181212
<Text>Inline avatars: </Text>
182-
<Avatar name="John Doe" size="small" display="inline" />
183-
<Avatar name="Jane Smith" size="small" display="inline" />
213+
<Avatar name="John Doe" size="small" display="inline" />
214+
<Avatar name="Jane Smith" size="small" display="inline" />
184215
<Text> are displayed inline with text.</Text>
185216

186217
<div style={{ marginTop: '1rem' }}>
187218
<Text>Block avatars:</Text>
188-
<Avatar name="John Doe" size="small" display="block" />
189-
<Avatar name="Jane Smith" size="small" display="block" />
219+
<Avatar name="John Doe" size="small" display="block" />
220+
<Avatar name="Jane Smith" size="small" display="block" />
190221
<Text>stack vertically.</Text>
191222
</div>
192223
</div>
@@ -202,7 +233,7 @@ type: example
202233
---
203234
<div>
204235
<Avatar name="Sarah Robinson" src={avatarSquare} showBorder="always" />
205-
<Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} showBorder="never" />
236+
<Avatar name="Sarah Robinson" renderIcon={UsersInstUIIcon} showBorder="never" />
206237
</div>
207238
```
208239

@@ -218,8 +249,7 @@ type: example
218249
<Avatar
219250
name="John Doe"
220251
src={avatarSquare}
221-
renderIcon={<IconGroupLine />}
222-
252+
renderIcon={UsersInstUIIcon}
223253
/>
224254
<Text>Image takes priority over icon</Text>
225255
</div>

0 commit comments

Comments
 (0)