WXT Auto Icons - Variants
@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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.