[auto-icons] Allow any image than .png

[ultimateshadsform]

Feature Request

Would be nice to allow any .jpeg, .bmp etc.

So I don't have to have duplicate images in different formats.

I think sharp has a toFormat function that can output .png no matter what input is used.

And add some input file option or a glob for icon path search.

[aklinker1]

JPEG's can't have transparent pixels, so if you use one you're probably breaking Chrome's guidelines if you use one: https://developer.chrome.com/docs/webstore/images#icon-size

I think sharp has a toFormat function that can output .png no matter what input is used.

Doesn't sharp(path).png() already do this? Did you try setting a custom baseIconPath?

And add some input file option or a glob for icon path search.

WXT already automatically discovers icons without the auto-icons module. Why add support for this in auto-icons? What's your use-case?

[ultimateshadsform]

I mean if I have a base icon of .jpg. or any other. Then convert it to .png using the toFile or toFormat function:

sharp(input)
  .toFile('output.png', (err, info) => { ... });

[ultimateshadsform]

Your code

 baseIconPath: resolve(wxt.config.srcDir, 'assets/icon.png'),

only scans for .png files and not .jpg or .bmp.

What I mean is if there IS any .bmp or jpg or .jpeg you CONVERT them into a .png using the .toFormat function so I can keep using .jpg inside my app without having 2 files 1 for icon and 1 for using in the extension.

I would suggest having a name like icon.* * is the extension can be any .jpg, .bmp, jpeg, jpg etc. then you use the .toFormat function to convert them into a VALID .png file. For only use with icons.

[aklinker1]

I would suggest having a name like icon.* to support any .jpg, .bmp, jpeg, jpg etc. then you use the .toFormat function to convert them into a VALID .png file. For only use with icons.

OK, so you just want to add glob support to baseIconPath. Sure, I'm on board with that. You wanna open a PR?

[ultimateshadsform]

Yeah sure I can do it!

I wanna add support for JPEG (.jpg, .jpeg, .jpe, .jfif)
PNG (.png)
GIF (.gif)
TIFF (.tiff, .tif)
BMP (.bmp)
HEIF (.heif, .heic)
AVIF (.avif)
WebP (.webp) etc.

But really in the end you convert them into a .png.

I'll make a pr. 👍

[ultimateshadsform]

It's true that transparency will not work if trying to use with .jpg etc. Then you will have to use a .png from the start. But this is just for images that do not use transparency because that doesn't make sense to use jpg if you need transparency etc..

[aklinker1]

It's true that transparency will not work if trying to use with .jpg etc. Then you will have to use a .png from the start. But this is just for images that do not use transparency because that doesn't make sense to use jpg if you need transparency etc..

Yeah, but that goes against chrome's guidelines for normalizing extension icons:

There's nothing preventing you from doing it, but it will look bad in the end.

But I'm fine with using assets/icon.* and supporting JPEG. As long as PNG and other formats that support transparency are prioritized over it when there are multiple matches, that's fine.

[ultimateshadsform]

True. But yeah it's nice with options.

[breadgrocery]

It can be configured in wxt.config.ts, since it provides AutoIconsOptions.
But to get typing hints, you need to include the side-effect import "@wxt-dev/auto-icons".

import "@wxt-dev/auto-icons";
import { defineConfig } from "wxt";

// See https://wxt.dev/api/config.html
export default defineConfig({
  modules: ["@wxt-dev/auto-icons"],
  autoIcons: {}
});

My solution is overwirte the module as a new module module-auto-icons.ts under modules directory.
Do whatever you want. For example, I have a svg file.

import module from "@wxt-dev/auto-icons";
import { resolve } from "node:path";
import { defineWxtModule } from "wxt/modules";

export default defineWxtModule({
  ...module,
  setup: (wxt, options) => {
    module.setup?.(wxt, {
      baseIconPath: resolve(wxt.config.publicDir, "images/icon.svg"),
      grayscaleOnDevelopment: false,
      sizes: [256, 128, 96, 48, 32, 16],
      ...options
    });
  }
});

[aklinker1]

@breadgrocery as long as you extend .wxt/tsconfig.json in your projects tsconfig, WXT automatically adds type references like that so you shouldn't have to manually add that import.

[breadgrocery]

@breadgrocery as long as you extend .wxt/tsconfig.json in your projects tsconfig, WXT automatically adds type references like that so you shouldn't have to manually add that import.

No, it didn't. I even explicitly specify in the types in tsconfig.json and still don't get the typings prompt.
Only "@wxt-dev/auto-icons" doesn't work, all others work great. I don't know what happened.

"types": ["naive-ui/volar", "unplugin-icons/types/vue", "@types/chrome", "@wxt-dev/auto-icons"]

It do generate the following content in wxt.d.ts, but no typings is shown.Other typings like i18n and globals work fine.

/// <reference types="@wxt-dev/auto-icons" />

It works when using side-effect import.

[aklinker1]

Hmm, interesting, works for me. Was using it earlier today 🤔. If you've got a reproduction I'd appreciate you opening a separate issue.

[breadgrocery]

Hmm, interesting, works for me. Was using it earlier today 🤔. If you've got a reproduction I'd appreciate you opening a separate issue.

My srcRoot is src instead of workspace root. And it works when srcRoot is workspace root.
This is my tsconfig.json.

{
  "extends": "./src/.wxt/tsconfig.json",
  "compilerOptions": {
    "types": ["naive-ui/volar", "unplugin-icons/types/vue", "@types/chrome"]
  }
}

And I find out that I must configure files to get it work. I'm not very familiar with TypeScript, lol.

{
  "extends": "./src/.wxt/tsconfig.json",
  "files": ["./wxt.config.ts"]
  "compilerOptions": {
    "types": ["naive-ui/volar", "unplugin-icons/types/vue", "@types/chrome"]
  }
}