Skip to content

Chore: Improve icon component #297

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

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

luukbrauckmann
Copy link
Member

@luukbrauckmann luukbrauckmann commented Jul 24, 2025

Changes

  • Refactor Icon component. I think this makes it a bit nicer.

My first idea was to implement the <title> element, but after some research I found out the title element isn't consistently supported by screenreaders and assistive technologies, even though it's part of the SVG specification. So I kept the aria-label approach but cleaned up the implementation.

Associated issue

N.A.

How to test

Checklist

  • I have performed a self-review of my own code
  • I have made sure that my PR is easy to review (not too big, includes comments)
  • I have made updated relevant documentation files (in project README, docs/, etc)
  • I have added a decision log entry if the change affects the architecture or changes a significant technology
  • I have notified a reviewer

The commit fixes several TypeScript-related issues, improves type
safety, and makes type usage more consistent across multiple components.
This includes proper HTMLAttributes usage, explicit HTMLTag typing, and
better Props type definitions.
@luukbrauckmann luukbrauckmann self-assigned this Jul 24, 2025
Copy link

cloudflare-workers-and-pages bot commented Jul 24, 2025

Deploying head-start with  Cloudflare Pages  Cloudflare Pages

Latest commit: 8192901
Status: ✅  Deploy successful!
Preview URL: https://347a1e2a.head-start.pages.dev
Branch Preview URL: https://chore-improve-icon-component.head-start.pages.dev

View logs

@luukbrauckmann luukbrauckmann changed the base branch from main to fix/eslint-ignore-pattern July 24, 2025 13:43
@luukbrauckmann luukbrauckmann marked this pull request as ready for review July 24, 2025 13:53
Base automatically changed from fix/eslint-ignore-pattern to main July 24, 2025 14:09
Comment on lines +18 to +24
data-icon={name}
role={ariaLabel ? 'img' : 'presentation'}
aria-hidden={!ariaLabel}
aria-label={ariaLabel}
{...props}
>
<use href={`#${name}`} />
Copy link
Member

Choose a reason for hiding this comment

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

Are these not identical to the previous implementation besides removing xlink:href?

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.

2 participants