vite-plugin-singlefile icon indicating copy to clipboard operation
vite-plugin-singlefile copied to clipboard

Inlining a favicon outside of /public folder doesn't work

Open alexandernst opened this issue 10 months ago • 2 comments

I'm aware of the limitation which prevents this plugin from inlining assets from the public folder, however I have the following HTML:

<!doctype html>
<html lang="en">
  <head>
    <link rel="icon" type="image/png" href="/src/assets/favicon.png">
  </head>
  <body>
    <header>
        <img src="/src/assets/logo.png" />
    </header>
    <main> (...js and css...)</main>
  </body>
</html>

This is how the structure of my project looks like:

src
├── assets
│   ├── favicon.png
│   ├── logo.png
└── vite.config.js
└── index.html

And my vite.config.js

export default defineConfig({
  plugins: [viteSingleFile()],
  build: {
    assetsInlineLimit: 999999,
  }
})

In theory, both assets (the favicon and the logo) should be inlined as they both are located outside of the public folder and they both meet the file size limit criteria. However, when I build the project I get this:

vite v5.2.8 building for production...
✓ 15 modules transformed.
rendering chunks (1)...

Inlining: index-phi6qHca.js
Inlining: style-DfwcZBBi.css
NOTE: asset not inlined: favicon-Ch38otTT.png
dist-single-file/favicon-Ch38otTT.png    0.83 kB
dist-single-file/index.html            542.08 kB │ gzip: 202.44 kB
✓ built in 764ms

And if I look inside the generated .html file, indeed the favicon isn't inlined, but the logo is.

Is this a limitation of this plugins or am I hitting a bug?

alexandernst avatar Apr 10 '24 10:04 alexandernst

It's not a bug, but the README may have some info that is specific to VueJS, which is the only framework I use with it personally.

With Vue, assets in the "public" folder are never bundled, so this plugin can't inline them.

If you're using another framework that doesn't have a public folder or applies different rules to what is or isn't bundled, those rules would still apply here as well.

richardtallent avatar Apr 10 '24 12:04 richardtallent

I'm not using any framework, this is plain html + js. What strikes me is that both the favicon and the logo are located inside the assets folder, but only the second is inlined.

alexandernst avatar Apr 10 '24 14:04 alexandernst

Closing, this appear to be out of scope for this plugin, and should be addressed by rollup or by using a Data URL

richardtallent avatar Jun 20 '24 04:06 richardtallent

Note that this can actually be done with this plugin once https://github.com/richardtallent/vite-plugin-singlefile/issues/95 is implemented

alexandernst avatar Jun 20 '24 08:06 alexandernst