Repository navigation
fix: let apps register their own icons (BITS-206) - #23
Conversation
…rary (BITS-206) D9Icon now looks the name up in the Font Awesome library when it renders, so icons an app adds with library.add work. The library only gets the five icons D9 components render themselves. Storybook registers its demo icons in its preview, like an app. The unused numeric-input icon is gone. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ookup (BITS-206) GitHub was in D9's old icon list, so the spec passed without the fix. GitLab never was: the spec now fails on main and passes with this branch. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
PhilReinking
left a comment
There was a problem hiding this comment.
OK at dfae967, CI green. One small point inline, fine as a follow-up.
Checked against main in WebKit and Chromium: aliases (times, cog, ellipsis-h) resolve, and a name in both sets picks fab. An icon added after a D9Icon mounted shows only on its next mount. A bare <D9Icon /> renders nothing and warns once. All icon names Input writes are covered by the two lists in the PR text. The gitlab spec fails with main's src/Icon.
| // Custom | ||
| numericInput.definition | ||
| ); | ||
| export default definitions.map(({ iconName }): string => iconName); |
There was a problem hiding this comment.
The Button, Select and Input stories use icons as their icon control options (Button.stories.ts:17, Select.stories.ts:13, Input.stories.ts:19). That list now holds only these 5, not the demo icons the stories default to. Add the demo names, or drop the options as in Icon.stories.ts.
D9Icon now looks icons up in the Font Awesome library when it renders, so icons an app adds with
library.addwork. @deck9/ui registers only the 5 icons its components render.Part of BITS-206 (Input still registers its icons, change below).
Heads-up (release note): apps now register their own icons. Every icon an app names in
D9Iconor aniconprop must be added withlibrary.addin the app's entry point.iconsexport now lists only D9's 5 names,brandsis empty..storybook/preview.tsregisters the 4 demo icons the stories use, like an app does..d.ts.tests/Icon.spec.tsuses GitLab, not GitHub: GitHub was in D9's old list, so the spec passed without this fix. Comment fixed.Tested: D9Button-only app on the packed build: 68.04 → 46.51 kB gzip, 110 → 5 icons. Storybook: D9's icons, demo icons, app-registered icons render. npm test passes, the brand spec fails on main.
Not tested: Input running. Both Input entries build with the change, and every listed name renders.
D9's own icons
check (Select), chevron-down (Select), circle-notch (Button loading, Spinner), ellipsis (Menu, as
ellipsis-h), eye-dropper (Input color picker, aseyedropper).Input change, after the release
Checked in a scratch copy of Input: vue-tsc shows the same 19 errors as without the change, both builds pass,
npm lsshows onefontawesome-svg-core. Public form bundle: 222.20 → 205.56 kB gzip, 110 → 30 icons.@fortawesome/fontawesome-svg-core,@fortawesome/free-solid-svg-iconsand@fortawesome/free-brands-svg-icons(^6.5.1) todependencies, and bump@deck9/ui.resources/js/forms/classic.ts(public form), after theClassicFormimport:resources/js/app.ts(editor and dashboard), after thelodash/debounceimport:icon="…"toname="…"on D9Icon inNavigator.vue:17and:35,FormButton.vue:18and:31,CallToActionButton.vue:15(all informs/classic/layout/). D9Icon has noiconprop. These render today only because D9Icon checks its default nameuserand the stray attribute then wins. WithoutfaUserin the form they show nothing.Names Input writes that are aliases: sort-numeric-up → faArrowUp19, times and close → faXmark, add → faPlus, check-circle → faCircleCheck, check-square → faSquareCheck, cloud-download → faCloudArrowDown, cloud-upload → faCloudArrowUp, cog → faGear, external-link → faArrowUpRightFromSquare, pencil-alt → faPencil, play-circle → faCirclePlay, plus-circle → faCirclePlus, remove-format → faTextSlash.
The rating icon comes from saved form data (
options.icon, fallback star). The editor offers only star, heart, poo, bolt, tree, crown and trophy, so those are registered. Any other saved name no longer renders.🤖 Generated with Claude Code