jantimon / favicons-webpack-plugin

Let webpack generate all your favicons and icons for you
MIT License
1.2k stars 211 forks source link

how to integrate this with SSR ? #361

Open sibelius opened 2 months ago

sibelius commented 2 months ago

Is your feature request related to a problem? Please describe. How to let favicons-webpack-plugin generates all the favicons, but be able to get this info to render on SSR ?

Describe the solution you'd like use webpack-manifest-plugin or assets-webpack-plugin to get the asset, chunks information

Describe alternatives you've considered expose a function on this favicons-webpack-plugin to generate the proper tags

Additional context

this is how I'm generating my hmtl

export const indexHtml = ({
  assets,
  html,
  initialProps,
  styledComponentStyleTags,
  muiStyleTags,
}: IndexHtml) => {
  const helmet = Helmet.renderStatic();

  return `
    <!doctype html>
      <html lang="">
      <head>
          <meta charset="utf-8" />
          ${helmet.title.toString()}
          <meta name="viewport" content="width=device-width, initial-scale=1">
          ${helmet.meta.toString()}
          ${helmet.link.toString()}
          ${styledComponentStyleTags}
          ${muiStyleTags ? `<style id='jss-ssr'>${muiStyleTags}</style>` : ''}
          ${
            assets.main.css
              ? `<link rel="stylesheet" href="${assets.main.css}">`
              : ''
          }
          ${
            process.env.NODE_ENV === 'production'
              ? `<script src="${assets.main.js}" defer></script>`
              : `<script src="${assets.main.js}" defer crossorigin></script>`
          }
          <style>
            html, body {
              font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
              background-color: #f8f8f8;
            }
        </style>
      </head>
      <body ${helmet.bodyAttributes.toString()}>
        <div id="root">${html}</div>
        <script>
          window.__initialProps__ = ${serialize(initialProps, {
            isJSON: true,
          })};
        </script>
      </body>
    </html>
  `;
};