Skip to content

fix: inline window control icons to drop @tabler/icons-react barrel import - #40

Merged
gfazioli merged 3 commits into
masterfrom
fix/tabler-barrel-import
Jul 3, 2026
Merged

fix: inline window control icons to drop @tabler/icons-react barrel import#40
gfazioli merged 3 commits into
masterfrom
fix/tabler-barrel-import

Conversation

@gfazioli

@gfazioli gfazioli commented Jul 3, 2026

Copy link
Copy Markdown
Owner

Problem

Issue #39: consumers building @gfazioli/mantine-window in a Vite SSR project (Rolldown optimizer) get a LARGE_BARREL_MODULES warning during dependency optimization, because the package imported IconMinus/IconPlus/IconX from the @tabler/icons-react barrel (6149 re-exports). Since @tabler/icons-react was an external peer dependency, the published dist preserved the barrel import.

Scope note: this is a dev/SSR dependency-optimization warning, not a runtime or production-build error. @tabler/icons-react ships sideEffects: false, so production bundles were already tree-shaken down to the 3 icons, and the barrel itself belongs to Tabler rather than to this package. Even so, the package can avoid contributing to the warning altogether.

Fix

  • Add package/src/ControlIcons.tsx with three inline SVG icons (IconX, IconPlus, IconMinus) — geometry and stroke attributes copied 1:1 from @tabler/icons-react v3.44.0 outline icons.
  • Window.tsx now imports the control icons from ./ControlIcons instead of the Tabler barrel.
  • Remove @tabler/icons-react from peerDependencies — consumers no longer need to install it for this component.

The @rolldown/plugin-transform-imports approach suggested in the issue was not applicable: this package builds with Rollup, not Rolldown. Inlining the three trivial control icons is the same approach Mantine core itself uses (CloseButton renders an inline SVG), removes a peer dependency, and eliminates the warning at the source.

Verification

  • dist no longer contains any real @tabler/icons-react import/require.
  • SSR markup comparison (renderToStaticMarkup): the SVG emitted by each inline icon is byte-for-byte identical to Tabler's (modulo the unused tabler-icon className — no stylesheet targets it).
  • yarn test green: format + typecheck (package + docs) + lint + jest 154/154.
  • Visual check on the docs dev server: window controls render unchanged.

Closes #39

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features

    • Window controls now use built-in icons, reducing reliance on an external icon source.
  • Bug Fixes

    • Improved consistency of the window header controls across the app.
  • Chores

    • Updated package dependencies to remove an unneeded icon dependency.

…mport (#39)

Replace the barrel import of IconMinus/IconPlus/IconX from
@tabler/icons-react with three inline SVG replicas in ControlIcons.tsx,
matching Tabler's outline geometry and stroke attributes 1:1 (verified
via SSR markup comparison). Also drops @tabler/icons-react from
peerDependencies.

This stops mantine-window from triggering the Rolldown/Vite
LARGE_BARREL_MODULES optimizer warning and removes a peer dependency
consumers previously had to install.
@coderabbitai

coderabbitai Bot commented Jul 3, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@gfazioli, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 54 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: f0fe16ad-ec7b-44d2-886d-467a161d4188

📥 Commits

Reviewing files that changed from the base of the PR and between 06107ea and 0af594b.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (1)
  • package/src/ControlIcons.tsx
📝 Walkthrough

Walkthrough

This PR introduces a new ControlIcons.tsx module with inline SVG implementations of IconX, IconPlus, and IconMinus, replacing @tabler/icons-react imports in Window.tsx, and removes @tabler/icons-react from package.json peerDependencies.

Changes

Replace tabler icon imports with local ControlIcons

Layer / File(s) Summary
Local icon components
package/src/ControlIcons.tsx
Adds a shared ControlIcon SVG wrapper with configurable size and exports IconX, IconPlus, IconMinus as inline replacements for tabler icons.
Wiring and dependency removal
package/src/Window.tsx, package/package.json
Window.tsx imports icons from local ./ControlIcons instead of @tabler/icons-react; package.json removes the @tabler/icons-react peerDependency entry.

Estimated code review effort: 2 (Simple) | ~10 minutes

Related issues: #39 (Avoid barrel imports from @tabler/icons-react to improve Rolldown/Vite optimization)

Suggested labels: dependencies, enhancement

Suggested reviewers: gfazioli

🥕📦, no more barrel to tow,

Three tiny icons now locally grow,

X, plus, and minus, drawn with care,

Lighter bundles floating through the air.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main change: inlining window control icons to remove the Tabler barrel import.
Linked Issues check ✅ Passed The PR addresses #39 by replacing @tabler/icons-react barrel imports with local icons, eliminating the optimizer-triggering dependency path.
Out of Scope Changes check ✅ Passed The changes stay focused on the icon-import fix and related dependency cleanup, with no clear unrelated additions.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/tabler-barrel-import

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
package/src/ControlIcons.tsx (1)

36-62: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Consider marking decorative icons as aria-hidden.

These SVGs are purely decorative controls inside buttons; adding aria-hidden="true" on the <svg> wrapper would avoid redundant announcements by screen readers if the parent button lacks its own accessible name context.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@package/src/ControlIcons.tsx` around lines 36 - 62, The ControlIcons SVGs are
decorative and should be hidden from assistive tech to avoid redundant
announcements. Update the shared ControlIcon wrapper used by IconX, IconPlus,
and IconMinus to set aria-hidden="true" on the rendered svg, so these icons stay
presentational inside the button controls.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@package/src/ControlIcons.tsx`:
- Around line 36-62: The ControlIcons SVGs are decorative and should be hidden
from assistive tech to avoid redundant announcements. Update the shared
ControlIcon wrapper used by IconX, IconPlus, and IconMinus to set
aria-hidden="true" on the rendered svg, so these icons stay presentational
inside the button controls.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 1265f725-3a7c-4948-ba9d-dd8af7b6c2bd

📥 Commits

Reviewing files that changed from the base of the PR and between 3822b1c and 06107ea.

📒 Files selected for processing (3)
  • package/package.json
  • package/src/ControlIcons.tsx
  • package/src/Window.tsx
💤 Files with no reviewable changes (1)
  • package/package.json

Addresses CodeRabbit review nitpick on PR #40: the control icons are
always rendered inside an ActionIcon that carries its own aria-label
(Close/Collapse/Expand window), so marking the SVGs aria-hidden avoids
redundant screen-reader announcements. No visual change.
@gfazioli

gfazioli commented Jul 3, 2026

Copy link
Copy Markdown
Owner Author

@coderabbitai addressed the aria-hidden nitpick in 0af594b — the shared ControlIcon wrapper now sets aria-hidden="true" on the SVG, since the icons always render inside an ActionIcon that already carries its own aria-label (Close/Collapse/Expand window). No visual change.

@coderabbitai

coderabbitai Bot commented Jul 3, 2026

Copy link
Copy Markdown

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
git log --oneline -5
git show 0af594b -- package/src/ControlIcons.tsx | head -100

Length of output: 1493


@gfazioli Confirmed — commit 0af594b adds aria-hidden="true" to the shared ControlIcon SVG wrapper, which correctly addresses the nitpick since the icons are always wrapped by an ActionIcon with its own aria-label. Thanks for the fix!

[resolve]

ᕦ(ò_óˇ)ᕤ

@gfazioli
gfazioli merged commit 912b210 into master Jul 3, 2026
2 checks passed
@gfazioli
gfazioli deleted the fix/tabler-barrel-import branch July 3, 2026 06:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Avoid barrel imports from @tabler/icons-react to improve Rolldown/Vite optimization

1 participant