From 1098790ee90312bfde84a079f51b6c0aee6110ce Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Fri, 22 Sep 2023 14:33:59 +0800
Subject: [PATCH] =?UTF-8?q?wip:=20IconPicker=20=E5=BC=80=E5=8F=91=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mock/role/index.ts                            |    9 +
 package.json                                  |    9 +-
 scripts/icon.ts                               |   78 ++
 src/components/IconPicker/index.ts            |    3 +
 src/components/IconPicker/src/IconPicker.vue  |   11 +
 .../IconPicker/src/data/icons.ant-design.ts   |  795 +++++++++++
 .../IconPicker/src/data/icons.ep.ts           |  299 ++++
 .../IconPicker/src/data/icons.tdesign.ts      | 1209 +++++++++++++++++
 src/locales/en.ts                             |    3 +-
 src/locales/zh-CN.ts                          |    3 +-
 src/router/index.ts                           |    8 +
 src/views/Components/IconPicker.vue           |    7 +
 12 files changed, 2431 insertions(+), 3 deletions(-)
 create mode 100644 scripts/icon.ts
 create mode 100644 src/components/IconPicker/index.ts
 create mode 100644 src/components/IconPicker/src/IconPicker.vue
 create mode 100644 src/components/IconPicker/src/data/icons.ant-design.ts
 create mode 100644 src/components/IconPicker/src/data/icons.ep.ts
 create mode 100644 src/components/IconPicker/src/data/icons.tdesign.ts
 create mode 100644 src/views/Components/IconPicker.vue

diff --git a/mock/role/index.ts b/mock/role/index.ts
index fe9f144..f12c426 100644
--- a/mock/role/index.ts
+++ b/mock/role/index.ts
@@ -230,6 +230,14 @@ const adminList = [
           title: 'router.icon'
         }
       },
