feat(Illustration): render with Icon component #2917
Merged
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
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the Illustration component to render using the Icon component instead of directly loading SVG images. The change improves type safety by using IconData and addresses rendering issues with sprite elements.
Key changes:
- Migrated from img-based rendering to Icon component rendering
- Changed width prop from string to number type for consistency
- Added proper TypeScript typing with IconData
Reviewed Changes
Copilot reviewed 8 out of 14 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/Illustration/Illustration.tsx | Complete refactor to use Icon component with IconData typing and async loading |
| src/components/Illustration/Illustration.scss | New CSS styles for Icon-based rendering with responsive sizing |
| config-overrides.js | Added illustrations directory to webpack SVG processing |
| src/containers/Tenants/Tenants.tsx | Updated width prop from string "200" to number 200 |
| src/containers/Tenant/Healthcheck/Healthcheck.tsx | Updated width prop from string "200" to number 200 |
| src/containers/Tenant/Diagnostics/Network/Network.tsx | Updated width prop from string "200" to number 200 |
| src/containers/Nodes/NodesTable.tsx | Updated width prop from string "200" to number 200 |
| src/components/EmptyFilter/EmptyFilter.tsx | Added explicit width={200} to default image prop |
artemmufazalov
force-pushed
the
fix-illustration
branch
from
7f63ce9 to
f19b7da
Compare
artemmufazalov
commented
Sep 23, 2025
| &__icon { | ||
| width: 100%; | ||
| height: 100%; | ||
| } |
There was a problem hiding this comment.
Without these properties and explicitly set width and height, gravity-ui icons can use viewbox sizes. We need to be able to set only width or to use parent component sizes, so percentage sizes are needed here
https://github.com/gravity-ui/uikit/blob/main/src/components/Icon/Icon.tsx#L84
artemmufazalov
requested review from
Raubzeug,
adameat and
astandrik
as code owners
Raubzeug
approved these changes
Sep 24, 2025
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.
Closes #2239
Stand (AccessDenied should be displayed): https://nda.ya.ru/t/Ln81amqO7KK7a8
The goal is to fix icons rendering when embedded ui is used as a package
@svgr/webpackIconinstead ofimgheightandwidthin icons toviewboxCI Results
Test Status:⚠️ FLAKY
📊 Full Report
Test Changes Summary ⏭️2
⏭️ Skipped Tests (2)
Bundle Size: 🔽
Current: 85.36 MB | Main: 85.40 MB
Diff: 0.04 MB (-0.04%)
✅ Bundle size decreased.
ℹ️ CI Information