wxt-dev / wxt-dev/wxt

WXT Auto Icons - Variants

Open
#1,544 5 comments 4 reactions 1 assignee View on GitHub

@Timeraa is already working on this.

Since Mar 29, 2025.

Dominant language
TypeScript
Stars
10.5k
Forks
564
PR merge metrics
No merged PRs in 30d

Description

Feature Request

It'd be nice if this module was flexible to allow developers to define multiple icons. The purpose would be for extensions that provide themes and also update the icon on theme change.

What are the alternatives?

No alternatives. I thought to provide a PR myself, but I am unsure how would I test it locally.

Additional context

Looking at the current API and its options, I guess we could extend it like this:

{
  baseIconsPath: '<srcDir>/assets/icons', // plural prop name (directory - no file)
  grayscaleOnDevelopment: false, // I do not see point of this, sorry 👀
}

Then we could add multiple icons with different file names and take the filename as directory name to be generated.

/*
  src/assets/icons/green.png
  src/assets/icons/pink.png
  src/assets/icons/red.png
*/

Which would output:

/*
  public/icons/green/16.png
  public/icons/green/48.png
  public/icons/green/64.png
  ...
  public/icons/pink/16.png
  ...
  public/icons/pink/48.png
  ...
*/

What would also be great if we could provide a single .svg icon and define which colors would we like to be generated as PNGs... SVG would be black, but then we could specify colors as option.

{
  outDir: 'public/icons',
  baseIcon: '<srcDir>/assets/icon.svg',
  namedColor: {
    red: '#ef4444',
    lime: '#84cc16',
    teal: '#14b8a6',
  },
}

Which would output:

/*
  public/icons/red/16.png
  public/icons/red/48.png
  public/icons/red/64.png
  ...
  public/icons/lime/16.png
  ...
  public/icons/teal/48.png
  ...
*/

I do not know? I would definitely have a use for this as I recently implemented accent choice in my extension and I decided to also create a couple of icons with different colors to match those accents.

Contributor guide

Open the contributing guide

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.