konnosDashboard
pages-router.tsx92 lines · main
1'use client'
2
3import Head from 'next/head'
4import { useRouter } from 'next/router'
5
6export const DEFAULT_FAVICON_THEME_COLOR = '1E1E1E'
7export const DEFAULT_FAVICON_ROUTE = '/favicon'
8
9const MetaFaviconsPagesRouter = ({
10 applicationName,
11 route = DEFAULT_FAVICON_ROUTE,
12 themeColor = DEFAULT_FAVICON_THEME_COLOR,
13 includeRssXmlFeed = false,
14 includeManifest = false,
15 includeMsApplicationConfig = false,
16}: {
17 applicationName: string
18 // alternative route to use for the favicons
19 route?: string
20 // theme color for the browser
21 themeColor?: string
22 // include RSS feed
23 includeRssXmlFeed?: boolean
24 // include manifest.json
25 includeManifest?: boolean
26 // include browserconfig.xml
27 includeMsApplicationConfig?: boolean
28}) => {
29 const { basePath } = useRouter()
30
31 return (
32 <Head>
33 {/* prettier-ignore */}
34 <link rel="apple-touch-icon-precomposed" sizes="57x57" href={`${basePath}${route}/apple-icon-57x57.png`}/>
35 {/* prettier-ignore */}
36 <link rel="apple-touch-icon-precomposed" sizes="60x60" href={`${basePath}${route}/apple-icon-60x60.png`}/>
37 {/* prettier-ignore */}
38 <link rel="apple-touch-icon-precomposed" sizes="72x72" href={`${basePath}${route}/apple-icon-72x72.png`}/>
39 {/* prettier-ignore */}
40 <link rel="apple-touch-icon-precomposed" sizes="76x76" href={`${basePath}${route}/apple-icon-76x76.png`}/>
41 {/* prettier-ignore */}
42 <link rel="apple-touch-icon-precomposed" sizes="114x114" href={`${basePath}${route}/apple-icon-114x114.png`}/>
43 {/* prettier-ignore */}
44 <link rel="apple-touch-icon-precomposed" sizes="120x120" href={`${basePath}${route}/apple-icon-120x120.png`}/>
45 {/* prettier-ignore */}
46 <link rel="apple-touch-icon-precomposed" sizes="144x144" href={`${basePath}${route}/apple-icon-144x144.png`}/>
47 {/* prettier-ignore */}
48 <link rel="apple-touch-icon-precomposed" sizes="152x152" href={`${basePath}${route}/apple-icon-152x152.png`}/>
49 {/* prettier-ignore */}
50 <link rel="icon" type="image/png" href={`${basePath}${route}/favicon-16x16.png`} sizes="16x16"/>
51 {/* prettier-ignore */}
52 <link rel="icon" type="image/png" href={`${basePath}${route}/favicon-32x32.png`} sizes="32x32"/>
53 {/* prettier-ignore */}
54 <link rel="icon" type="image/png" href={`${basePath}${route}/favicon-48x48.png`} sizes="48x48"/>
55 {/* prettier-ignore */}
56 <link rel="icon" type="image/png" href={`${basePath}${route}/favicon-96x96.png`} sizes="96x96"/>
57 {/* prettier-ignore */}
58 <link rel="icon" type="image/png" href={`${basePath}${route}/favicon-128.png`} sizes="128x128"/>
59 {/* prettier-ignore */}
60 <link rel="icon" type="image/png" href={`${basePath}${route}/favicon-180x180.png`} sizes="180x180"/>
61 {/* prettier-ignore */}
62 <link rel="icon" type="image/png" href={`${basePath}${route}/favicon-196x196.png`} sizes="196x196"/>
63 {/* prettier-ignore */}
64 <meta name="application-name" content={applicationName ?? '&nbsp;'} />
65 {/* prettier-ignore */}
66 <meta name="msapplication-TileColor" content={`#${themeColor}`} />
67 {/* prettier-ignore */}
68 <meta name="msapplication-TileImage" content={`${basePath}${route}/mstile-144x144.png`} />
69 {/* prettier-ignore */}
70 <meta name="msapplication-square70x70logo" content={`${basePath}${route}/mstile-70x70.png`} />
71 {/* prettier-ignore */}
72 <meta name="msapplication-square150x150logo" content={`${basePath}${route}/mstile-150x150.png`} />
73 {/* prettier-ignore */}
74 <meta name="msapplication-wide310x150logo" content={`${basePath}${route}/mstile-310x150.png`} />
75 {/* prettier-ignore */}
76 <meta name="msapplication-square310x310logo" content={`${basePath}${route}/mstile-310x310.png`} />
77 <meta name="theme-color" content={`#${themeColor}`} />
78 <link rel="shortcut icon" href={`${basePath}${route}/favicon.ico`} />
79 <link rel="icon" type="image/x-icon" href={`${basePath}${route}/favicon.ico`} />
80 <link rel="apple-touch-icon" href={`${basePath}${route}/favicon.ico`} />
81 {includeRssXmlFeed && (
82 <link rel="alternate" type="application/rss+xml" href={`${basePath}/feed.xml`} />
83 )}
84 {includeManifest && <link rel="manifest" href={`${basePath}${route}/manifest.json`} />}
85 {includeMsApplicationConfig && (
86 <meta name="msapplication-config" content={`${basePath}${route}/browserconfig.xml`} />
87 )}
88 </Head>
89 )
90}
91
92export default MetaFaviconsPagesRouter