Fix responsive layout and header icons

pages/index.vue

@@ -7,9 +7,21 @@
         </button>
         <h1 class="text-lg font-extrabold">최근 이용 내역</h1>
         <div class="flex items-center gap-1">
-          <button type="button" class="flex h-9 w-9 items-center justify-center rounded-md text-2xl leading-none active:bg-paper" aria-label="검색" @click="searchOpen = !searchOpen">⌕</button>
-          <button type="button" class="relative flex h-9 w-9 items-center justify-center rounded-md text-xl leading-none active:bg-paper" aria-label="필터" @click="filterSheetOpen = true">
-            ☷
+          <button
+            type="button"
+            class="flex h-9 w-9 items-center justify-center rounded-md text-ink active:bg-paper"
+            aria-label="검색"
+            @click="searchOpen = !searchOpen"
+          >
+            <span class="nav-icon h-6 w-6" v-html="searchIcon" />
+          </button>
+          <button
+            type="button"
+            class="relative flex h-9 w-9 items-center justify-center rounded-md text-ink active:bg-paper"
+            aria-label="필터"
+            @click="filterSheetOpen = true"
+          >
+            <span class="nav-icon h-6 w-6" v-html="tuneIcon" />
             <span v-if="activeFilterCount" class="absolute right-1 top-1 h-2 w-2 rounded-full bg-red-500" />
           </button>
         </div>
@@ -176,8 +188,16 @@
 <script setup lang="ts">
 import { addDays, addMonths, format, parse, startOfWeek } from 'date-fns'
 import type { WeekStartsOn } from 'date-fns'
+import searchIconRaw from '~/assets/icons/search.svg?raw'
+import tuneIconRaw from '~/assets/icons/tune.svg?raw'
 import type { Transaction } from '~/composables/useMoney'
 
+const inlineIcon = (icon: string) => icon
+  .replace(/fill="[^"]*"/g, 'fill="currentColor"')
+  .replace(/height="[^"]*"/, 'height="100%"')
+  .replace(/width="[^"]*"/, 'width="100%"')
+const searchIcon = inlineIcon(searchIconRaw)
+const tuneIcon = inlineIcon(tuneIconRaw)
 const selectedDate = ref(formatDateOnly())
 const weekSwipeStartX = ref(0)
 const weekDirection = ref<'next' | 'prev'>('next')