Phase 12: Integrate unplugin-icons with Material Design Icons#1059
Merged
Tim020 merged 2 commits intoMay 19, 2026
Conversation
Replaces all inline SVGs and Unicode text-character icon substitutes across the V3 UI with auto-imported MDI components (unplugin-icons + unplugin-vue- components resolver). Removes the bi and ph iconify packages after user chose MDI following a side-by-side preview page comparison. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- StageManagerPane: ▼/▶ expand indicators → IMdiChevronDown/IMdiChevronRight; 📌 pin emoji → IMdiPin - TimelineSidePanel: ⚠ Conflicts heading → IMdiAlert - RevisionGraph: +/-/↺ zoom buttons → IMdiMagnifyPlus/IMdiMagnifyMinus/IMdiRefresh (V2 used b-icon-zoom-in, b-icon-zoom-out, b-icon-arrow-clockwise) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
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
1 participant
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.
Summary
Bootstrap Vue Next deprecated its built-in
<b-icon-*>components with no direct replacement. During Phase 12's live view work, inline SVG blobs were used as a stopgap. This PR installsunplugin-icons(BVN's recommended replacement), wires it into the existingunplugin-vue-componentsauto-import pipeline, and replaces all icon usage across the V3 UI with Material Design Icons components.Icon set selection
Three sets were evaluated side-by-side via a dev-only preview page (Bootstrap Icons, MDI, Phosphor). Material Design Icons was chosen for its comprehensive coverage, clean style, and natural pairing with Bootstrap 5 + BVN.
What changed
Infrastructure (
vite.config.ts,tsconfig.json,package.json)unplugin-iconsplugin withcompiler: 'vue3'IconsResolve()to the existingunplugin-vue-componentsresolvers array — no manual imports needed anywhere@iconify-json/mdifor the MDI icon setunplugin-icons/types/vuetotsconfig.jsontypesIcon replacements across 20 components
Icons were sourced from two origins in the V2 codebase:
▲/▼,×,⇓,+,✓,✗,⚠) used in places where V2 had<b-icon-*>componentscheck-square-fill/✓IMdiCheckboxMarkedx-square-fill/✗IMdiCloseBoxplus-square-fill/+IMdiPlusBoxpencil-fillIMdiPencilchevron-up/▲IMdiChevronUpchevron-down/▼IMdiChevronDown×(×)IMdiClose⇓(⬇)IMdiDownloadcheck-circle/✓IMdiCheckCirclex-circle/✗IMdiCloseCircleexclamation-triangle/⚠IMdiAlertNot replaced: The SVG canvas elements in MicTimeline, CrewTimeline, StageTimeline, and RevisionGraph are dynamic drawing surfaces (
ref="svgRef"with bound dimensions) — not icon library consumers.Test plan
npm run build— no errors; icon components resolve and tree-shake into bundlenpm run typecheck—IMdi*components resolve without errorsnpm run ci-lint— passesnpm run test:run— all Vitest tests pass+button renders in cue-add mode🤖 Generated with Claude Code