fix: Add decorative svg search icon

Author: ktquez

src/.vuepress/theme/components/TheHeader.vue

@@ -30,7 +30,11 @@
         class="flex items-center flex-grow-0 w-3/5 h-16 md:pl-4 lg:pl-0 md:pr-0 md:w-auto md:flex-grow"
         :class="{ 'w-4/5': !hasSidebar }"
       >
-        <form class="w-full lg:pl-10">
+        <form class="relative w-full lg:pl-10">
+          <vp-icon
+            name="search"
+            class="absolute z-20 ml-3 pin-c-y"
+          />
           <SearchBox
             role="search"
             class="w-full"

src/.vuepress/theme/styles/_override.scss

@@ -5,11 +5,13 @@
 div.search-box {
   input {
     @apply w-full py-5 pl-10 rounded-md;
+    background: none;
     background-color: var(--bg-input);
     border-color: var(--border-color);
+    color: var(--color);
+    font-size: 16px;
     left: 0;
-    background-image: url('~@/theme/assets/sprite/svg/search.svg');
-    background-position: 16px center;
+    z-index: 10;
 
     &:focus {
       outline: auto;