docs: icon page support icon name search (#16647)

docs/.vitepress/vitepress/components/globals/icons.vue

@@ -16,6 +16,7 @@ type CategoriesItem = {
 const lang = useLang()
 const locale = computed(() => localeData[lang.value])
 const copyIcon = ref(true)
+const query = ref('')
 
 const copyContent = async (content) => {
   try {
@@ -66,6 +67,17 @@ IconCategories.categories.forEach((o) => {
 })
 
 categories.value.push({ name: 'Other', icons: Array.from(iconMap.values()) })
+
+const filterCategories = computed(() => {
+  return categories.value
+    .map((category) => {
+      const icons = category.icons.filter((icon) => {
+        return icon.name.toLowerCase().includes(query.value.toLowerCase())
+      })
+      return { ...category, icons }
+    })
+    .filter((category) => category.icons.length)
+})
 </script>
 
 <template>
@@ -76,7 +88,15 @@ categories.value.push({ name: 'Other', icons: Array.from(iconMap.values()) })
       inactive-text="Copy SVG content"
     />
   </div>
-  <div v-for="item in categories" :key="item.name" class="demo-icon-item">
+  <div class="icon-search-content">
+    <el-input
+      v-model="query"
+      :prefix-icon="Icons.Search"
+      size="large"
+      placeholder="Search Icons"
+    />
+  </div>
+  <div v-for="item in filterCategories" :key="item.name" class="demo-icon-item">
     <div class="demo-icon-title">{{ item.name }}</div>
     <ul class="demo-icon-list">
       <li
@@ -98,41 +118,60 @@ categories.value.push({ name: 'Other', icons: Array.from(iconMap.values()) })
 </template>
 
 <style scoped lang="scss">
+.icon-search-content {
+  position: sticky;
+  top: 60px;
+  z-index: 10;
+
+  .el-input {
+    background: var(--bg-color);
+  }
+}
+
 .demo-icon {
   &-item {
     margin-top: 24px;
+
     &:first-child {
       margin-top: 0;
     }
   }
+
   &-title {
     font-weight: 400;
     font-size: 18px;
     line-height: 26px;
   }
+
   &-list {
     overflow: hidden;
     list-style: none;
     padding: 0 !important;
-    border-top: 1px solid var(--el-border-color);
     border-left: 1px solid var(--el-border-color);
     border-radius: 4px;
     display: grid;
     grid-template-columns: repeat(7, 1fr);
 
     .icon-item {
+      &:nth-child(-n + 7) {
+        border-top: 1px solid var(--el-border-color);
+      }
+
       text-align: center;
       color: var(--el-text-color-regular);
       height: 90px;
       font-size: 13px;
       border-right: 1px solid var(--el-border-color);
       border-bottom: 1px solid var(--el-border-color);
       transition: background-color var(--el-transition-duration);
+
       &:hover {
         background-color: var(--el-border-color-extra-light);
+
         .el-icon {
           color: var(--brand-color-light);
         }
+
         color: var(--brand-color-light);
       }