icons of different sizes are automatically generated during the compilation process

[kaze-k]

Describe the problem

When developing extensions, the manifest.json recommends providing different sizes of icons, so that i need to prepare a number of different sizes but the same icons, and when testing extension often confuse extension because the extension icon is the same, the icon under development can be gray to help distinguish

Describe the proposed solution

I recently wanted to migrate my extension from webpack to vite. I have been aware of this plugin for a long time. I need to be able to generate icons of different sizes during compilation. I don't know if anyone else needs this feature.

Alternatives considered

This feature comes from plasmo，This is the implementation code for the feature. It uses sharp to generate icons, and I tested it in webpack in watch mode causing multiple packing. I don't know if there's the same problem in vite. maybe can use jimp

Importance

nice to have

[elvisoliveira]

This vite.config.js works for me, but probably it could be improved

import { readFile, writeFile } from 'fs/promises';
import { defineConfig } from 'vite'
import { crx } from '@crxjs/vite-plugin'
import react from '@vitejs/plugin-react'
import manifest from './manifest.json'

const { version } = require('./package.json')
manifest.version = version

const ICON_SIZES = [16, 24, 32, 48, 64, 96, 128];

const genIcons = () => ({
    name: 'sharp',
    transform: () => {
        readFile('icon.svg').then(icon => {
            ICON_SIZES.map(size => {
                require('sharp')(icon).resize(size).png().toBuffer().then(file => {
                    writeFile(`./dist/assets/icon-${size}.png`, file);
                });
            });
        });
    }
})

export default defineConfig({
    plugins: [
        genIcons(),
        react(),
        crx({ manifest })
    ],
})