+      {
+        path: 'icon-picker',
+        component: 'views/Components/IconPicker',
+        name: 'IconPicker',
+        meta: {
+          title: 'router.iconPicker'
+        }
+      },
       {
         path: 'echart',
         component: 'views/Components/Echart',
@@ -602,6 +610,7 @@ const testList: string[] = [
   '/components/image-viewer',
   '/components/dialog',
   '/components/icon',
+  '/components/iconPicker',
   '/components/echart',
   '/components/count-to',
   '/components/qrcode',
diff --git a/package.json b/package.json
index 17c5864..72772d5 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,8 @@
     "lint:style": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
     "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
     "prepare": "husky install",
-    "p": "plop"
+    "p": "plop",
+    "icon": "esno ./scripts/icon.ts"
   },
   "dependencies": {
     "@iconify/iconify": "^3.1.1",
@@ -60,6 +61,8 @@
     "@iconify/json": "^2.2.101",
     "@intlify/unplugin-vue-i18n": "^0.12.2",
     "@purge-icons/generated": "^0.9.0",
+    "@types/fs-extra": "^11.0.2",
+    "@types/inquirer": "^9.0.3",
     "@types/lodash-es": "^4.17.8",
     "@types/node": "^20.4.10",
     "@types/nprogress": "^0.2.0",
@@ -73,13 +76,17 @@
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "autoprefixer": "^10.4.14",
+    "chalk": "^5.3.0",
     "consola": "^3.2.3",
     "eslint": "^8.47.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-define-config": "^1.23.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-vue": "^9.17.0",
+    "esno": "^0.17.0",
+    "fs-extra": "^11.1.1",
     "husky": "^8.0.3",
+    "inquirer": "^9.2.11",
     "less": "^4.2.0",
     "lint-staged": "^13.2.3",
     "plop": "^3.1.2",
diff --git a/scripts/icon.ts b/scripts/icon.ts
new file mode 100644
index 0000000..e4a953f
--- /dev/null
+++ b/scripts/icon.ts
@@ -0,0 +1,78 @@
+import path from 'path'
+import fs from 'fs-extra'
+import inquirer from 'inquirer'
+import chalk from 'chalk'
+import pkg from '../package.json'
+
+interface Icon {
+  name: string
+  prefix: string
+  icons: string[]
+}
+
+async function generateIcon() {
+  const dir = path.resolve(process.cwd(), 'node_modules/@iconify/json')
+
+  const raw = await fs.readJSON(path.join(dir, 'collections.json'))
+
+  const collections = Object.entries(raw).map(([id, v]) => ({
+    ...(v as any),
+    id
+  }))
+
+  const choices = collections.map((item) => ({ key: item.id, value: item.id, name: item.name }))
+
+  inquirer
+    .prompt([
+      // {
+      //   type: 'list',
+      //   name: 'useType',
+      //   choices: [
+      //     { key: 'local', value: 'local', name: 'Local' },
+      //     { key: 'onLine', value: 'onLine', name: 'OnLine' },
+      //   ],
+      //   message: 'How to use icons?',
+      // },
+      {
+        type: 'list',
+        name: 'iconSet',
+        choices: choices,
+        message: 'Select the icon set that needs to be generated?'
+      }
+      // {
+      //   type: 'input',
+      //   name: 'output',
+      //   message: 'Select the icon set that needs to be generated?',
+      //   default: 'src/components/Icon/data',
+      // },
+    ])
+    // ↓命令行问答的答案
+    .then(async (answers) => {
+      const { iconSet } = answers
+      const outputDir = path.resolve(process.cwd(), 'src/components/IconPicker/src/data')
+      fs.ensureDir(outputDir)
+      const genCollections = collections.filter((item) => [iconSet].includes(item.id))
+      const prefixSet: string[] = []
+      for (const info of genCollections) {
+        const data = await fs.readJSON(path.join(dir, 'json', `${info.id}.json`))
+        if (data) {
+          const { prefix } = data
+          const icons = Object.keys(data.icons).map((item) => `${prefix}:${item}`)
+
+          await fs.writeFileSync(
+            path.join('src/components/IconPicker/src/data', `icons.${prefix}.ts`),
+            `export default ${JSON.stringify({ name: info.name, prefix, icons })}`
+          )
+          // ↓分类处理完成，push类型名称
+          prefixSet.push(prefix)
+        }
+      }
+      // 将vite的缓存清空
+      // fs.emptyDir(path.join(process.cwd(), 'node_modules/.vite'))
+      console.log(
+        `✨ ${chalk.cyan(`[${pkg.name}]`)}` + ' - Icon generated successfully:' + `[${prefixSet}]`
+      )
+    })
+}
+
+generateIcon()
diff --git a/src/components/IconPicker/index.ts b/src/components/IconPicker/index.ts
new file mode 100644
index 0000000..b7b3022
--- /dev/null
+++ b/src/components/IconPicker/index.ts
@@ -0,0 +1,3 @@
+import IconPicker from './src/IconPicker.vue'
+
+export { IconPicker }
diff --git a/src/components/IconPicker/src/IconPicker.vue b/src/components/IconPicker/src/IconPicker.vue
new file mode 100644
index 0000000..70844e9
--- /dev/null
+++ b/src/components/IconPicker/src/IconPicker.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import epIcons from './data/icons.ep'
+import antIcons from './data/icons.ant-design'
+import tIcons from './data/icons.tdesign'
+
+console.log(epIcons, antIcons, tIcons)
+</script>
+
+<template>
+  <div> 2222 </div>
+</template>
diff --git a/src/components/IconPicker/src/data/icons.ant-design.ts b/src/components/IconPicker/src/data/icons.ant-design.ts
new file mode 100644
index 0000000..a521eae
--- /dev/null
+++ b/src/components/IconPicker/src/data/icons.ant-design.ts
@@ -0,0 +1,795 @@
+export default {
+  name: 'Ant Design Icons',
+  prefix: 'ant-design',
+  icons: [
+    'ant-design:account-book-filled',
+    'ant-design:account-book-outlined',
+    'ant-design:account-book-twotone',
+    'ant-design:aim-outlined',
+    'ant-design:alert-filled',
+    'ant-design:alert-outlined',
+    'ant-design:alert-twotone',
+    'ant-design:alibaba-outlined',
+    'ant-design:align-center-outlined',
+    'ant-design:align-left-outlined',
+    'ant-design:align-right-outlined',
+    'ant-design:alipay-circle-filled',
+    'ant-design:alipay-circle-outlined',
+    'ant-design:alipay-outlined',
+    'ant-design:alipay-square-filled',
+    'ant-design:aliwangwang-filled',
+    'ant-design:aliwangwang-outlined',
+    'ant-design:aliyun-outlined',
+    'ant-design:amazon-circle-filled',
+    'ant-design:amazon-outlined',
+    'ant-design:amazon-square-filled',
+    'ant-design:android-filled',
+    'ant-design:android-outlined',
+    'ant-design:ant-cloud-outlined',
+    'ant-design:ant-design-outlined',
+    'ant-design:apartment-outlined',
+    'ant-design:api-filled',
+    'ant-design:api-outlined',
+    'ant-design:api-twotone',
+    'ant-design:apple-filled',
+    'ant-design:apple-outlined',
+    'ant-design:appstore-add-outlined',
+    'ant-design:appstore-filled',
+    'ant-design:appstore-outlined',
+    'ant-design:appstore-twotone',
+    'ant-design:area-chart-outlined',
+    'ant-design:arrow-down-outlined',
+    'ant-design:arrow-left-outlined',
+    'ant-design:arrow-right-outlined',
+    'ant-design:arrow-up-outlined',
+    'ant-design:arrows-alt-outlined',
+    'ant-design:audio-filled',
+    'ant-design:audio-muted-outlined',
+    'ant-design:audio-outlined',
+    'ant-design:audio-twotone',
+    'ant-design:audit-outlined',
+    'ant-design:backward-filled',
+    'ant-design:backward-outlined',
+    'ant-design:bank-filled',
+    'ant-design:bank-outlined',
+    'ant-design:bank-twotone',
+    'ant-design:bar-chart-outlined',
+    'ant-design:barcode-outlined',
+    'ant-design:bars-outlined',
+    'ant-design:behance-circle-filled',
+    'ant-design:behance-outlined',
+    'ant-design:behance-square-filled',
+    'ant-design:behance-square-outlined',
+    'ant-design:bell-filled',
+    'ant-design:bell-outlined',
+    'ant-design:bell-twotone',
+    'ant-design:bg-colors-outlined',
+    'ant-design:block-outlined',
+    'ant-design:bold-outlined',
+    'ant-design:book-filled',
+    'ant-design:book-outlined',
+    'ant-design:book-twotone',
+    'ant-design:border-bottom-outlined',
+    'ant-design:border-horizontal-outlined',
+    'ant-design:border-inner-outlined',
+    'ant-design:border-left-outlined',
+    'ant-design:border-outer-outlined',
+    'ant-design:border-outlined',
+    'ant-design:border-right-outlined',
+    'ant-design:border-top-outlined',
+    'ant-design:border-verticle-outlined',
+    'ant-design:borderless-table-outlined',
+    'ant-design:box-plot-filled',
+    'ant-design:box-plot-outlined',
+    'ant-design:box-plot-twotone',
+    'ant-design:branches-outlined',
+    'ant-design:bug-filled',
+    'ant-design:bug-outlined',
+    'ant-design:bug-twotone',
+    'ant-design:build-filled',
+    'ant-design:build-outlined',
+    'ant-design:build-twotone',
+    'ant-design:bulb-filled',
+    'ant-design:bulb-outlined',
+    'ant-design:bulb-twotone',
+    'ant-design:calculator-filled',
+    'ant-design:calculator-outlined',
+    'ant-design:calculator-twotone',
+    'ant-design:calendar-filled',
+    'ant-design:calendar-outlined',
+    'ant-design:calendar-twotone',
+    'ant-design:camera-filled',
+    'ant-design:camera-outlined',
+    'ant-design:camera-twotone',
+    'ant-design:car-filled',
+    'ant-design:car-outlined',
+    'ant-design:car-twotone',
+    'ant-design:caret-down-filled',
+    'ant-design:caret-down-outlined',
+    'ant-design:caret-left-filled',
+    'ant-design:caret-left-outlined',
+    'ant-design:caret-right-filled',
+    'ant-design:caret-right-outlined',
+    'ant-design:caret-up-filled',
+    'ant-design:caret-up-outlined',
+    'ant-design:carry-out-filled',
+    'ant-design:carry-out-outlined',
+    'ant-design:carry-out-twotone',
+    'ant-design:check-circle-filled',
+    'ant-design:check-circle-outlined',
+    'ant-design:check-circle-twotone',
+    'ant-design:check-outlined',
+    'ant-design:check-square-filled',
+    'ant-design:check-square-outlined',
+    'ant-design:check-square-twotone',
+    'ant-design:chrome-filled',
+    'ant-design:chrome-outlined',
+    'ant-design:ci-circle-filled',
+    'ant-design:ci-circle-outlined',
+    'ant-design:ci-circle-twotone',
+    'ant-design:ci-outlined',
+    'ant-design:ci-twotone',
+    'ant-design:clear-outlined',
+    'ant-design:clock-circle-filled',
+    'ant-design:clock-circle-outlined',
+    'ant-design:clock-circle-twotone',
+    'ant-design:close-circle-filled',
+    'ant-design:close-circle-outlined',
+    'ant-design:close-circle-twotone',
+    'ant-design:close-outlined',
+    'ant-design:close-square-filled',
+    'ant-design:close-square-outlined',
+    'ant-design:close-square-twotone',
+    'ant-design:cloud-download-outlined',
+    'ant-design:cloud-filled',
+    'ant-design:cloud-outlined',
+    'ant-design:cloud-server-outlined',
+    'ant-design:cloud-sync-outlined',
+    'ant-design:cloud-twotone',
+    'ant-design:cloud-upload-outlined',
+    'ant-design:cluster-outlined',
+    'ant-design:code-filled',
+    'ant-design:code-outlined',
+    'ant-design:code-sandbox-circle-filled',
+    'ant-design:code-sandbox-outlined',
+    'ant-design:code-sandbox-square-filled',
+    'ant-design:code-twotone',
+    'ant-design:codepen-circle-filled',
+    'ant-design:codepen-circle-outlined',
+    'ant-design:codepen-outlined',
+    'ant-design:codepen-square-filled',
+    'ant-design:coffee-outlined',
+    'ant-design:column-height-outlined',
+    'ant-design:column-width-outlined',
+    'ant-design:comment-outlined',
+    'ant-design:compass-filled',
+    'ant-design:compass-outlined',
+    'ant-design:compass-twotone',
+    'ant-design:compress-outlined',
+    'ant-design:console-sql-outlined',
+    'ant-design:contacts-filled',
+    'ant-design:contacts-outlined',
+    'ant-design:contacts-twotone',
+    'ant-design:container-filled',
+    'ant-design:container-outlined',
+    'ant-design:container-twotone',
+    'ant-design:control-filled',
+    'ant-design:control-outlined',
+    'ant-design:control-twotone',
+    'ant-design:copy-filled',
+    'ant-design:copy-outlined',
+    'ant-design:copy-twotone',
+    'ant-design:copyright-circle-filled',
+    'ant-design:copyright-circle-outlined',
+    'ant-design:copyright-circle-twotone',
+    'ant-design:copyright-outlined',
+    'ant-design:copyright-twotone',
+    'ant-design:credit-card-filled',
+    'ant-design:credit-card-outlined',
+    'ant-design:credit-card-twotone',
+    'ant-design:crown-filled',
+    'ant-design:crown-outlined',
+    'ant-design:crown-twotone',
+    'ant-design:customer-service-filled',
+    'ant-design:customer-service-outlined',
+    'ant-design:customer-service-twotone',
+    'ant-design:dash-outlined',
+    'ant-design:dashboard-filled',
+    'ant-design:dashboard-outlined',
+    'ant-design:dashboard-twotone',
+    'ant-design:database-filled',
+    'ant-design:database-outlined',
+    'ant-design:database-twotone',
+    'ant-design:delete-column-outlined',
+    'ant-design:delete-filled',
+    'ant-design:delete-outlined',
+    'ant-design:delete-row-outlined',
+    'ant-design:delete-twotone',
+    'ant-design:delivered-procedure-outlined',
+    'ant-design:deployment-unit-outlined',
+    'ant-design:desktop-outlined',
+    'ant-design:diff-filled',
+    'ant-design:diff-outlined',
+    'ant-design:diff-twotone',
+    'ant-design:dingding-outlined',
+    'ant-design:dingtalk-circle-filled',
+    'ant-design:dingtalk-outlined',
+    'ant-design:dingtalk-square-filled',
+    'ant-design:disconnect-outlined',
+    'ant-design:dislike-filled',
+    'ant-design:dislike-outlined',
+    'ant-design:dislike-twotone',
+    'ant-design:dollar-circle-filled',
+    'ant-design:dollar-circle-outlined',
+    'ant-design:dollar-circle-twotone',
+    'ant-design:dollar-outlined',
+    'ant-design:dollar-twotone',
+    'ant-design:dot-chart-outlined',
+    'ant-design:double-left-outlined',
+    'ant-design:double-right-outlined',
+    'ant-design:down-circle-filled',
+    'ant-design:down-circle-outlined',
+    'ant-design:down-circle-twotone',
+    'ant-design:down-outlined',
+    'ant-design:down-square-filled',
+    'ant-design:down-square-outlined',
+    'ant-design:down-square-twotone',
+    'ant-design:download-outlined',
+    'ant-design:drag-outlined',
+    'ant-design:dribbble-circle-filled',
+    'ant-design:dribbble-outlined',
+    'ant-design:dribbble-square-filled',
+    'ant-design:dribbble-square-outlined',
+    'ant-design:dropbox-circle-filled',
+    'ant-design:dropbox-outlined',
+    'ant-design:dropbox-square-filled',
+    'ant-design:edit-filled',
+    'ant-design:edit-outlined',
+    'ant-design:edit-twotone',
+    'ant-design:ellipsis-outlined',
+    'ant-design:enter-outlined',
+    'ant-design:environment-filled',
+    'ant-design:environment-outlined',
+    'ant-design:environment-twotone',
+    'ant-design:euro-circle-filled',
+    'ant-design:euro-circle-outlined',
+    'ant-design:euro-circle-twotone',
+    'ant-design:euro-outlined',
+    'ant-design:euro-twotone',
+    'ant-design:exception-outlined',
+    'ant-design:exclamation-circle-filled',
+    'ant-design:exclamation-circle-outlined',
+    'ant-design:exclamation-circle-twotone',
+    'ant-design:exclamation-outlined',
+    'ant-design:expand-alt-outlined',
+    'ant-design:expand-outlined',
+    'ant-design:experiment-filled',
+    'ant-design:experiment-outlined',
+    'ant-design:experiment-twotone',
+    'ant-design:export-outlined',
+    'ant-design:eye-filled',
+    'ant-design:eye-invisible-filled',
+    'ant-design:eye-invisible-outlined',
+    'ant-design:eye-invisible-twotone',
+    'ant-design:eye-outlined',
+    'ant-design:eye-twotone',
+    'ant-design:facebook-filled',
+    'ant-design:facebook-outlined',
+    'ant-design:fall-outlined',
+    'ant-design:fast-backward-filled',
+    'ant-design:fast-backward-outlined',
+    'ant-design:fast-forward-filled',
+    'ant-design:fast-forward-outlined',
+    'ant-design:field-binary-outlined',
+    'ant-design:field-number-outlined',
+    'ant-design:field-string-outlined',
+    'ant-design:field-time-outlined',
+    'ant-design:file-add-filled',
+    'ant-design:file-add-outlined',
+    'ant-design:file-add-twotone',
+    'ant-design:file-done-outlined',
+    'ant-design:file-excel-filled',
+    'ant-design:file-excel-outlined',
+    'ant-design:file-excel-twotone',
+    'ant-design:file-exclamation-filled',
+    'ant-design:file-exclamation-outlined',
+    'ant-design:file-exclamation-twotone',
+    'ant-design:file-filled',
+    'ant-design:file-gif-outlined',
+    'ant-design:file-image-filled',
+    'ant-design:file-image-outlined',
+    'ant-design:file-image-twotone',
+    'ant-design:file-jpg-outlined',
+    'ant-design:file-markdown-filled',
+    'ant-design:file-markdown-outlined',
+    'ant-design:file-markdown-twotone',
+    'ant-design:file-outlined',
+    'ant-design:file-pdf-filled',
+    'ant-design:file-pdf-outlined',
+    'ant-design:file-pdf-twotone',
+    'ant-design:file-ppt-filled',
+    'ant-design:file-ppt-outlined',
+    'ant-design:file-ppt-twotone',
+    'ant-design:file-protect-outlined',
+    'ant-design:file-search-outlined',
+    'ant-design:file-sync-outlined',
+    'ant-design:file-text-filled',
+    'ant-design:file-text-outlined',
+    'ant-design:file-text-twotone',
+    'ant-design:file-twotone',
+    'ant-design:file-unknown-filled',
+    'ant-design:file-unknown-outlined',
+    'ant-design:file-unknown-twotone',
+    'ant-design:file-word-filled',
+    'ant-design:file-word-outlined',
+    'ant-design:file-word-twotone',
+    'ant-design:file-zip-filled',
+    'ant-design:file-zip-outlined',
+    'ant-design:file-zip-twotone',
+    'ant-design:filter-filled',
+    'ant-design:filter-outlined',
+    'ant-design:filter-twotone',
+    'ant-design:fire-filled',
+    'ant-design:fire-outlined',
+    'ant-design:fire-twotone',
+    'ant-design:flag-filled',
+    'ant-design:flag-outlined',
+    'ant-design:flag-twotone',
+    'ant-design:folder-add-filled',
+    'ant-design:folder-add-outlined',
+    'ant-design:folder-add-twotone',
+    'ant-design:folder-filled',
+    'ant-design:folder-open-filled',
+    'ant-design:folder-open-outlined',
+    'ant-design:folder-open-twotone',
+    'ant-design:folder-outlined',
+    'ant-design:folder-twotone',
+    'ant-design:folder-view-outlined',
+    'ant-design:font-colors-outlined',
+    'ant-design:font-size-outlined',
+    'ant-design:fork-outlined',
+    'ant-design:form-outlined',
+    'ant-design:format-painter-filled',
+    'ant-design:format-painter-outlined',
+    'ant-design:forward-filled',
+    'ant-design:forward-outlined',
+    'ant-design:frown-filled',
+    'ant-design:frown-outlined',
+    'ant-design:frown-twotone',
+    'ant-design:fullscreen-exit-outlined',
+    'ant-design:fullscreen-outlined',
+    'ant-design:function-outlined',
+    'ant-design:fund-filled',
+    'ant-design:fund-outlined',
+    'ant-design:fund-projection-screen-outlined',
+    'ant-design:fund-twotone',
+    'ant-design:fund-view-outlined',
+    'ant-design:funnel-plot-filled',
+    'ant-design:funnel-plot-outlined',
+    'ant-design:funnel-plot-twotone',
+    'ant-design:gateway-outlined',
+    'ant-design:gif-outlined',
+    'ant-design:gift-filled',
+    'ant-design:gift-outlined',
+    'ant-design:gift-twotone',
+    'ant-design:github-filled',
+    'ant-design:github-outlined',
+    'ant-design:gitlab-filled',
+    'ant-design:gitlab-outlined',
+    'ant-design:global-outlined',
+    'ant-design:gold-filled',
+    'ant-design:gold-outlined',
+    'ant-design:gold-twotone',
+    'ant-design:golden-filled',
+    'ant-design:google-circle-filled',
+    'ant-design:google-outlined',
+    'ant-design:google-plus-circle-filled',
+    'ant-design:google-plus-outlined',
+    'ant-design:google-plus-square-filled',
+    'ant-design:google-square-filled',
+    'ant-design:group-outlined',
+    'ant-design:hdd-filled',
+    'ant-design:hdd-outlined',
+    'ant-design:hdd-twotone',
+    'ant-design:heart-filled',
+    'ant-design:heart-outlined',
+    'ant-design:heart-twotone',
+    'ant-design:heat-map-outlined',
+    'ant-design:highlight-filled',
+    'ant-design:highlight-outlined',
+    'ant-design:highlight-twotone',
+    'ant-design:history-outlined',
+    'ant-design:holder-outlined',
+    'ant-design:home-filled',
+    'ant-design:home-outlined',
+    'ant-design:home-twotone',
+    'ant-design:hourglass-filled',
+    'ant-design:hourglass-outlined',
+    'ant-design:hourglass-twotone',
+    'ant-design:html5-filled',
+    'ant-design:html5-outlined',
+    'ant-design:html5-twotone',
+    'ant-design:idcard-filled',
+    'ant-design:idcard-outlined',
+    'ant-design:idcard-twotone',
+    'ant-design:ie-circle-filled',
+    'ant-design:ie-outlined',
+    'ant-design:ie-square-filled',
+    'ant-design:import-outlined',
+    'ant-design:inbox-outlined',
+    'ant-design:info-circle-filled',
+    'ant-design:info-circle-outlined',
+    'ant-design:info-circle-twotone',
+    'ant-design:info-outlined',
+    'ant-design:insert-row-above-outlined',
+    'ant-design:insert-row-below-outlined',
+    'ant-design:insert-row-left-outlined',
+    'ant-design:insert-row-right-outlined',
+    'ant-design:instagram-filled',
+    'ant-design:instagram-outlined',
+    'ant-design:insurance-filled',
+    'ant-design:insurance-outlined',
+    'ant-design:insurance-twotone',
+    'ant-design:interaction-filled',
+    'ant-design:interaction-outlined',
+    'ant-design:interaction-twotone',
+    'ant-design:issues-close-outlined',
+    'ant-design:italic-outlined',
+    'ant-design:key-outlined',
+    'ant-design:laptop-outlined',
+    'ant-design:layout-filled',
+    'ant-design:layout-outlined',
+    'ant-design:layout-twotone',
+    'ant-design:left-circle-filled',
+    'ant-design:left-circle-outlined',
+    'ant-design:left-circle-twotone',
+    'ant-design:left-outlined',
+    'ant-design:left-square-filled',
+    'ant-design:left-square-outlined',
+    'ant-design:left-square-twotone',
+    'ant-design:like-filled',
+    'ant-design:like-outlined',
+    'ant-design:like-twotone',
+    'ant-design:line-chart-outlined',
+    'ant-design:line-height-outlined',
+    'ant-design:line-outlined',
+    'ant-design:link-outlined',
+    'ant-design:linkedin-filled',
+    'ant-design:linkedin-outlined',
+    'ant-design:loading-3-quarters-outlined',
+    'ant-design:loading-outlined',
+    'ant-design:lock-filled',
+    'ant-design:lock-outlined',
+    'ant-design:lock-twotone',
+    'ant-design:login-outlined',
+    'ant-design:logout-outlined',
+    'ant-design:mac-command-filled',
+    'ant-design:mac-command-outlined',
+    'ant-design:mail-filled',
+    'ant-design:mail-outlined',
+    'ant-design:mail-twotone',
+    'ant-design:man-outlined',
+    'ant-design:medicine-box-filled',
+    'ant-design:medicine-box-outlined',
+    'ant-design:medicine-box-twotone',
+    'ant-design:medium-circle-filled',
+    'ant-design:medium-outlined',
+    'ant-design:medium-square-filled',
+    'ant-design:medium-workmark-outlined',
+    'ant-design:meh-filled',
+    'ant-design:meh-outlined',
+    'ant-design:meh-twotone',
+    'ant-design:menu-fold-outlined',
+    'ant-design:menu-outlined',
+    'ant-design:menu-unfold-outlined',
+    'ant-design:merge-cells-outlined',
+    'ant-design:message-filled',
+    'ant-design:message-outlined',
+    'ant-design:message-twotone',
+    'ant-design:minus-circle-filled',
+    'ant-design:minus-circle-outlined',
+    'ant-design:minus-circle-twotone',
+    'ant-design:minus-outlined',
+    'ant-design:minus-square-filled',
+    'ant-design:minus-square-outlined',
+    'ant-design:minus-square-twotone',
+    'ant-design:mobile-filled',
+    'ant-design:mobile-outlined',
+    'ant-design:mobile-twotone',
+    'ant-design:money-collect-filled',
+    'ant-design:money-collect-outlined',
+    'ant-design:money-collect-twotone',
+    'ant-design:monitor-outlined',
+    'ant-design:more-outlined',
+    'ant-design:node-collapse-outlined',
+    'ant-design:node-expand-outlined',
+    'ant-design:node-index-outlined',
+    'ant-design:notification-filled',
+    'ant-design:notification-outlined',
+    'ant-design:notification-twotone',
+    'ant-design:number-outlined',
+    'ant-design:one-to-one-outlined',
+    'ant-design:ordered-list-outlined',
+    'ant-design:paper-clip-outlined',
+    'ant-design:partition-outlined',
+    'ant-design:pause-circle-filled',
+    'ant-design:pause-circle-outlined',
+    'ant-design:pause-circle-twotone',
+    'ant-design:pause-outlined',
+    'ant-design:pay-circle-filled',
+    'ant-design:pay-circle-outlined',
+    'ant-design:percentage-outlined',
+    'ant-design:phone-filled',
+    'ant-design:phone-outlined',
+    'ant-design:phone-twotone',
+    'ant-design:pic-center-outlined',
+    'ant-design:pic-left-outlined',
+    'ant-design:pic-right-outlined',
+    'ant-design:picture-filled',
+    'ant-design:picture-outlined',
+    'ant-design:picture-twotone',
+    'ant-design:pie-chart-filled',
+    'ant-design:pie-chart-outlined',
+    'ant-design:pie-chart-twotone',
+    'ant-design:play-circle-filled',
+    'ant-design:play-circle-outlined',
+    'ant-design:play-circle-twotone',
+    'ant-design:play-square-filled',
+    'ant-design:play-square-outlined',
+    'ant-design:play-square-twotone',
+    'ant-design:plus-circle-filled',
+    'ant-design:plus-circle-outlined',
+    'ant-design:plus-circle-twotone',
+    'ant-design:plus-outlined',
+    'ant-design:plus-square-filled',
+    'ant-design:plus-square-outlined',
+    'ant-design:plus-square-twotone',
+    'ant-design:pound-circle-filled',
+    'ant-design:pound-circle-outlined',
+    'ant-design:pound-circle-twotone',
+    'ant-design:pound-outlined',
+    'ant-design:poweroff-outlined',
+    'ant-design:printer-filled',
+    'ant-design:printer-outlined',
+    'ant-design:printer-twotone',
+    'ant-design:profile-filled',
+    'ant-design:profile-outlined',
+    'ant-design:profile-twotone',
+    'ant-design:project-filled',
+    'ant-design:project-outlined',
+    'ant-design:project-twotone',
+    'ant-design:property-safety-filled',
+    'ant-design:property-safety-outlined',
+    'ant-design:property-safety-twotone',
+    'ant-design:pull-request-outlined',
+    'ant-design:pushpin-filled',
+    'ant-design:pushpin-outlined',
+    'ant-design:pushpin-twotone',
+    'ant-design:qq-circle-filled',
+    'ant-design:qq-outlined',
+    'ant-design:qq-square-filled',
+    'ant-design:qrcode-outlined',
+    'ant-design:question-circle-filled',
+    'ant-design:question-circle-outlined',
+    'ant-design:question-circle-twotone',
+    'ant-design:question-outlined',
+    'ant-design:radar-chart-outlined',
+    'ant-design:radius-bottomleft-outlined',
+    'ant-design:radius-bottomright-outlined',
+    'ant-design:radius-setting-outlined',
+    'ant-design:radius-upleft-outlined',
+    'ant-design:radius-upright-outlined',
+    'ant-design:read-filled',
+    'ant-design:read-outlined',
+    'ant-design:reconciliation-filled',
+    'ant-design:reconciliation-outlined',
+    'ant-design:reconciliation-twotone',
+    'ant-design:red-envelope-filled',
+    'ant-design:red-envelope-outlined',
+    'ant-design:red-envelope-twotone',
+    'ant-design:reddit-circle-filled',
+    'ant-design:reddit-outlined',
+    'ant-design:reddit-square-filled',
+    'ant-design:redo-outlined',
+    'ant-design:reload-outlined',
+    'ant-design:rest-filled',
+    'ant-design:rest-outlined',
+    'ant-design:rest-twotone',
+    'ant-design:retweet-outlined',
+    'ant-design:right-circle-filled',
+    'ant-design:right-circle-outlined',
+    'ant-design:right-circle-twotone',
+    'ant-design:right-outlined',
+    'ant-design:right-square-filled',
+    'ant-design:right-square-outlined',
+    'ant-design:right-square-twotone',
+    'ant-design:rise-outlined',
+    'ant-design:robot-filled',
+    'ant-design:robot-outlined',
+    'ant-design:rocket-filled',
+    'ant-design:rocket-outlined',
+    'ant-design:rocket-twotone',
+    'ant-design:rollback-outlined',
+    'ant-design:rotate-left-outlined',
+    'ant-design:rotate-right-outlined',
+    'ant-design:safety-certificate-filled',
+    'ant-design:safety-certificate-outlined',
+    'ant-design:safety-certificate-twotone',
+    'ant-design:safety-outlined',
+    'ant-design:save-filled',
+    'ant-design:save-outlined',
+    'ant-design:save-twotone',
+    'ant-design:scan-outlined',
+    'ant-design:schedule-filled',
+    'ant-design:schedule-outlined',
+    'ant-design:schedule-twotone',
+    'ant-design:scissor-outlined',
+    'ant-design:search-outlined',
+    'ant-design:security-scan-filled',
+    'ant-design:security-scan-outlined',
+    'ant-design:security-scan-twotone',
+    'ant-design:select-outlined',
+    'ant-design:send-outlined',
+    'ant-design:setting-filled',
+    'ant-design:setting-outlined',
+    'ant-design:setting-twotone',
+    'ant-design:shake-outlined',
+    'ant-design:share-alt-outlined',
+    'ant-design:shop-filled',
+    'ant-design:shop-outlined',
+    'ant-design:shop-twotone',
+    'ant-design:shopping-cart-outlined',
+    'ant-design:shopping-filled',
+    'ant-design:shopping-outlined',
+    'ant-design:shopping-twotone',
+    'ant-design:shrink-outlined',
+    'ant-design:signal-filled',
+    'ant-design:sisternode-outlined',
+    'ant-design:sketch-circle-filled',
+    'ant-design:sketch-outlined',
+    'ant-design:sketch-square-filled',
+    'ant-design:skin-filled',
+    'ant-design:skin-outlined',
+    'ant-design:skin-twotone',
+    'ant-design:skype-filled',
+    'ant-design:skype-outlined',
+    'ant-design:slack-circle-filled',
+    'ant-design:slack-outlined',
+    'ant-design:slack-square-filled',
+    'ant-design:slack-square-outlined',
+    'ant-design:sliders-filled',
+    'ant-design:sliders-outlined',
+    'ant-design:sliders-twotone',
+    'ant-design:small-dash-outlined',
+    'ant-design:smile-filled',
+    'ant-design:smile-outlined',
+    'ant-design:smile-twotone',
+    'ant-design:snippets-filled',
+    'ant-design:snippets-outlined',
+    'ant-design:snippets-twotone',
+    'ant-design:solution-outlined',
+    'ant-design:sort-ascending-outlined',
+    'ant-design:sort-descending-outlined',
+    'ant-design:sound-filled',
+    'ant-design:sound-outlined',
+    'ant-design:sound-twotone',
+    'ant-design:split-cells-outlined',
+    'ant-design:star-filled',
+    'ant-design:star-outlined',
+    'ant-design:star-twotone',
+    'ant-design:step-backward-filled',
+    'ant-design:step-backward-outlined',
+    'ant-design:step-forward-filled',
+    'ant-design:step-forward-outlined',
+    'ant-design:stock-outlined',
+    'ant-design:stop-filled',
+    'ant-design:stop-outlined',
+    'ant-design:stop-twotone',
+    'ant-design:strikethrough-outlined',
+    'ant-design:subnode-outlined',
+    'ant-design:swap-left-outlined',
+    'ant-design:swap-outlined',
+    'ant-design:swap-right-outlined',
+    'ant-design:switcher-filled',
+    'ant-design:switcher-outlined',
+    'ant-design:switcher-twotone',
+    'ant-design:sync-outlined',
+    'ant-design:table-outlined',
+    'ant-design:tablet-filled',
+    'ant-design:tablet-outlined',
+    'ant-design:tablet-twotone',
+    'ant-design:tag-filled',
+    'ant-design:tag-outlined',
+    'ant-design:tag-twotone',
+    'ant-design:tags-filled',
+    'ant-design:tags-outlined',
+    'ant-design:tags-twotone',
+    'ant-design:taobao-circle-filled',
+    'ant-design:taobao-circle-outlined',
+    'ant-design:taobao-outlined',
+    'ant-design:taobao-square-filled',
+    'ant-design:team-outlined',
+    'ant-design:thunderbolt-filled',
+    'ant-design:thunderbolt-outlined',
+    'ant-design:thunderbolt-twotone',
+    'ant-design:to-top-outlined',
+    'ant-design:tool-filled',
+    'ant-design:tool-outlined',
+    'ant-design:tool-twotone',
+    'ant-design:trademark-circle-filled',
+    'ant-design:trademark-circle-outlined',
+    'ant-design:trademark-circle-twotone',
+    'ant-design:trademark-outlined',
+    'ant-design:transaction-outlined',
+    'ant-design:translation-outlined',
+    'ant-design:trophy-filled',
+    'ant-design:trophy-outlined',
+    'ant-design:trophy-twotone',
+    'ant-design:twitter-circle-filled',
+    'ant-design:twitter-outlined',
+    'ant-design:twitter-square-filled',
+    'ant-design:underline-outlined',
+    'ant-design:undo-outlined',
+    'ant-design:ungroup-outlined',
+    'ant-design:unlock-filled',
+    'ant-design:unlock-outlined',
+    'ant-design:unlock-twotone',
+    'ant-design:unordered-list-outlined',
+    'ant-design:up-circle-filled',
+    'ant-design:up-circle-outlined',
+    'ant-design:up-circle-twotone',
+    'ant-design:up-outlined',
+    'ant-design:up-square-filled',
+    'ant-design:up-square-outlined',
+    'ant-design:up-square-twotone',
+    'ant-design:upload-outlined',
+    'ant-design:usb-filled',
+    'ant-design:usb-outlined',
+    'ant-design:usb-twotone',
+    'ant-design:user-add-outlined',
+    'ant-design:user-delete-outlined',
+    'ant-design:user-outlined',
+    'ant-design:user-switch-outlined',
+    'ant-design:usergroup-add-outlined',
+    'ant-design:usergroup-delete-outlined',
+    'ant-design:verified-outlined',
+    'ant-design:vertical-align-bottom-outlined',
+    'ant-design:vertical-align-middle-outlined',
+    'ant-design:vertical-align-top-outlined',
+    'ant-design:vertical-left-outlined',
+    'ant-design:vertical-right-outlined',
+    'ant-design:video-camera-add-outlined',
+    'ant-design:video-camera-filled',
+    'ant-design:video-camera-outlined',
+    'ant-design:video-camera-twotone',
+    'ant-design:wallet-filled',
+    'ant-design:wallet-outlined',
+    'ant-design:wallet-twotone',
+    'ant-design:warning-filled',
+    'ant-design:warning-outlined',
+    'ant-design:warning-twotone',
+    'ant-design:wechat-filled',
+    'ant-design:wechat-outlined',
+    'ant-design:weibo-circle-filled',
+    'ant-design:weibo-circle-outlined',
+    'ant-design:weibo-outlined',
+    'ant-design:weibo-square-filled',
+    'ant-design:weibo-square-outlined',
+    'ant-design:whats-app-outlined',
+    'ant-design:wifi-outlined',
+    'ant-design:windows-filled',
+    'ant-design:windows-outlined',
+    'ant-design:woman-outlined',
+    'ant-design:yahoo-filled',
+    'ant-design:yahoo-outlined',
+    'ant-design:youtube-filled',
+    'ant-design:youtube-outlined',
+    'ant-design:yuque-filled',
+    'ant-design:yuque-outlined',
+    'ant-design:zhihu-circle-filled',
+    'ant-design:zhihu-outlined',
+    'ant-design:zhihu-square-filled',
+    'ant-design:zoom-in-outlined',
+    'ant-design:zoom-out-outlined'
+  ]
+}
diff --git a/src/components/IconPicker/src/data/icons.ep.ts b/src/components/IconPicker/src/data/icons.ep.ts
new file mode 100644
index 0000000..0e683ea
--- /dev/null
+++ b/src/components/IconPicker/src/data/icons.ep.ts
@@ -0,0 +1,299 @@
+export default {
+  name: 'Element Plus',
+  prefix: 'ep',
+  icons: [
+    'ep:add-location',
+    'ep:aim',
+    'ep:alarm-clock',
+    'ep:apple',
+    'ep:arrow-down',
+    'ep:arrow-down-bold',
+    'ep:arrow-left',
+    'ep:arrow-left-bold',
+    'ep:arrow-right',
+    'ep:arrow-right-bold',
+    'ep:arrow-up',
+    'ep:arrow-up-bold',
+    'ep:avatar',
+    'ep:back',
+    'ep:baseball',
+    'ep:basketball',
+    'ep:bell',
+    'ep:bell-filled',
+    'ep:bicycle',
+    'ep:bottom',
+    'ep:bottom-left',
+    'ep:bottom-right',
+    'ep:bowl',
+    'ep:box',
+    'ep:briefcase',
+    'ep:brush',
+    'ep:brush-filled',
+    'ep:burger',
+    'ep:calendar',
+    'ep:camera',
+    'ep:camera-filled',
+    'ep:caret-bottom',
+    'ep:caret-left',
+    'ep:caret-right',
+    'ep:caret-top',
+    'ep:cellphone',
+    'ep:chat-dot-round',
+    'ep:chat-dot-square',
+    'ep:chat-line-round',
+    'ep:chat-line-square',
+    'ep:chat-round',
+    'ep:chat-square',
+    'ep:check',
+    'ep:checked',
+    'ep:cherry',
+    'ep:chicken',
+    'ep:chrome-filled',
+    'ep:circle-check',
+    'ep:circle-check-filled',
+    'ep:circle-close',
+    'ep:circle-close-filled',
+    'ep:circle-plus',
+    'ep:circle-plus-filled',
+    'ep:clock',
+    'ep:close',
+    'ep:close-bold',
+    'ep:cloudy',
+    'ep:coffee',
+    'ep:coffee-cup',
+    'ep:coin',
+    'ep:cold-drink',
+    'ep:collection',
+    'ep:collection-tag',
+    'ep:comment',
+    'ep:compass',
+    'ep:connection',
+    'ep:coordinate',
+    'ep:copy-document',
+    'ep:cpu',
+    'ep:credit-card',
+    'ep:crop',
+    'ep:d-arrow-left',
+    'ep:d-arrow-right',
+    'ep:d-caret',
+    'ep:data-analysis',
+    'ep:data-board',
+    'ep:data-line',
+    'ep:delete',
+    'ep:delete-filled',
+    'ep:delete-location',
+    'ep:dessert',
+    'ep:discount',
+    'ep:dish',
+    'ep:dish-dot',
+    'ep:document',
+    'ep:document-add',
+    'ep:document-checked',
+    'ep:document-copy',
+    'ep:document-delete',
+    'ep:document-remove',
+    'ep:download',
+    'ep:drizzling',
+    'ep:edit',
+    'ep:edit-pen',
+    'ep:eleme',
+    'ep:eleme-filled',
+    'ep:element-plus',
+    'ep:expand',
+    'ep:failed',
+    'ep:female',
+    'ep:files',
+    'ep:film',
+    'ep:filter',
+    'ep:finished',
+    'ep:first-aid-kit',
+    'ep:flag',
+    'ep:fold',
+    'ep:folder',
+    'ep:folder-add',
+    'ep:folder-checked',
+    'ep:folder-delete',
+    'ep:folder-opened',
+    'ep:folder-remove',
+    'ep:food',
+    'ep:football',
+    'ep:fork-spoon',
+    'ep:fries',
+    'ep:full-screen',
+    'ep:goblet',
+    'ep:goblet-full',
+    'ep:goblet-square',
+    'ep:goblet-square-full',
+    'ep:gold-medal',
+    'ep:goods',
+    'ep:goods-filled',
+    'ep:grape',
+    'ep:grid',
+    'ep:guide',
+    'ep:handbag',
+    'ep:headset',
+    'ep:help',
+    'ep:help-filled',
+    'ep:hide',
+    'ep:histogram',
+    'ep:home-filled',
+    'ep:hot-water',
+    'ep:house',
+    'ep:ice-cream',
+    'ep:ice-cream-round',
+    'ep:ice-cream-square',
+    'ep:ice-drink',
+    'ep:ice-tea',
+    'ep:info-filled',
+    'ep:iphone',
+    'ep:key',
+    'ep:knife-fork',
+    'ep:lightning',
+    'ep:link',
+    'ep:list',
+    'ep:loading',
+    'ep:location',
+    'ep:location-filled',
+    'ep:location-information',
+    'ep:lock',
+    'ep:lollipop',
+    'ep:magic-stick',
+    'ep:magnet',
+    'ep:male',
+    'ep:management',
+    'ep:map-location',
+    'ep:medal',
+    'ep:memo',
+    'ep:menu',
+    'ep:message',
+    'ep:message-box',
+    'ep:mic',
+    'ep:microphone',
+    'ep:milk-tea',
+    'ep:minus',
+    'ep:money',
+    'ep:monitor',
+    'ep:moon',
+    'ep:moon-night',
+    'ep:more',
+    'ep:more-filled',
+    'ep:mostly-cloudy',
+    'ep:mouse',
+    'ep:mug',
+    'ep:mute',
+    'ep:mute-notification',
+    'ep:no-smoking',
+    'ep:notebook',
+    'ep:notification',
+    'ep:odometer',
+    'ep:office-building',
+    'ep:open',
+    'ep:operation',
+    'ep:opportunity',
+    'ep:orange',
+    'ep:paperclip',
+    'ep:partly-cloudy',
+    'ep:pear',
+    'ep:phone',
+    'ep:phone-filled',
+    'ep:picture',
+    'ep:picture-filled',
+    'ep:picture-rounded',
+    'ep:pie-chart',
+    'ep:place',
+    'ep:platform',
+    'ep:plus',
+    'ep:pointer',
+    'ep:position',
+    'ep:postcard',
+    'ep:pouring',
+    'ep:present',
+    'ep:price-tag',
+    'ep:printer',
+    'ep:promotion',
+    'ep:quartz-watch',
+    'ep:question-filled',
+    'ep:rank',
+    'ep:reading',
+    'ep:reading-lamp',
+    'ep:refresh',
+    'ep:refresh-left',
+    'ep:refresh-right',
+    'ep:refrigerator',
+    'ep:remove',
+    'ep:remove-filled',
+    'ep:right',
+    'ep:scale-to-original',
+    'ep:school',
+    'ep:scissor',
+    'ep:search',
+    'ep:select',
+    'ep:sell',
+    'ep:semi-select',
+    'ep:service',
+    'ep:set-up',
+    'ep:setting',
+    'ep:share',
+    'ep:ship',
+    'ep:shop',
+    'ep:shopping-bag',
+    'ep:shopping-cart',
+    'ep:shopping-cart-full',
+    'ep:shopping-trolley',
+    'ep:smoking',
+    'ep:soccer',
+    'ep:sold-out',
+    'ep:sort',
+    'ep:sort-down',
+    'ep:sort-up',
+    'ep:stamp',
+    'ep:star',
+    'ep:star-filled',
+    'ep:stopwatch',
+    'ep:success-filled',
+    'ep:sugar',
+    'ep:suitcase',
+    'ep:suitcase-line',
+    'ep:sunny',
+    'ep:sunrise',
+    'ep:sunset',
+    'ep:switch',
+    'ep:switch-button',
+    'ep:switch-filled',
+    'ep:takeaway-box',
+    'ep:ticket',
+    'ep:tickets',
+    'ep:timer',
+    'ep:toilet-paper',
+    'ep:tools',
+    'ep:top',
+    'ep:top-left',
+    'ep:top-right',
+    'ep:trend-charts',
+    'ep:trophy',
+    'ep:trophy-base',
+    'ep:turn-off',
+    'ep:umbrella',
+    'ep:unlock',
+    'ep:upload',
+    'ep:upload-filled',
+    'ep:user',
+    'ep:user-filled',
+    'ep:van',
+    'ep:video-camera',
+    'ep:video-camera-filled',
+    'ep:video-pause',
+    'ep:video-play',
+    'ep:view',
+    'ep:wallet',
+    'ep:wallet-filled',
+    'ep:warn-triangle-filled',
+    'ep:warning',
+    'ep:warning-filled',
+    'ep:watch',
+    'ep:watermelon',
+    'ep:wind-power',
+    'ep:zoom-in',
+    'ep:zoom-out'
+  ]
+}
diff --git a/src/components/IconPicker/src/data/icons.tdesign.ts b/src/components/IconPicker/src/data/icons.tdesign.ts
new file mode 100644
index 0000000..a354f65
--- /dev/null
+++ b/src/components/IconPicker/src/data/icons.tdesign.ts
@@ -0,0 +1,1209 @@
+export default {
+  name: 'TDesign Icons',
+  prefix: 'tdesign',
+  icons: [
+    'tdesign:activity',
+    'tdesign:add',
+    'tdesign:add-and-subtract',
+    'tdesign:add-circle',
+    'tdesign:add-rectangle',
+    'tdesign:address-book',
+    'tdesign:adjustment',
+    'tdesign:airplay-wave',
+    'tdesign:alarm',
+    'tdesign:alarm-add',
+    'tdesign:alarm-off',
+    'tdesign:align-top',
+    'tdesign:align-vertical',
+    'tdesign:alpha',
+    'tdesign:analytics',
+    'tdesign:anchor',
+    'tdesign:angry',
+    'tdesign:animation',
+    'tdesign:animation-1',
+    'tdesign:anticlockwise',
+    'tdesign:api',
+    'tdesign:app',
+    'tdesign:apple',
+    'tdesign:application',
+    'tdesign:architecture-hui-style',
+    'tdesign:archway',
+    'tdesign:archway-1',
+    'tdesign:arrow-down',
+    'tdesign:arrow-down-circle',
+    'tdesign:arrow-down-rectangle',
+    'tdesign:arrow-left',
+    'tdesign:arrow-left-circle',
+    'tdesign:arrow-left-down',
+    'tdesign:arrow-left-down-circle',
+    'tdesign:arrow-left-right-1',
+    'tdesign:arrow-left-right-2',
+    'tdesign:arrow-left-right-3',
+    'tdesign:arrow-left-right-circle',
+    'tdesign:arrow-left-up',
+    'tdesign:arrow-left-up-circle',
+    'tdesign:arrow-right',
+    'tdesign:arrow-right-circle',
+    'tdesign:arrow-right-down',
+    'tdesign:arrow-right-down-circle',
+    'tdesign:arrow-right-up',
+    'tdesign:arrow-right-up-circle',
+    'tdesign:arrow-triangle-down',
+    'tdesign:arrow-triangle-down-filled',
+    'tdesign:arrow-triangle-up',
+    'tdesign:arrow-triangle-up-filled',
+    'tdesign:arrow-up',
+    'tdesign:arrow-up-circle',
+    'tdesign:arrow-up-down-1',
+    'tdesign:arrow-up-down-2',
+    'tdesign:arrow-up-down-3',
+    'tdesign:arrow-up-down-circle',
+    'tdesign:artboard',
+    'tdesign:article',
+    'tdesign:assignment',
+    'tdesign:assignment-checked',
+    'tdesign:assignment-code',
+    'tdesign:assignment-error',
+    'tdesign:assignment-user',
+    'tdesign:attach',
+    'tdesign:attic',
+    'tdesign:attic-1',
+    'tdesign:audio',
+    'tdesign:awkward',
+    'tdesign:backtop',
+    'tdesign:backtop-rectangle',
+    'tdesign:backup',
+    'tdesign:backward',
+    'tdesign:bad-laugh',
+    'tdesign:bamboo-shoot',
+    'tdesign:banana',
+    'tdesign:barbecue',
+    'tdesign:barcode',
+    'tdesign:barcode-1',
+    'tdesign:base-station',
+    'tdesign:battery',
+    'tdesign:battery-add',
+    'tdesign:battery-charging',
+    'tdesign:battery-low',
+    'tdesign:bean',
+    'tdesign:beer',
+    'tdesign:beta',
+    'tdesign:bifurcate',
+    'tdesign:bill',
+    'tdesign:blockchain',
+    'tdesign:bluetooth',
+    'tdesign:bone',
+    'tdesign:book',
+    'tdesign:book-open',
+    'tdesign:bookmark',
+    'tdesign:bookmark-add',
+    'tdesign:bookmark-checked',
+    'tdesign:bookmark-double',
+    'tdesign:bookmark-minus',
+    'tdesign:braces',
+    'tdesign:brackets',
+    'tdesign:bread',
+    'tdesign:bridge',
+    'tdesign:bridge-1',
+    'tdesign:bridge-2',
+    'tdesign:bridge-3',
+    'tdesign:bridge-4',
+    'tdesign:bridge-5',
+    'tdesign:bridge-6',
+    'tdesign:brightness',
+    'tdesign:brightness-1',
+    'tdesign:broccoli',
+    'tdesign:browse',
+    'tdesign:browse-gallery',
+    'tdesign:browse-off',
+    'tdesign:brush',
+    'tdesign:bug',
+    'tdesign:bug-report',
+    'tdesign:building',
+    'tdesign:building-1',
+    'tdesign:building-2',
+    'tdesign:building-3',
+    'tdesign:building-4',
+    'tdesign:building-5',
+    'tdesign:bulletpoint',
+    'tdesign:button',
+    'tdesign:cabbage',
+    'tdesign:cake',
+    'tdesign:calculation',
+    'tdesign:calculation-1',
+    'tdesign:calculator',
+    'tdesign:calculator-1',
+    'tdesign:calendar',
+    'tdesign:calendar-1',
+    'tdesign:calendar-2',
+    'tdesign:calendar-edit',
+    'tdesign:calendar-event',
+    'tdesign:call',
+    'tdesign:call-1',
+    'tdesign:call-cancel',
+    'tdesign:call-forwarded',
+    'tdesign:call-incoming',
+    'tdesign:call-off',
+    'tdesign:calm',
+    'tdesign:calm-1',
+    'tdesign:camera',
+    'tdesign:camera-1',
+    'tdesign:camera-2',
+    'tdesign:camera-off',
+    'tdesign:candy',
+    'tdesign:card',
+    'tdesign:cardmembership',
+    'tdesign:caret-down',
+    'tdesign:caret-down-small',
+    'tdesign:caret-left',
+    'tdesign:caret-left-small',
+    'tdesign:caret-right',
+    'tdesign:caret-right-small',
+    'tdesign:caret-up',
+    'tdesign:caret-up-small',
+    'tdesign:cart',
+    'tdesign:cart-add',
+    'tdesign:cast',
+    'tdesign:castle',
+    'tdesign:castle-1',
+    'tdesign:castle-2',
+    'tdesign:castle-3',
+    'tdesign:castle-4',
+    'tdesign:castle-5',
+    'tdesign:castle-6',
+    'tdesign:castle-7',
+    'tdesign:cat',
+    'tdesign:catalog',
+    'tdesign:cd',
+    'tdesign:celsius',
+    'tdesign:center-focus-strong',
+    'tdesign:centimeter',
+    'tdesign:certificate',
+    'tdesign:certificate-1',
+    'tdesign:chart',
+    'tdesign:chart-3d',
+    'tdesign:chart-add',
+    'tdesign:chart-analytics',
+    'tdesign:chart-area',
+    'tdesign:chart-area-multi',
+    'tdesign:chart-bar',
+    'tdesign:chart-bubble',
+    'tdesign:chart-colum',
+    'tdesign:chart-combo',
+    'tdesign:chart-line',
+    'tdesign:chart-line-data',
+    'tdesign:chart-line-data-1',
+    'tdesign:chart-line-multi',
+    'tdesign:chart-maximum',
+    'tdesign:chart-median',
+    'tdesign:chart-minimum',
+    'tdesign:chart-pie',
+    'tdesign:chart-radar',
+    'tdesign:chart-radial',
+    'tdesign:chart-ring',
+    'tdesign:chart-ring-1',
+    'tdesign:chart-scatter',
+    'tdesign:chart-stacked',
+    'tdesign:chat',
+    'tdesign:chat-add',
+    'tdesign:chat-bubble',
+    'tdesign:chat-bubble-1',
+    'tdesign:chat-bubble-add',
+    'tdesign:chat-bubble-error',
+    'tdesign:chat-bubble-help',
+    'tdesign:chat-bubble-history',
+    'tdesign:chat-bubble-locked',
+    'tdesign:chat-bubble-smile',
+    'tdesign:chat-checked',
+    'tdesign:chat-clear',
+    'tdesign:chat-double',
+    'tdesign:chat-error',
+    'tdesign:chat-heart',
+    'tdesign:chat-message',
+    'tdesign:chat-off',
+    'tdesign:chat-poll',
+    'tdesign:chat-setting',
+    'tdesign:check',
+    'tdesign:check-circle',
+    'tdesign:check-circle-filled',
+    'tdesign:check-double',
+    'tdesign:check-rectangle',
+    'tdesign:check-rectangle-filled',
+    'tdesign:cheese',
+    'tdesign:cherry',
+    'tdesign:chevron-down',
+    'tdesign:chevron-down-circle',
+    'tdesign:chevron-down-double',
+    'tdesign:chevron-down-double-s',
+    'tdesign:chevron-down-rectangle',
+    'tdesign:chevron-down-s',
+    'tdesign:chevron-left',
+    'tdesign:chevron-left-circle',
+    'tdesign:chevron-left-double',
+    'tdesign:chevron-left-double-s',
+    'tdesign:chevron-left-rectangle',
+    'tdesign:chevron-left-s',
+    'tdesign:chevron-right',
+    'tdesign:chevron-right-circle',
+    'tdesign:chevron-right-double',
+    'tdesign:chevron-right-double-s',
+    'tdesign:chevron-right-rectangle',
+    'tdesign:chevron-right-s',
+    'tdesign:chevron-up',
+    'tdesign:chevron-up-circle',
+    'tdesign:chevron-up-double',
+    'tdesign:chevron-up-double-s',
+    'tdesign:chevron-up-rectangle',
+    'tdesign:chevron-up-s',
+    'tdesign:chicken',
+    'tdesign:chili',
+    'tdesign:chimney',
+    'tdesign:chimney-1',
+    'tdesign:chimney-2',
+    'tdesign:chinese-cabbage',
+    'tdesign:church',
+    'tdesign:circle',
+    'tdesign:city',
+    'tdesign:city-1',
+    'tdesign:city-10',
+    'tdesign:city-11',
+    'tdesign:city-12',
+    'tdesign:city-13',
+    'tdesign:city-14',
+    'tdesign:city-15',
+    'tdesign:city-2',
+    'tdesign:city-3',
+    'tdesign:city-4',
+    'tdesign:city-5',
+    'tdesign:city-6',
+    'tdesign:city-7',
+    'tdesign:city-8',
+    'tdesign:city-9',
+    'tdesign:city-ancient',
+    'tdesign:city-ancient-1',
+    'tdesign:city-ancient-2',
+    'tdesign:clear',
+    'tdesign:clear-formatting',
+    'tdesign:clear-formatting-1',
+    'tdesign:close',
+    'tdesign:close-circle',
+    'tdesign:close-circle-filled',
+    'tdesign:close-octagon',
+    'tdesign:close-rectangle',
+    'tdesign:cloud',
+    'tdesign:cloud-download',
+    'tdesign:cloud-upload',
+    'tdesign:cloudy-day',
+    'tdesign:cloudy-night',
+    'tdesign:cloudy-night-rain',
+    'tdesign:cloudy-rain',
+    'tdesign:cloudy-sunny',
+    'tdesign:code',
+    'tdesign:code-1',
+    'tdesign:code-off',
+    'tdesign:cola',
+    'tdesign:collage',
+    'tdesign:collection',
+    'tdesign:color-invert',
+    'tdesign:combination',
+    'tdesign:command',
+    'tdesign:compass',
+    'tdesign:compass-1',
+    'tdesign:component-breadcrumb',
+    'tdesign:component-checkbox',
+    'tdesign:component-divider-horizontal',
+    'tdesign:component-divider-vertical',
+    'tdesign:component-dropdown',
+    'tdesign:component-grid',
+    'tdesign:component-input',
+    'tdesign:component-layout',
+    'tdesign:component-radio',
+    'tdesign:component-space',
+    'tdesign:component-steps',
+    'tdesign:component-switch',
+    'tdesign:constraint',
+    'tdesign:contrast',
+    'tdesign:contrast-1',
+    'tdesign:control-platform',
+    'tdesign:cooperate',
+    'tdesign:coordinate-system',
+    'tdesign:copy',
+    'tdesign:copyright',
+    'tdesign:corn',
+    'tdesign:coupon',
+    'tdesign:course',
+    'tdesign:cpu',
+    'tdesign:crack',
+    'tdesign:creditcard',
+    'tdesign:creditcard-add',
+    'tdesign:creditcard-off',
+    'tdesign:crooked-smile',
+    'tdesign:cry-and-laugh',
+    'tdesign:cry-loudly',
+    'tdesign:css3',
+    'tdesign:cucumber',
+    'tdesign:currency-exchange',
+    'tdesign:cursor',
+    'tdesign:curtain',
+    'tdesign:curve',
+    'tdesign:cut',
+    'tdesign:cut-1',
+    'tdesign:dam',
+    'tdesign:dam-1',
+    'tdesign:dam-2',
+    'tdesign:dam-3',
+    'tdesign:dam-4',
+    'tdesign:dam-5',
+    'tdesign:dam-6',
+    'tdesign:dam-7',
+    'tdesign:dart-board',
+    'tdesign:dashboard',
+    'tdesign:dashboard-1',
+    'tdesign:data',
+    'tdesign:data-base',
+    'tdesign:data-checked',
+    'tdesign:data-display',
+    'tdesign:data-error',
+    'tdesign:data-search',
+    'tdesign:delete',
+    'tdesign:delete-1',
+    'tdesign:delete-time',
+    'tdesign:delta',
+    'tdesign:depressed',
+    'tdesign:desktop',
+    'tdesign:desktop-1',
+    'tdesign:despise',
+    'tdesign:device',
+    'tdesign:discount',
+    'tdesign:discount-filled',
+    'tdesign:dissatisfaction',
+    'tdesign:divide',
+    'tdesign:dividers',
+    'tdesign:dividers-1',
+    'tdesign:doge',
+    'tdesign:double-storey',
+    'tdesign:download',
+    'tdesign:download-1',
+    'tdesign:downscale',
+    'tdesign:drag-drop',
+    'tdesign:drag-move',
+    'tdesign:drink',
+    'tdesign:drumstick',
+    'tdesign:dv',
+    'tdesign:dvd',
+    'tdesign:earphone',
+    'tdesign:earth',
+    'tdesign:edit',
+    'tdesign:edit-1',
+    'tdesign:edit-2',
+    'tdesign:edit-off',
+    'tdesign:education',
+    'tdesign:eggplant',
+    'tdesign:ellipsis',
+    'tdesign:emo-emotional',
+    'tdesign:enter',
+    'tdesign:equal',
+    'tdesign:error',
+    'tdesign:error-circle',
+    'tdesign:error-circle-filled',
+    'tdesign:error-triangle',
+    'tdesign:excited',
+    'tdesign:excited-1',
+    'tdesign:expand-horizontal',
+    'tdesign:expand-vertical',
+    'tdesign:explore',
+    'tdesign:explore-off',
+    'tdesign:exposure',
+    'tdesign:extension',
+    'tdesign:extension-off',
+    'tdesign:face-retouching',
+    'tdesign:fact-check',
+    'tdesign:fahrenheit-scale',
+    'tdesign:feel-at-ease',
+    'tdesign:ferocious',
+    'tdesign:ferris-wheel',
+    'tdesign:file',
+    'tdesign:file-1',
+    'tdesign:file-add',
+    'tdesign:file-add-1',
+    'tdesign:file-attachment',
+    'tdesign:file-blocked',
+    'tdesign:file-code',
+    'tdesign:file-code-1',
+    'tdesign:file-copy',
+    'tdesign:file-download',
+    'tdesign:file-excel',
+    'tdesign:file-export',
+    'tdesign:file-icon',
+    'tdesign:file-image',
+    'tdesign:file-import',
+    'tdesign:file-locked',
+    'tdesign:file-minus',
+    'tdesign:file-music',
+    'tdesign:file-onenote',
+    'tdesign:file-outlook',
+    'tdesign:file-paste',
+    'tdesign:file-pdf',
+    'tdesign:file-powerpoint',
+    'tdesign:file-restore',
+    'tdesign:file-safety',
+    'tdesign:file-search',
+    'tdesign:file-setting',
+    'tdesign:file-teams',
+    'tdesign:file-unknown',
+    'tdesign:file-unlocked',
+    'tdesign:file-word',
+    'tdesign:file-zip',
+    'tdesign:fill-color',
+    'tdesign:fill-color-1',
+    'tdesign:film',
+    'tdesign:film-1',
+    'tdesign:filter',
+    'tdesign:filter-1',
+    'tdesign:filter-2',
+    'tdesign:filter-3',
+    'tdesign:filter-clear',
+    'tdesign:filter-off',
+    'tdesign:fingerprint',
+    'tdesign:fingerprint-1',
+    'tdesign:fingerprint-2',
+    'tdesign:fingerprint-3',
+    'tdesign:fish',
+    'tdesign:flag',
+    'tdesign:flag-1',
+    'tdesign:flag-2',
+    'tdesign:flag-3',
+    'tdesign:flag-4',
+    'tdesign:flashlight',
+    'tdesign:flight-landing',
+    'tdesign:flight-takeoff',
+    'tdesign:flip-smiling-face',
+    'tdesign:flip-to-back',
+    'tdesign:flip-to-front',
+    'tdesign:focus',
+    'tdesign:fog',
+    'tdesign:fog-night',
+    'tdesign:fog-sunny',
+    'tdesign:folder',
+    'tdesign:folder-1',
+    'tdesign:folder-add',
+    'tdesign:folder-add-1',
+    'tdesign:folder-blocked',
+    'tdesign:folder-details',
+    'tdesign:folder-export',
+    'tdesign:folder-import',
+    'tdesign:folder-locked',
+    'tdesign:folder-minus',
+    'tdesign:folder-move',
+    'tdesign:folder-off',
+    'tdesign:folder-open',
+    'tdesign:folder-open-1',
+    'tdesign:folder-search',
+    'tdesign:folder-setting',
+    'tdesign:folder-shared',
+    'tdesign:folder-unlocked',
+    'tdesign:folder-zip',
+    'tdesign:forest',
+    'tdesign:fork',
+    'tdesign:form',
+    'tdesign:format-horizontal-align-bottom',
+    'tdesign:format-horizontal-align-center',
+    'tdesign:format-horizontal-align-top',
+    'tdesign:format-vertical-align-center',
+    'tdesign:format-vertical-align-left',
+    'tdesign:format-vertical-align-right',
+    'tdesign:forward',
+    'tdesign:frame',
+    'tdesign:frame-1',
+    'tdesign:fries',
+    'tdesign:fullscreen',
+    'tdesign:fullscreen-1',
+    'tdesign:fullscreen-2',
+    'tdesign:fullscreen-exit',
+    'tdesign:fullscreen-exit-1',
+    'tdesign:function-curve',
+    'tdesign:functions',
+    'tdesign:functions-1',
+    'tdesign:gamepad',
+    'tdesign:gamepad-1',
+    'tdesign:gamma',
+    'tdesign:garlic',
+    'tdesign:gender-female',
+    'tdesign:gender-male',
+    'tdesign:gesture-applause',
+    'tdesign:gesture-click',
+    'tdesign:gesture-down',
+    'tdesign:gesture-expansion',
+    'tdesign:gesture-left',
+    'tdesign:gesture-left-slip',
+    'tdesign:gesture-pray',
+    'tdesign:gesture-pray-1',
+    'tdesign:gesture-press',
+    'tdesign:gesture-ranslation',
+    'tdesign:gesture-ranslation-1',
+    'tdesign:gesture-right',
+    'tdesign:gesture-right-slip',
+    'tdesign:gesture-slide-up',
+    'tdesign:gesture-up',
+    'tdesign:gesture-up-1',
+    'tdesign:gesture-up-2',
+    'tdesign:gesture-up-and-down',
+    'tdesign:gesture-wipe-down',
+    'tdesign:gift',
+    'tdesign:giggle',
+    'tdesign:git-branch',
+    'tdesign:git-commit',
+    'tdesign:git-merge',
+    'tdesign:git-pull-request',
+    'tdesign:git-repository',
+    'tdesign:git-repository-commits',
+    'tdesign:git-repository-private',
+    'tdesign:gps',
+    'tdesign:grape',
+    'tdesign:greater-than',
+    'tdesign:greater-than-or-equal',
+    'tdesign:green-onion',
+    'tdesign:grid-add',
+    'tdesign:grid-view',
+    'tdesign:guitar',
+    'tdesign:hamburger',
+    'tdesign:happy',
+    'tdesign:hard-disk-storage',
+    'tdesign:hard-drive',
+    'tdesign:hashtag',
+    'tdesign:hd',
+    'tdesign:heart',
+    'tdesign:heart-filled',
+    'tdesign:help',
+    'tdesign:help-circle',
+    'tdesign:help-circle-filled',
+    'tdesign:help-rectangle',
+    'tdesign:highlight',
+    'tdesign:highlight-1',
+    'tdesign:history',
+    'tdesign:history-setting',
+    'tdesign:home',
+    'tdesign:hospital',
+    'tdesign:hospital-1',
+    'tdesign:hotspot-wave',
+    'tdesign:hourglass',
+    'tdesign:houses',
+    'tdesign:houses-1',
+    'tdesign:houses-2',
+    'tdesign:html5',
+    'tdesign:https',
+    'tdesign:ice-cream',
+    'tdesign:icon',
+    'tdesign:image',
+    'tdesign:image-1',
+    'tdesign:image-add',
+    'tdesign:image-edit',
+    'tdesign:image-error',
+    'tdesign:image-off',
+    'tdesign:image-search',
+    'tdesign:indent-left',
+    'tdesign:indent-right',
+    'tdesign:indicator',
+    'tdesign:info-circle',
+    'tdesign:info-circle-filled',
+    'tdesign:ink',
+    'tdesign:install',
+    'tdesign:install-desktop',
+    'tdesign:install-mobile',
+    'tdesign:institution',
+    'tdesign:institution-checked',
+    'tdesign:internet',
+    'tdesign:ipod',
+    'tdesign:joyful',
+    'tdesign:jump',
+    'tdesign:jump-off',
+    'tdesign:keyboard',
+    'tdesign:laptop',
+    'tdesign:layers',
+    'tdesign:layout',
+    'tdesign:leaderboard',
+    'tdesign:lemon',
+    'tdesign:lemon-slice',
+    'tdesign:less-than',
+    'tdesign:less-than-or-equal',
+    'tdesign:letters-a',
+    'tdesign:letters-b',
+    'tdesign:letters-c',
+    'tdesign:letters-d',
+    'tdesign:letters-e',
+    'tdesign:letters-f',
+    'tdesign:letters-g',
+    'tdesign:letters-h',
+    'tdesign:letters-i',
+    'tdesign:letters-j',
+    'tdesign:letters-k',
+    'tdesign:letters-l',
+    'tdesign:letters-m',
+    'tdesign:letters-n',
+    'tdesign:letters-o',
+    'tdesign:letters-p',
+    'tdesign:letters-q',
+    'tdesign:letters-r',
+    'tdesign:letters-s',
+    'tdesign:letters-t',
+    'tdesign:letters-u',
+    'tdesign:letters-v',
+    'tdesign:letters-w',
+    'tdesign:letters-x',
+    'tdesign:letters-y',
+    'tdesign:letters-z',
+    'tdesign:lightbulb',
+    'tdesign:lightbulb-circle',
+    'tdesign:lighthouse',
+    'tdesign:lighthouse-1',
+    'tdesign:lighthouse-2',
+    'tdesign:lighting-circle',
+    'tdesign:line-height',
+    'tdesign:link',
+    'tdesign:link-1',
+    'tdesign:link-unlink',
+    'tdesign:liquor',
+    'tdesign:list',
+    'tdesign:load',
+    'tdesign:loading',
+    'tdesign:location',
+    'tdesign:location-1',
+    'tdesign:location-enlargement',
+    'tdesign:location-error',
+    'tdesign:location-parking-place',
+    'tdesign:location-reduction',
+    'tdesign:location-setting',
+    'tdesign:lock-off',
+    'tdesign:lock-on',
+    'tdesign:lock-time',
+    'tdesign:login',
+    'tdesign:logo-adobe-illustrate',
+    'tdesign:logo-adobe-photoshop',
+    'tdesign:logo-adobe-photoshop-1',
+    'tdesign:logo-android',
+    'tdesign:logo-apple',
+    'tdesign:logo-apple-filled',
+    'tdesign:logo-behance',
+    'tdesign:logo-chrome',
+    'tdesign:logo-chrome-filled',
+    'tdesign:logo-cinema4d',
+    'tdesign:logo-codepen',
+    'tdesign:logo-codesandbox',
+    'tdesign:logo-dribbble',
+    'tdesign:logo-facebook',
+    'tdesign:logo-figma',
+    'tdesign:logo-framer',
+    'tdesign:logo-github',
+    'tdesign:logo-github-filled',
+    'tdesign:logo-gitlab',
+    'tdesign:logo-ie',
+    'tdesign:logo-ie-filled',
+    'tdesign:logo-instagram',
+    'tdesign:logo-qq',
+    'tdesign:logo-twitter',
+    'tdesign:logo-wechat',
+    'tdesign:logo-wechat-stroke',
+    'tdesign:logo-wecom',
+    'tdesign:logo-windows',
+    'tdesign:logo-windows-filled',
+    'tdesign:logo-youtube',
+    'tdesign:logout',
+    'tdesign:look-around',
+    'tdesign:loudspeaker',
+    'tdesign:mail',
+    'tdesign:map',
+    'tdesign:map-3d',
+    'tdesign:map-add',
+    'tdesign:map-aiming',
+    'tdesign:map-blocked',
+    'tdesign:map-bubble',
+    'tdesign:map-cancel',
+    'tdesign:map-chat',
+    'tdesign:map-checked',
+    'tdesign:map-collection',
+    'tdesign:map-connection',
+    'tdesign:map-distance',
+    'tdesign:map-double',
+    'tdesign:map-edit',
+    'tdesign:map-grid',
+    'tdesign:map-information',
+    'tdesign:map-information-1',
+    'tdesign:map-information-2',
+    'tdesign:map-location',
+    'tdesign:map-locked',
+    'tdesign:map-marked',
+    'tdesign:map-navigation',
+    'tdesign:map-outline',
+    'tdesign:map-route-planning',
+    'tdesign:map-ruler',
+    'tdesign:map-safety',
+    'tdesign:map-search',
+    'tdesign:map-search-1',
+    'tdesign:map-setting',
+    'tdesign:map-unlocked',
+    'tdesign:mark-as-unread',
+    'tdesign:markup',
+    'tdesign:mathematics',
+    'tdesign:measurement',
+    'tdesign:measurement-1',
+    'tdesign:measurement-2',
+    'tdesign:meat-pepper',
+    'tdesign:media-library',
+    'tdesign:member',
+    'tdesign:menu',
+    'tdesign:menu-application',
+    'tdesign:menu-fold',
+    'tdesign:menu-unfold',
+    'tdesign:merge-cells',
+    'tdesign:microphone',
+    'tdesign:microphone-1',
+    'tdesign:microphone-2',
+    'tdesign:milk',
+    'tdesign:minus',
+    'tdesign:minus-circle',
+    'tdesign:minus-circle-filled',
+    'tdesign:minus-rectangle',
+    'tdesign:minus-rectangle-filled',
+    'tdesign:mirror',
+    'tdesign:mobile',
+    'tdesign:mobile-blocked',
+    'tdesign:mobile-list',
+    'tdesign:mobile-navigation',
+    'tdesign:mobile-shortcut',
+    'tdesign:mobile-vibrate',
+    'tdesign:mode-dark',
+    'tdesign:mode-light',
+    'tdesign:module',
+    'tdesign:money',
+    'tdesign:monument',
+    'tdesign:moon',
+    'tdesign:moon-fall',
+    'tdesign:moon-rising',
+    'tdesign:more',
+    'tdesign:mosque',
+    'tdesign:mosque-1',
+    'tdesign:mouse',
+    'tdesign:move',
+    'tdesign:move-1',
+    'tdesign:movie-clapper',
+    'tdesign:multiply',
+    'tdesign:museum',
+    'tdesign:museum-1',
+    'tdesign:museum-2',
+    'tdesign:mushroom',
+    'tdesign:mushroom-1',
+    'tdesign:music',
+    'tdesign:music-1',
+    'tdesign:music-2',
+    'tdesign:music-rectangle-add',
+    'tdesign:navigation-arrow',
+    'tdesign:next',
+    'tdesign:no-expression',
+    'tdesign:noodle',
+    'tdesign:notification',
+    'tdesign:notification-add',
+    'tdesign:notification-circle',
+    'tdesign:notification-error',
+    'tdesign:notification-filled',
+    'tdesign:numbers-0',
+    'tdesign:numbers-0-1',
+    'tdesign:numbers-1',
+    'tdesign:numbers-1-1',
+    'tdesign:numbers-2',
+    'tdesign:numbers-2-1',
+    'tdesign:numbers-3',
+    'tdesign:numbers-3-1',
+    'tdesign:numbers-4',
+    'tdesign:numbers-4-1',
+    'tdesign:numbers-5',
+    'tdesign:numbers-5-1',
+    'tdesign:numbers-6',
+    'tdesign:numbers-6-1',
+    'tdesign:numbers-7',
+    'tdesign:numbers-7-1',
+    'tdesign:numbers-8',
+    'tdesign:numbers-8-1',
+    'tdesign:numbers-9',
+    'tdesign:numbers-9-1',
+    'tdesign:nut',
+    'tdesign:object-storage',
+    'tdesign:open-mouth',
+    'tdesign:opera',
+    'tdesign:order-adjustment-column',
+    'tdesign:order-ascending',
+    'tdesign:order-descending',
+    'tdesign:outbox',
+    'tdesign:page-first',
+    'tdesign:page-head',
+    'tdesign:page-last',
+    'tdesign:palace',
+    'tdesign:palace-1',
+    'tdesign:palace-2',
+    'tdesign:palace-3',
+    'tdesign:palace-4',
+    'tdesign:palette',
+    'tdesign:palette-1',
+    'tdesign:panorama-horizontal',
+    'tdesign:panorama-vertical',
+    'tdesign:pantone',
+    'tdesign:parabola',
+    'tdesign:parentheses',
+    'tdesign:paste',
+    'tdesign:patio',
+    'tdesign:pause',
+    'tdesign:pause-circle',
+    'tdesign:pause-circle-filled',
+    'tdesign:pause-circle-stroke',
+    'tdesign:pea',
+    'tdesign:peach',
+    'tdesign:pear',
+    'tdesign:pearl-of-the-orient',
+    'tdesign:pen',
+    'tdesign:pen-ball',
+    'tdesign:pen-brush',
+    'tdesign:pen-mark',
+    'tdesign:pen-quill',
+    'tdesign:pending',
+    'tdesign:percent',
+    'tdesign:personal-information',
+    'tdesign:phone-locked',
+    'tdesign:phone-search',
+    'tdesign:pi',
+    'tdesign:piano',
+    'tdesign:pin',
+    'tdesign:pin-filled',
+    'tdesign:play',
+    'tdesign:play-circle',
+    'tdesign:play-circle-filled',
+    'tdesign:play-circle-stroke',
+    'tdesign:play-circle-stroke-add',
+    'tdesign:play-demo',
+    'tdesign:play-rectangle',
+    'tdesign:plus',
+    'tdesign:popsicle',
+    'tdesign:portrait',
+    'tdesign:pout',
+    'tdesign:poweroff',
+    'tdesign:precise-monitor',
+    'tdesign:previous',
+    'tdesign:print',
+    'tdesign:pumpkin',
+    'tdesign:pyramid',
+    'tdesign:pyramid-maya',
+    'tdesign:qrcode',
+    'tdesign:quadratic',
+    'tdesign:questionnaire',
+    'tdesign:queue',
+    'tdesign:radar',
+    'tdesign:radio-1',
+    'tdesign:radio-2',
+    'tdesign:radish',
+    'tdesign:rain-heavy',
+    'tdesign:rain-light',
+    'tdesign:rain-medium',
+    'tdesign:rainbow',
+    'tdesign:rectangle',
+    'tdesign:refresh',
+    'tdesign:relation',
+    'tdesign:relativity',
+    'tdesign:remote-wave',
+    'tdesign:remove',
+    'tdesign:replay',
+    'tdesign:rice',
+    'tdesign:rice-ball',
+    'tdesign:roast',
+    'tdesign:rocket',
+    'tdesign:rollback',
+    'tdesign:rollfront',
+    'tdesign:root-list',
+    'tdesign:rotate',
+    'tdesign:rotate-locked',
+    'tdesign:rotation',
+    'tdesign:round',
+    'tdesign:router-wave',
+    'tdesign:rss',
+    'tdesign:ruler',
+    'tdesign:sailing-hotel',
+    'tdesign:sandwich',
+    'tdesign:saturation',
+    'tdesign:sausage',
+    'tdesign:save',
+    'tdesign:saving-pot',
+    'tdesign:scan',
+    'tdesign:screen-4k',
+    'tdesign:screencast',
+    'tdesign:screenshot',
+    'tdesign:scroll-bar',
+    'tdesign:sd-card',
+    'tdesign:sd-card-1',
+    'tdesign:search',
+    'tdesign:search-error',
+    'tdesign:secured',
+    'tdesign:send',
+    'tdesign:send-cancel',
+    'tdesign:sensors',
+    'tdesign:sensors-1',
+    'tdesign:sensors-2',
+    'tdesign:sensors-off',
+    'tdesign:serenity',
+    'tdesign:server',
+    'tdesign:service',
+    'tdesign:setting',
+    'tdesign:setting-1',
+    'tdesign:share',
+    'tdesign:share-1',
+    'tdesign:sharpness',
+    'tdesign:shield-error',
+    'tdesign:shimen',
+    'tdesign:shop',
+    'tdesign:shop-1',
+    'tdesign:shop-2',
+    'tdesign:shop-3',
+    'tdesign:shop-4',
+    'tdesign:shop-5',
+    'tdesign:shrimp',
+    'tdesign:shrink-horizontal',
+    'tdesign:shrink-vertical',
+    'tdesign:shutter',
+    'tdesign:shutup',
+    'tdesign:sim-card',
+    'tdesign:sim-card-1',
+    'tdesign:sim-card-2',
+    'tdesign:sinister-smile',
+    'tdesign:sip',
+    'tdesign:slash',
+    'tdesign:sleep',
+    'tdesign:slice',
+    'tdesign:slideshow',
+    'tdesign:smile',
+    'tdesign:sneer',
+    'tdesign:snowflake',
+    'tdesign:sonic',
+    'tdesign:sound',
+    'tdesign:sound-down',
+    'tdesign:sound-high',
+    'tdesign:sound-low',
+    'tdesign:sound-mute',
+    'tdesign:sound-mute-1',
+    'tdesign:sound-up',
+    'tdesign:space',
+    'tdesign:speechless-1',
+    'tdesign:star',
+    'tdesign:star-filled',
+    'tdesign:statue-of-jesus',
+    'tdesign:sticky-note',
+    'tdesign:stop',
+    'tdesign:stop-circle',
+    'tdesign:stop-circle-filled',
+    'tdesign:stop-circle-stroke',
+    'tdesign:store',
+    'tdesign:street-road',
+    'tdesign:street-road-1',
+    'tdesign:subtitle',
+    'tdesign:subway-line',
+    'tdesign:sum',
+    'tdesign:sun-fall',
+    'tdesign:sun-rising',
+    'tdesign:sunny',
+    'tdesign:support',
+    'tdesign:surprised',
+    'tdesign:surprised-1',
+    'tdesign:swap',
+    'tdesign:swap-left',
+    'tdesign:swap-right',
+    'tdesign:swear-1',
+    'tdesign:swear-2',
+    'tdesign:system-2',
+    'tdesign:system-3',
+    'tdesign:system-application',
+    'tdesign:system-blocked',
+    'tdesign:system-code',
+    'tdesign:system-components',
+    'tdesign:system-coordinate',
+    'tdesign:system-device',
+    'tdesign:system-interface',
+    'tdesign:system-location',
+    'tdesign:system-locked',
+    'tdesign:system-log',
+    'tdesign:system-marked',
+    'tdesign:system-messages',
+    'tdesign:system-regulation',
+    'tdesign:system-search',
+    'tdesign:system-setting',
+    'tdesign:system-storage',
+    'tdesign:system-sum',
+    'tdesign:system-unlocked',
+    'tdesign:tab',
+    'tdesign:table',
+    'tdesign:table-1',
+    'tdesign:table-2',
+    'tdesign:table-add',
+    'tdesign:table-split',
+    'tdesign:tag',
+    'tdesign:tangerinr',
+    'tdesign:tape',
+    'tdesign:task',
+    'tdesign:task-1',
+    'tdesign:task-add',
+    'tdesign:task-add-1',
+    'tdesign:task-checked',
+    'tdesign:task-error',
+    'tdesign:task-location',
+    'tdesign:task-marked',
+    'tdesign:task-setting',
+    'tdesign:task-visible',
+    'tdesign:tea',
+    'tdesign:teahouse',
+    'tdesign:template',
+    'tdesign:temple',
+    'tdesign:terminal',
+    'tdesign:terminal-rectangle',
+    'tdesign:terminal-rectangle-1',
+    'tdesign:terminal-window',
+    'tdesign:textbox',
+    'tdesign:textformat-bold',
+    'tdesign:textformat-color',
+    'tdesign:textformat-italic',
+    'tdesign:textformat-strikethrough',
+    'tdesign:textformat-underline',
+    'tdesign:textformat-wrap',
+    'tdesign:theaters',
+    'tdesign:thumb-down',
+    'tdesign:thumb-down-1',
+    'tdesign:thumb-down-2',
+    'tdesign:thumb-up',
+    'tdesign:thumb-up-1',
+    'tdesign:thumb-up-2',
+    'tdesign:thunder',
+    'tdesign:thunderstorm',
+    'tdesign:thunderstorm-night',
+    'tdesign:thunderstorm-sunny',
+    'tdesign:ticket',
+    'tdesign:time',
+    'tdesign:time-filled',
+    'tdesign:tips',
+    'tdesign:tips-double',
+    'tdesign:tomato',
+    'tdesign:tools',
+    'tdesign:tools-circle',
+    'tdesign:tornado',
+    'tdesign:tower',
+    'tdesign:tower-1',
+    'tdesign:tower-2',
+    'tdesign:tower-3',
+    'tdesign:tower-clock',
+    'tdesign:town',
+    'tdesign:traffic',
+    'tdesign:traffic-events',
+    'tdesign:transform',
+    'tdesign:transform-1',
+    'tdesign:transform-2',
+    'tdesign:transform-3',
+    'tdesign:translate',
+    'tdesign:translate-1',
+    'tdesign:tree-list',
+    'tdesign:tree-round-dot',
+    'tdesign:tree-round-dot-vertical',
+    'tdesign:tree-square-dot',
+    'tdesign:tree-square-dot-vertical',
+    'tdesign:trending-down',
+    'tdesign:trending-up',
+    'tdesign:tv',
+    'tdesign:tv-1',
+    'tdesign:tv-2',
+    'tdesign:typography',
+    'tdesign:uncomfortable',
+    'tdesign:uncomfortable-1',
+    'tdesign:uncomfortable-2',
+    'tdesign:undertake',
+    'tdesign:undertake-delivery',
+    'tdesign:undertake-environment-protection',
+    'tdesign:undertake-hold-up',
+    'tdesign:undertake-transaction',
+    'tdesign:unfold-less',
+    'tdesign:unfold-more',
+    'tdesign:unhappy',
+    'tdesign:unhappy-1',
+    'tdesign:uninstall',
+    'tdesign:upload',
+    'tdesign:upload-1',
+    'tdesign:upscale',
+    'tdesign:usb',
+    'tdesign:user',
+    'tdesign:user-1',
+    'tdesign:user-add',
+    'tdesign:user-arrow-down',
+    'tdesign:user-arrow-left',
+    'tdesign:user-arrow-right',
+    'tdesign:user-arrow-up',
+    'tdesign:user-avatar',
+    'tdesign:user-blocked',
+    'tdesign:user-business',
+    'tdesign:user-checked',
+    'tdesign:user-checked-1',
+    'tdesign:user-circle',
+    'tdesign:user-clear',
+    'tdesign:user-error-1',
+    'tdesign:user-invisible',
+    'tdesign:user-list',
+    'tdesign:user-locked',
+    'tdesign:user-marked',
+    'tdesign:user-password',
+    'tdesign:user-safety',
+    'tdesign:user-search',
+    'tdesign:user-setting',
+    'tdesign:user-talk',
+    'tdesign:user-talk-1',
+    'tdesign:user-talk-off-1',
+    'tdesign:user-time',
+    'tdesign:user-transmit',
+    'tdesign:user-unknown',
+    'tdesign:user-unlocked',
+    'tdesign:user-vip',
+    'tdesign:user-visible',
+    'tdesign:usergroup',
+    'tdesign:usergroup-add',
+    'tdesign:usergroup-clear',
+    'tdesign:vehicle',
+    'tdesign:verified',
+    'tdesign:verify',
+    'tdesign:video',
+    'tdesign:video-camera',
+    'tdesign:video-camera-1',
+    'tdesign:video-camera-2',
+    'tdesign:video-camera-dollar',
+    'tdesign:video-camera-minus',
+    'tdesign:video-camera-music',
+    'tdesign:video-camera-off',
+    'tdesign:video-library',
+    'tdesign:view-agenda',
+    'tdesign:view-column',
+    'tdesign:view-in-ar',
+    'tdesign:view-list',
+    'tdesign:view-module',
+    'tdesign:visual-recognition',
+    'tdesign:wallet',
+    'tdesign:watch',
+    'tdesign:watermelon',
+    'tdesign:wave-left',
+    'tdesign:wave-right',
+    'tdesign:wealth',
+    'tdesign:wealth-1',
+    'tdesign:widget',
+    'tdesign:wifi',
+    'tdesign:wifi-1',
+    'tdesign:wifi-off',
+    'tdesign:wifi-off-1',
+    'tdesign:window',
+    'tdesign:window-1',
+    'tdesign:windy',
+    'tdesign:windy-rain',
+    'tdesign:wink',
+    'tdesign:work',
+    'tdesign:work-history',
+    'tdesign:work-off',
+    'tdesign:wry-smile',
+    'tdesign:zoom-in',
+    'tdesign:zoom-out'
+  ]
+}
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 990852e..94a0f4a 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -174,7 +174,8 @@ export default {
     permission: 'Permission test page',
     function: 'Function',
     multipleTabs: 'Multiple tabs',
-    details: 'Details'
+    details: 'Details',
+    iconPicker: 'Icon picker'
   },
   permission: {
     hasPermission: 'Please set the operation permission value'
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 012b94d..66d6b69 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -172,7 +172,8 @@ export default {
     permission: '权限测试页',
     function: '功能',
     multipleTabs: '多开标签页',
-    details: '详情页'
+    details: '详情页',
+    iconPicker: '图标选择器'
   },
   permission: {
     hasPermission: '请设置操作权限值'
diff --git a/src/router/index.ts b/src/router/index.ts
index 06c3b10..669e318 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -271,6 +271,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
           title: t('router.icon')
         }
       },
+      {
+        path: 'icon-picker',
+        component: () => import('@/views/Components/IconPicker.vue'),
+        name: 'IconPicker',
+        meta: {
+          title: t('router.iconPicker')
+        }
+      },
       {
         path: 'echart',
         component: () => import('@/views/Components/Echart.vue'),
diff --git a/src/views/Components/IconPicker.vue b/src/views/Components/IconPicker.vue
new file mode 100644
index 0000000..59fc460
--- /dev/null
+++ b/src/views/Components/IconPicker.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { IconPicker } from '@/components/IconPicker'
+</script>
+
+<template>
+  <IconPicker />
+</template>