refactor: resolve dock icons via a runtime Iconify SVG fetch - #137
Merged
Conversation
The vite and next hub playgrounds each hand-maintained an identical copy of the dock-icon -> UnoCSS class map. Move it into the shared design/design.ts class-helper module (already the one source of truth for devframe -> @antfu/design class chains) and have both examples' icons.ts re-export it, matching the existing local design.ts re-export pattern used by every other plugin/example.
✅ Deploy Preview for devfra ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Port @antfu/design's DisplayIconifyRemoteIcon (utils/iconify.ts's getIconifySvg) instead of a hand-maintained ph:icon -> UnoCSS-class table: design/dock-icon.ts resolves a dock icon id to its sanitized SVG, fetched live from api.iconify.design, so any Iconify id renders with no @iconify-json/* collection to install and no table to keep in sync. The vite hub patches the resolved SVG into the dock button once it settles; the Next hub does the same via a small effect hook.
antfubot
changed the title
Next/Turbopack has no loader for the bare .ts source @antfu/design ships (utils/iconify.ts, now imported by design/dock-icon.ts) and fails the production build with "Unknown module type". Add it to transpilePackages so Next runs the package through its own transform, matching how Vite already handles it.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The vite and next hub playground
icons.tseach hand-maintained an identical copy of a dock-icon -> UnoCSS class map, needing a manual edit for every new icon. Replace it with a framework-neutral port of@antfu/design'sDisplayIconifyRemoteIcon: any Iconifycollection:iconid now resolves to its live, sanitized SVG fetched fromapi.iconify.design, with no@iconify-json/*collection to install and no table to keep in sync.design/dock-icon.ts(new):dockIconSvg()parses the dock's icon id and calls@antfu/design/utils/iconify's owngetIconifySvgfetcher/cache/sanitizer directly — reusing @antfu/design's implementation rather than reimplementing it. Only the id-parsing/light-dark selection is devframe-specific, mirroring the upstream component's own prop parsing.design/design.ts: dropped the staticICON_CLASSmap +iconClass().examples/minimal-vite-devframe-hub:icons.tsre-exportsdockIconSvg;main.tsrenders the fallback initial synchronously, then patches in the resolved SVG once the fetch settles (small session cache to avoid re-fetching on re-render).examples/minimal-next-devframe-hub:icons.tsre-exportsdockIconSvg;page.tsx'sDockIconuses a smalluseDockIconSvgeffect hook to the same effect.package.jsongaindompurify(already an@antfu/designpeer dep, needed transitively byutils/iconify), via the existingfrontendcatalog entry.Created with the help of an agent.