use svg rather than emoji

packages/next/assets/svg/magnifying-glass-svgrepo-com.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path style="fill:#B3F4FF;" d="M328,328c-79.403,0-144-64.596-144-144S248.596,40,328,40s144,64.596,144,144S407.403,328,328,328z
+			"/>
+	</g>
+	<g>
+		<g>
+			<path style="fill:#8B8996;" d="M165.212,359.987c-3.662,0-7.325-1.398-10.12-4.193c-5.591-5.591-5.591-14.656,0-20.24
+				l43.919-43.913c5.591-5.591,14.649-5.591,20.24,0s5.591,14.656,0,20.24l-43.919,43.912
+				C172.537,358.589,168.874,359.987,165.212,359.987z"/>
+		</g>
+	</g>
+	<g>
+		<path style="fill:#B9BBC1;" d="M328,0C226.539,0,144,82.543,144,184s82.539,184,184,184s184-82.543,184-184S429.461,0,328,0z
+			 M328,328c-79.403,0-144-64.596-144-144S248.596,40,328,40s144,64.596,144,144S407.403,328,328,328z"/>
+	</g>
+	<g>
+		<path style="fill:#9F6459;" d="M180.555,331.441C173.18,324.062,163.375,320,152.937,320c-10.438,0-20.242,4.062-27.625,11.441
+			L11.445,445.312C4.062,452.687,0,462.5,0,472.933c0,10.438,4.062,20.246,11.445,27.625C18.82,507.937,28.633,512,39.062,512
+			c10.437,0,20.25-4.062,27.625-11.441l113.867-113.871C187.937,379.312,192,369.5,192,359.066
+			C192,348.629,187.937,338.82,180.555,331.441z"/>
+	</g>
+	<g>
+		<path style="fill:#7E5C62;" d="M180.555,331.441C173.18,324.062,163.375,320,152.937,320c-10.438,0-20.242,4.062-27.625,11.441
+			L11.445,445.312C4.062,452.687,0,462.5,0,472.933c0,10.438,4.062,20.246,11.445,27.625l169.113-169.113
+			C180.558,331.446,180.556,331.443,180.555,331.441z"/>
+	</g>
+	<g>
+		<path style="fill:#FFFFFF;" d="M356,220c-35.29,0-64-28.71-64-64s28.71-64,64-64s64,28.71,64,64S391.29,220,356,220z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

packages/next/components/Layout.tsx

@@ -1,4 +1,5 @@
 import { THEME } from '~/assets/global'
+import MagnifyingGlass from '~/assets/svg/magnifying-glass-svgrepo-com.svg'
 import styles from '~/styles/Layout.module.css'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -21,22 +22,19 @@ const Layout = ({ children }: { children: ReactNode | ReactNode[] }) => {
               </Link>
             </li>
 
-            {(THEME.nav || []).map((n) =>
+            {(THEME.nav || []).map((n) => (
-              n.to ? (
+              <li key={n.name}>
-                <Link href={n.to} key={n.name}>
+                {n.to ? (
-                  <a>{n.name}</a>
+                  <Link href={n.to}>
-                </Link>
+                    <a>{n.name}</a>
-              ) : (
+                  </Link>
-                <a
+                ) : (
-                  href={n.href}
+                  <a href={n.href} target="_blank" rel="noopener noreferrer">
-                  target="_blank"
+                    {n.name}
-                  rel="noopener noreferrer"
+                  </a>
-                  key={n.name}
+                )}
-                >
+              </li>
-                  {n.name}
+            ))}
-                </a>
-              )
-            )}
           </ul>
 
           <form
@@ -55,7 +53,9 @@ const Layout = ({ children }: { children: ReactNode | ReactNode[] }) => {
               value={q}
               onInput={(ev) => setQ((ev.target as HTMLInputElement).value)}
             />
-            <div className={styles.icon}>🔎</div>
+            <div className={styles.icon}>
+              <MagnifyingGlass />
+            </div>
           </form>
         </nav>
       </header>

packages/next/declaration.d.ts

@@ -0,0 +1 @@
+declare module '*.svg'

packages/next/next.config.js

@@ -1,4 +1,6 @@
-module.exports = {
+const withSvgr = require('next-svgr')
+
+module.exports = withSvgr({
   async redirects () {
     return [
       {
@@ -8,4 +10,4 @@ module.exports = {
       }
     ]
   }
-}
+})

packages/next/package.json

@@ -44,6 +44,7 @@
     "eslint-plugin-react": "^7.21.5",
     "fs-extra": "^9.0.1",
     "import-sort-parser-typescript": "^6.0.0",
+    "next-svgr": "^0.0.2",
     "nodejieba": "^2.5.1",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
@@ -57,4 +58,4 @@
       "style": "module"
     }
   }
-}
+}

packages/next/styles/Layout.module.css

@@ -20,4 +20,6 @@
   position: absolute;
   right: 5px;
   top: 5px;
+  width: 1em;
+  height: 1em;
 }