Skip to content

refactor!: replace SVG with <div> and custom font with Lumo icon #9316

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
May 28, 2025

Conversation

vursen
Copy link
Contributor

@vursen vursen commented May 27, 2025

Description

  • Replaced <svg part="icon"> with <div part="icon">
  • Removed the vaadin-avatar-icons font
  • Updated the Lumo theme to render --lumo-icons-user instead of the custom font icon
  • Adjusted the Base theme to accommodate the updated DOM structure

Fixes #9309

Type of change

  • Refactor

@vursen vursen force-pushed the avatar_replace_svg_with_div_use_lumo_icon branch from 8a3f861 to d0e894f Compare May 27, 2025 14:04
@vursen vursen marked this pull request as ready for review May 27, 2025 14:06
@vursen vursen requested review from jouni and web-padawan May 27, 2025 14:06
Copy link
Contributor Author

@vursen vursen May 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The change likely stems from a rendering difference between SVG and HTML. The new version, however, seems slightly better aligned to my eye.

@@ -40,23 +40,15 @@ export const avatarStyles = css`
}

[part='icon'] {
font-size: 5.6em;
height: 100%;
mask: var(--_vaadin-icon-user) no-repeat center / 74%;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Today I learned about this shorthand syntax, nice 😃

@vursen vursen changed the title refactor!: replace SVG with <div>, custom font with Lumo icon refactor!: replace SVG with <div> and custom font with Lumo icon May 28, 2025
Copy link

@vursen vursen merged commit 7c5aa02 into main May 28, 2025
10 checks passed
@vursen vursen deleted the avatar_replace_svg_with_div_use_lumo_icon branch May 28, 2025 06:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[avatar] Replace <svg part=icon> with div and use Lumo user icon instead
3 participants