feat(core, kit): implement icon mode resolution system (#10938) #11311
+395
−64
Conversation
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
FeironoX5
requested review from
MarsiBarsi,
waterplea,
nsbarsukov,
vladimirpotekhin and
mdlufy
and removed request for
a team
Tests are running 🚀Wait for workflow run with tests to finish ☕ |
|
View your CI Pipeline Execution ↗ for commit d0670a9
☁️ Nx Cloud last updated this comment at |
There was a problem hiding this comment.
Pull Request Overview
This PR implements a new, unified icon mode resolution system by introducing dedicated DI tokens for mode and resource resolution, updating core components and directives to consume resolved icon metadata, and extending LESS styles and demo examples to support multiple icon modes.
- Introduce
TUI_ICON_MODE_RESOLVERand individual resource resolvers for SVG, image, image-data, and font icons - Refactor
TuiIcon,TuiIcons, andTuiIconBadgeto useTuiResolvedIcon(class name + resource path) - Update LESS styles and demo code to handle
.tui-svg-icon,.tui-image-icon, and.tui-font-iconmodes
Reviewed Changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| projects/kit/directives/icon-badge/icon-badge.style.less | Add mode-specific badge selectors and styles for SVG, image, and font badges |
| projects/kit/directives/icon-badge/icon-badge.directive.ts | Change badgeSrc to TuiResolvedIcon and bind resource path and badge class |
| projects/demo/src/modules/components/icon/examples/5/index.ts | Switch provider to TUI_ICON_MODE_RESOLVER and adjust imports |
| projects/demo/src/modules/components/icon/examples/2/index.ts | Remove deprecated tuiIconResolverProvider, clear providers |
| projects/demo/src/modules/components/icon/examples/2/index.html | Update icon attributes to use new @image.mask. syntax |
| projects/demo/src/modules/components/icon/examples/10/index.ts | Prefix data URI example with @image.mask. |
| projects/demo/src/modules/components/icon/examples/1/index.less | Add @font-face and --t-font-icon variable for font icon example |
| projects/demo/src/modules/components/icon/examples/1/index.html | Add font/image icon examples; update pipe usage to access .resource.src |
| projects/demo/src/modules/components/button-group/examples/1/index.less | Add @font-face and --t-font-icon for button-group example |
| projects/demo/src/modules/components/button-group/examples/1/index.html | Add badge demo in button-group example |
| projects/core/tokens/index.ts | Export new icon-mode and resource-resolver tokens |
| projects/core/tokens/icon-resource-resolver.ts | Define TUI_ICON_{SVG,IMAGE,DATA,FONT}_RESOURCE_RESOLVER tokens |
| projects/core/tokens/icon-resolver.ts | Update deprecated TUI_ICON_RESOLVER to wrap in url() and adjust prefix logic |
| projects/core/tokens/icon-mode-resolver.ts | Implement TUI_ICON_MODE_RESOLVER mapping modes to className and resource resolver |
| projects/core/styles/components/icons.less | Extend icons directive styles for start/end modes across SVG, image, and font |
| projects/core/styles/components/icon.less | Adjust tui-icon styles to support SVG, image, and font modes |
| projects/core/directives/icons/icons.directive.ts | Refactor to use tuiInjectIconModeResolver, bind new CSS variables and classes |
| projects/core/components/icon/icon.pipe.ts | Change TuiIconPipe to return TuiResolvedIcon via tuiInjectIconModeResolver |
| projects/core/components/icon/icon.component.ts | Refactor TuiIcon to use computed props for path and class based on resolved icon |
BundleMonFiles updated (1)
Unchanged files (4)
Total files change +750B +0.11% Groups updated (1)
Final result: ✅ View report in BundleMon website ➡️ |
waterplea
reviewed
Jul 31, 2025
There was a problem hiding this comment.
- This is a lot more complicated than it should be.
- Let'd do [data-icon-start/end="icon/img/font"] instead of classes.
- I don't think we need the icon mode resolver, I think it's ok to hardcode
@font./@img./@icon.prefixes. We will just use last one as a default to maintain backwards compatibility with@tui.or any custom icons people might have. - I don't want to complicate the resolver, I think in case of
@font.we can just put whatever's after it to --t-icon-xxx CSS variable as is, no need to resolve it, and in all other cases just proceed to pass the string to the resolver as we do now. --t-font-iconshould be--tui-font-icon, our public CSS vars start with--tui-and private start with--t-
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Refs #10938
@font/@image(.data/.mask)/@icon) and icon resource resolvers:TUI_ICON_SVG_RESOURCE_RESOLVER,TUI_ICON_IMAGE_RESOURCE_RESOLVER,TUI_ICON_FONT_RESOURCE_RESOLVERNext steps: