wip: IconPicker 开发中

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',

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",

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()

src/components/IconPicker/index.ts

@@ -0,0 +1,3 @@
+import IconPicker from './src/IconPicker.vue'
+
+export { IconPicker }

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>