Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Feature: Icon tree-shaking for `@pierre/trees`

Open
  • Is something wrong?
#864 3 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
48/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
typescript
Domain
frontend

Research direction

Start by reading how FileTree calls getBuiltInSpriteSheet(set) and how the built-in icon tiers are referenced. Reproduce the reported esbuild bundle with set: 'none' and a custom spriteSheet, then investigate a bundler-friendly way to keep unused tiers out of the output. Done means the selected icons work and unused built-in symbols no longer appear in the bundle, without an unintended default change.

Written by the indexing model from the issue text.

Description

enhancement
Prerequisites
Proposal

I noticed that the built-in icon sets in @pierre/trees don't seem to be tree-shakeable. Even with set: 'none' and my own spriteSheet, all three still end up in the bundle.

In my case I'd like to use the catppuccin/vscode-icons set, so I passed my own sprite and set: 'none'. But the built-in standard and complete SVGs ship anyway, so I'm bundling two icon sets when only one ever shows up.

From what I can tell, FileTree calls getBuiltInSpriteSheet(set) unconditionally against an object that eagerly references all three tiers. Since set is a runtime value, nothing is ever statically dead, so bundlers just keep all of it.

I measured it with esbuild on a set: 'none' entry and all 53 file-tree-builtin-* symbols end up in the output. Dropping just the sym_* constants shrinks the bundle by about 34.5 KB raw and 12 KB gzipped.

Would it be viable to split the tiers into separate modules and ship the non-minimal ones as importable values?

import { complete } from '@pierre/trees/icons'
new FileTree({ icons: complete })

Unfortunately, that would shift the default from complete to minimal, with the colored set as an explicit opt-in, but I'm not sure how else to achieve this in a bundler-friendly way. Totally open to other ideas if there's a better way, and happy to help with a PR! :)

Dominant language
TypeScript
Stars
6.2k
Forks
226
Avg merge
1d 10h
Merged PRs (30d)
36

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from pierrecomputer/pierre

All issues in pierrecomputer/pierre

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.