Comfy-Org / Comfy-Org/ComfyUI_frontend
ai-models icons in apps/website are not duplicates of the package's — decide which rendition is canonical
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
Carried over from the design-system token work as "five icons the package already ships are duplicated in `apps/website`, but consuming them means adopting the Tailwind icon plugin `base.css` excludes."
The premise is wrong, and the correction changes what the follow-up should be.
`apps/website/public/icons/ai-models/{grok,bytedance,openai,wan,gemini}.svg` and `packages/design-system/src/icons/{grok,bytedance,openai,wan,gemini}.svg` share names but are **different artwork**:
| icon | website | package |
| --- | --- | --- |
| grok | 952 B, 32×32 | 1171 B, 512×512 |
| bytedance | 1406 B, 32×32 | 1416 B, 512×512 |
| openai | 3030 B, 32×32 | 3037 B, 512×512 |
| wan | 1213 B, 32×32 | 2443 B, 512×512 |
| gemini | 1206 B, 32×32 | 6507 B, 512×512 |
`gemini` is the clearest case: the website ships the four-colour Google "G", the package ships a different mark entirely. These are two renditions of the same provider brands, drawn at different sizes for different jobs — the website uses them as `badgeIcon: '/icons/ai-models/gemini.svg'` URLs on model cards (`AIModelsSection.vue`), the app renders `icon-[comfy--*]` mask utilities.
So there is nothing to deduplicate mechanically, and the Tailwind icon plugin is not the blocker. What is actually open:
1. Which rendition is canonical per provider? That is a design call, not a refactor.
2. Should provider logos live in the design system at all? They are third-party marks, not Comfy brand assets — the argument for centralising them is consistency, not drift.
Worth answering before anyone spends time on the plugin adoption the original note assumed was needed.
Contributor guide
Research direction
Compare the five SVGs under apps/website/public/icons/ai-models and packages/design-system/src/icons, then inspect AIModelsSection.vue and the app’s icon-[comfy--*] mask usage. Decide the canonical rendition for each provider and whether third-party logos belong in the design system. Done means the design decision is recorded before plugin-adoption work proceeds.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100