feat: generate sprite for file view

[alexdln]

Optimization of css bundle (53.6kb vs 150kb)

Moved icons of file-viewer to the generated sprite and included them via svg+use

The sprite is 91kb, but it doesn't load until icons with a link to this sprite start appearing (i.e. we will load it only on code pages)

It's generated by a script based on the same file with icons sets as used in file-viewer (I just changed the names slightly so Uno wouldn't pick it up) on postinstall

Related #1239 (or closes?)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 10, 2026 7:36pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 10, 2026 7:36pm
npmx-lunaria	Ignored		Feb 10, 2026 7:36pm

[codecov]

Codecov Report

❌ Patch coverage is 85.71429% with 2 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Code/DirectoryListing.vue	60.00%	2 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds an SVG sprite-based icon system for the file tree. Vue components (DirectoryListing.vue, FileTree.vue) now render inline SVG references to a generated file-tree-sprite.svg instead of relying on CSS icon classes. The file-icons utility exports previously internal mappings (EXTENSION_ICONS, FILENAME_ICONS, COMPOUND_EXTENSIONS, DEFAULT_ICON) and adds ADDITIONAL_ICONS; icon naming conventions were adjusted. A new script scripts/generate-file-tree-sprite.ts builds the sprite and package.json runs it during postinstall. Tests and expectations were updated to match renamed icon identifiers. No API surface changes.

Possibly related PRs

• test: add tests for file-icons utils #891: Touches the same file-icons module and updates icon mappings and tests, indicating a code-level overlap in icon resolution logic.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description accurately describes the changeset: moving file-viewer icons to a generated SVG sprite for CSS bundle optimization (150kb to 53.6kb), with detailed implementation notes.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

app/components/Code/DirectoryListing.vue (1)

4-4: ⚠️ Potential issue | 🔴 Critical

Missing import for ADDITIONAL_ICONS.

The template references ADDITIONAL_ICONS['folder'] on lines 90 and 117, but only getFileIcon is imported. This will cause a runtime reference error.

🐛 Proposed fix to add missing import

-import { getFileIcon } from '~/utils/file-icons'
+import { ADDITIONAL_ICONS, getFileIcon } from '~/utils/file-icons'

app/components/Code/FileTree.vue (1)

4-4: ⚠️ Potential issue | 🔴 Critical

Missing import for ADDITIONAL_ICONS.

The template references ADDITIONAL_ICONS['folder-open'] and ADDITIONAL_ICONS['folder'] on line 68, but only getFileIcon is imported. This will cause a runtime reference error.

🐛 Proposed fix to add missing import

-import { getFileIcon } from '~/utils/file-icons'
+import { ADDITIONAL_ICONS, getFileIcon } from '~/utils/file-icons'

🧹 Nitpick comments (1)

scripts/generate-file-tree-sprite.ts (1)

75-81: Consider deduplicating icon names to avoid redundant symbols.

Multiple icon mappings may reference the same icon (e.g., different extensions mapping to the same icon). This could result in duplicate <symbol> entries in the sprite. Using a Set would ensure each icon is only included once.

♻️ Proposed improvement to deduplicate icons

   const iconNames = [
     ...Object.values(EXTENSION_ICONS),
     ...Object.values(FILENAME_ICONS),
     ...Object.values(COMPOUND_EXTENSIONS),
     ...Object.values(ADDITIONAL_ICONS),
     DEFAULT_ICON,
   ]
-  const grouped = groupByCollection(iconNames)
+  const uniqueIconNames = [...new Set(iconNames)]
+  const grouped = groupByCollection(uniqueIconNames)