feat(preset-umi): support multiple favicon files (#705)

* feat: support favicon list

* feat: optimization code

* Update packages/preset-umi/src/features/favicon/favicon.ts

Co-authored-by: Peach <[email protected]>

* Update packages/core/src/service/service.ts

* Update packages/core/src/service/service.ts

* feat: fix favicons types and add docs

Co-authored-by: chencheng (云谦) <[email protected]>
Co-authored-by: Peach <[email protected]>

Author: 3 people

docs/docs/api/config.md

@@ -315,17 +315,17 @@ export default {
 
 配置额外的 postcss 插件。
 
-## favicon
+## favicons
 
-* 类型：`string`
+* 类型：`string[]`
 * 默认值：`null`
 
-配置 favicon 路径。可以是绝对路径，也可以是基于项目根目录的相对路径。
+支持配置多个 favicon 文件。配置 favicons 路径，可以是绝对路径，也可以是基于项目根目录的相对路径。
 
 比如：
 
 ```js
-favicon: '/assets/favicon.ico'
+favicons: ['/assets/favicon.ico']
 ```
 
 HTML 中会生成 `<link rel="shortcut icon" type="image/x-icon" href="/assets/favicon.ico" />`。

packages/preset-umi/src/commands/dev/getMarkupArgs.ts

@@ -22,16 +22,16 @@ export async function getMarkupArgs(opts: { api: IApi }) {
     key: 'addHTMLStyles',
     initialValue: opts.api.config.styles || [],
   });
-  const favicon = await opts.api.applyPlugins({
+  const favicons = await opts.api.applyPlugins({
     key: 'modifyHTMLFavicon',
-    initialValue: opts.api.config.favicon,
+    initialValue: [].concat(opts.api.config.favicons || []),
   });
   return {
     mountElementId: opts.api.config.mountElementId,
     base:
       opts.api.config.history?.type === 'browser' ? opts.api.config.base : '/',
     routes: opts.api.appData.routes,
-    favicon,
+    favicons,
     headScripts,
     scripts,
     metas,

packages/preset-umi/src/features/favicon/favicon.ts

@@ -13,8 +13,8 @@ const FAVICON_FILES = [
   'favicon.webp',
 ];
 
-function getFaviconFile(p: string): string | undefined {
-  return FAVICON_FILES.find((f) => existsSync(join(p, f)));
+function getFaviconFiles(p: string): string[] | undefined {
+  return FAVICON_FILES.filter((f) => existsSync(join(p, f)));
 }
 
 export default (api: IApi) => {
@@ -26,39 +26,45 @@ export default (api: IApi) => {
 
   api.modifyAppData(async (memo) => {
     if (api.config.favicon) return memo;
-    const faviconFile = getFaviconFile(api.paths.absSrcPath);
-    if (faviconFile) {
-      memo.faviconFile = faviconFile;
+    const faviconFiles = getFaviconFiles(api.paths.absSrcPath);
+    if (faviconFiles) {
+      memo.faviconFiles = faviconFiles;
     }
     return memo;
   });
 
   api.addBeforeMiddlewares(() => [
     (req, res, next) => {
-      if (
-        api.appData.faviconFile &&
-        req.path === `/${api.appData.faviconFile}`
-      ) {
-        res.sendFile(join(api.paths.absSrcPath, api.appData.faviconFile));
-      } else {
+      const iconFile = (api.appData.faviconFiles || []).find(
+        (file: any) => req.path === `/${file}`,
+      );
+      if (!iconFile) {
         next();
+      } else {
+        res.sendFile(join(api.paths.absSrcPath, iconFile));
       }
     },
   ]);
 
   api.onBuildComplete(({ err }) => {
     if (err) return;
-    if (api.appData.faviconFile) {
-      copyFileSync(
-        join(api.paths.absSrcPath, api.appData.faviconFile),
-        join(api.paths.absOutputPath, api.appData.faviconFile),
-      );
+    if (api.appData.faviconFiles) {
+      api.appData.faviconFiles.forEach((e: any) => {
+        copyFileSync(
+          join(api.paths.absSrcPath, e),
+          join(api.paths.absOutputPath, e),
+        );
+      });
     }
   });
 
   api.modifyHTMLFavicon((memo) => {
-    return api.appData.faviconFile
-      ? `${api.config.publicPath}${api.appData.faviconFile}`
-      : memo;
+    // respect favicon config from user, and fallback to auto-detecting files
+    if (!memo.length && api.appData.faviconFiles) {
+      api.appData.faviconFiles.forEach((e: any) => {
+        memo.push(`${api.config.publicPath}${e}`);
+      });
+    }
+    return memo;
   });
 };

packages/preset-umi/src/types.ts

@@ -103,7 +103,7 @@ export type IApi = PluginAPI &
       }): void;
     };
     modifyHTML: IModify<CheerioAPI, { path: string }>;
-    modifyHTMLFavicon: IModify<string, {}>;
+    modifyHTMLFavicon: IModify<string[], {}>;
     modifyRendererPath: IModify<string, {}>;
     modifyRoutes: IModify<Record<string, IRoute>, {}>;
     modifyViteConfig: IModify<

packages/server/src/server.ts

@@ -20,7 +20,7 @@ export interface IOpts {
   links?: Record<string, string>[];
   metas?: Record<string, string>[];
   styles?: (Record<string, string> | string)[];
-  favicon?: string;
+  favicons?: string[];
   title?: string;
   headScripts?: (Record<string, string> | string)[];
   scripts?: (Record<string, string> | string)[];
@@ -84,9 +84,12 @@ export async function getMarkup(
     return `<${opts.tagName} ${attrs} />`;
   }
 
-  const favicon = opts.favicon
-    ? `<link rel="shortcut icon" href="${opts.favicon}">`
-    : '';
+  const favicons: string[] = [];
+  if (Array.isArray(opts.favicons)) {
+    opts.favicons.forEach((e) => {
+      favicons.push(`<link rel="shortcut icon" href="${e}">`);
+    });
+  }
   const title = opts.title ? `<title>${opts.title}</title>` : '';
   const metas = (opts.metas || []).map((meta) =>
     getTagContent({ attrs: meta, tagName: 'meta' }),
@@ -110,7 +113,7 @@ export async function getMarkup(
 />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />`,
     metas.join('\n'),
-    favicon,
+    favicons.join('\n'),
     title,
     links.join('\n'),
     styles.join('\n'),