Can't specify the output for all generated assets?

[vdegenne]

Thanks for this plugin, I like it.
Recently I've changed the way I build my assets,
Previously my logo.svg was in public where I used pwa-assets-generator to generate the assets from. It worked well but I want to be able able to inline my logo.svg in my app, because it's in the public directory Vite refuses to inline it.
So what I did was to move the logo to src/assets/img/ where I have my other assets that I can import in my app with the ?inline helper (I'd rather inline the svg that is small than create an unnecessary http request.)
Unfortunately I can't find any option in defineConfig that would let me output the generated assets in another location so all assets are generated under src/assets/img which is not great because they won't be made public.
Why isn't there an option to specify the output location?
One work-around I can think of is to simply copy the svg to the public directly:

import {defineConfig, minimal2023Preset as preset} from '@vite-pwa/assets-generator/config';
import {copyFile} from 'node:fs/promises';

/* code for copying logo from assets to public */

export default defineConfig({
  preset,
  images: ['public/logo.svg']
})

But I don't know it feels hacky..

[userquin]

It is hacky but you can use relative paths: check #15 (comment) and the final comment in previous issue:

    assetName: (type: AssetType, size: ResolvedAssetSize) => {
      return `icons/favicons/${defaultAssetName(type, size)}`;
    },

[vdegenne]

First of All, Thanks for your help <(￣︶￣)>
After small investigation it looks like it is advised to use <link rel="icon" href="/logo.svg" type="image/svg+xml"> inside the html which means my logo should be available from the public directory.
So I ended up moving my logo back there and my pwa-assets.config.js file can stay unchanged.
Now in my source code I use /logo.svg?raw, Vite can't inline public resources but this instruction seems to be accepted and the content of the svg is directly injected in places.
It's probably still a bit of a hack but it looks like an easier solution ┬──┬◡ﾉ(° -°ﾉ)

[vdegenne]

By the way just as a side note, I think the generator is a bit out of date, here's what headers it recommended:
The Vite PWA plugin recommends a 48x48 favicon and a sizes="any" svg icon (https://vite-pwa-org.netlify.app/assets-generator/#preset-minimal-2023)

But here's the output of the generator:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/logo.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">

I think the output should be:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/logo.svg" sizes="any" type="image/svg+xml">

Isn't that right?

[userquin]

Isn't that right?

Yes. Icons generation and markup not related: icons will be generated using the preset and the markup using headLinkOptions option.

To generate proper html markup, you need to add custom config file, I'm going to add headLinkOptions option to the CLI options:
https://vite-pwa-org.netlify.app/assets-generator/cli.html#configurations

headLinkOptions: {
    preset: '2023'
  },

[vdegenne]

Ah perfect thanks!
(Yes I think it should automatically switch this flag in the background)

[vdegenne]

It would make more sense to give the possibility of choosing a preset from the preset field directly, e.g.

import {defineConfig} from '@vite-pwa/assets-generator';

defineConfig({
  preset: 'minimal2023',
  ...
})

So this value can easily be used in cli module to switch favicon preset as well.

[userquin]

@vdegenne released v0.2.3 with new CLI options for html head preset, CLI options in the docs also updated:

You can use from command line this way:

pwa-assets-generator --preset minimal-2023 --html.preset 2023 public/favicon.svg

[vdegenne]

@userquin Excellent! I can finally remove my config file and rely on this only command,
Thanks for your work ✼　 ҉　 ҉　 ҉　 ҉　 ҉　 ҉　✼