Skip to content
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

[UI v2] feat: Adding Icon component to consolidate available icons for the UI #16208

Merged
merged 1 commit into from
Dec 4, 2024

Conversation

devinvillarosa
Copy link
Contributor

@devinvillarosa devinvillarosa commented Dec 4, 2024

Icons used in the UI has an unlimited factor on which ones to use.
This PR consolidates which icons can be used for the UI by centralizing it all in the Icon component

  1. Create Icon component and ICONS map to provide the available Icons for the UI
  2. Added stories for the Icons and showcasing which ones are allowed
  3. Update existing repo to replace any lucide-react Icons for our internal Icon library
Screen.Recording.2024-12-03.at.8.56.54.PM.mov

Checklist

  • This pull request references any related issue by including "closes <link to issue>"
    • If no issue exists and your change is not a small fix, please create an issue first.
  • If this pull request adds new functionality, it includes unit tests that cover the changes
  • If this pull request removes docs files, it includes redirect settings in mint.json.
  • If this pull request adds functions or classes, it includes helpful docstrings.

Discussed in comments #16203
Related to #15512

@devinvillarosa devinvillarosa marked this pull request as ready for review December 4, 2024 01:21
@devinvillarosa devinvillarosa force-pushed the icon-tree-shaking branch 5 times, most recently from 875d258 to b57ed9f Compare December 4, 2024 06:06
@devinvillarosa devinvillarosa added development Tech debt, refactors, CI, tests, and other related work. ui Related to the Prefect web interface labels Dec 4, 2024
X,
} as const;

export type IconId = keyof typeof ICONS;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Does Lucide not publish it's own Enum for this? Woooof.

Copy link
Member

Choose a reason for hiding this comment

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

It does, but they don't recommend using it because it drastically increased bundle size: https://lucide.dev/guide/packages/lucide-react#one-generic-icon-component

@devinvillarosa devinvillarosa force-pushed the icon-tree-shaking branch 2 times, most recently from 42181c5 to 1610f28 Compare December 4, 2024 18:04
Copy link
Member

@desertaxle desertaxle left a comment

Choose a reason for hiding this comment

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

LGTM!

@devinvillarosa devinvillarosa merged commit bd19554 into main Dec 4, 2024
9 checks passed
@devinvillarosa devinvillarosa deleted the icon-tree-shaking branch December 4, 2024 19:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
development Tech debt, refactors, CI, tests, and other related work. ui Related to the Prefect web interface
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants