feat: 优化转换配置、逻辑; 适配 vscode 插件; 适配 unocss ; (#15)

README.md

@@ -1,11 +1,107 @@
 # unplugin-iconify
 
-[![NPM version](https://img.shields.io/npm/v/unplugin-iconify?color=a1b858&label=)](https://www.npmjs.com/package/unplugin-iconify)
-
-Iconify template for [unplugin](https://github.com/unjs/unplugin).
+[![NPM version](https://img.shields.io/npm/v/@waset/unplugin-iconify?color=blue)](https://www.npmjs.com/package/@waset/unplugin-iconify)
 
 ## Install
 
 ```bash
-npm i -D unplugin-iconify
+pnpm i -D @waset/unplugin-iconify
+```
+
+## Configuration
+
+```ts
+Iconify({
+  convert: {
+    icon: './icons',
+    svg: {
+      path: './icons',
+      noColor: true,
+    },
+    suffix: {
+      path: './icons',
+      noColor: true,
+      suffix: 'color',
+    },
+  },
+  output: 'dist/icons', // @default 'node_modules/.unplugin-iconify'
+  iconifyIntelliSense: true, // @default false
+})
+```
+
+- 如果开启 `iconifyIntelliSense`，将自动创建/更新 `.vscode/settings.json` 文件，用于 VSCode 插件 [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify)
+
+- `convert` 选项用于将图标转换为图标集，请查看 `src/core/types.ts` 获取更多类型信息。
+
+## Usage
+
+<details>
+<summary>Vite</summary>
+
+```ts
+// vite.config.ts
+import Iconify from '@waset/unplugin-iconify/vite'
+
+export default defineConfig({
+  plugins: [
+    Iconify({
+      // ...
+    })
+  ],
+})
 ```
+</details>
+
+<details>
+<summary>Nuxt</summary>
+
+```ts
+// nuxt.config.ts
+import { defineNuxtConfig } from 'nuxt/config'
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: [
+    // ...
+    '@waset/unplugin-iconify/nuxt'
+  ],
+  Iconify: {
+    // ...
+  },
+})
+```
+</details>
+
+<details>
+<summary>unocss</summary>
+
+```ts
+// uno.config.ts
+import { UnocssLoader } from '@waset/unplugin-iconify/loader'
+import { defineConfig, presetIcons } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    // ...
+    presetIcons({
+      scale: 1.2,
+      warn: true,
+      extraProperties: {
+        'display': 'inline-block',
+        'vertical-align': 'middle',
+      },
+      collections: {
+        ...UnocssLoader(),
+      },
+    }),
+  ],
+  // ...
+})
+```
+</details>
+
+## Thanks
+
+- [unplugin](https://github.com/unjs/unplugin)
+- [unplugin/unplugin-icons](https://github.com/unplugin/unplugin-icons)
+- [unocss](https://github.com/unocss/unocss)

package.json

@@ -6,9 +6,6 @@
   "description": "",
   "author": "waset <[email protected]>",
   "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
   "homepage": "https://github.com/waset/unplugin-iconify#readme",
   "repository": {
     "type": "git",
@@ -129,6 +126,7 @@
     }
   },
   "dependencies": {
+    "jsonc-parser": "^3.3.1",
     "unplugin": "^1.14.1"
   },
   "devDependencies": {
@@ -150,5 +148,8 @@
     "vitest": "^2.1.3",
     "webpack": "^5.95.0"
   },
-  "pubilc": true
+  "pubilc": true,
+  "publishConfig": {
+    "access": "public"
+  }
 }

playground/vite.config.ts

@@ -1,28 +1,19 @@
 import { defineConfig } from 'vite'
 import Inspect from 'vite-plugin-inspect'
-/**
- *  package.json
- *
- *  "unplugin-iconify": "workspaces:*",
- */
-// import Iconify from '../src/vite'
-import Iconify from '@waset/unplugin-iconify/vite'
+import Iconify from '../src/vite'
 
 export default defineConfig({
   plugins: [
     Inspect(),
     Iconify({
-      convert: [
-        {
+      convert: {
+        svg: {
           path: './icons',
-          prefix: 'icon',
           noColor: true,
         },
-        {
-          path: './icons',
-          prefix: 'icon-color',
-        },
-      ],
-    }) as any,
+        icon: './icons',
+      },
+      iconifyIntelliSense: true,
+    }),
   ],
 })

src/core/convert.ts

@@ -1,25 +1,58 @@
-import type { Convert } from './types'
+import type { Convert, Options } from './types'
 import { existsSync, mkdirSync, writeFileSync } from 'node:fs'
 import { join } from 'node:path'
 import { cwd } from 'node:process'
 import { isEmptyColor, parseColors } from '@iconify/tools/lib/colors/parse'
 import { importDirectory } from '@iconify/tools/lib/import/directory'
 import { runSVGO } from '@iconify/tools/lib/optimise/svgo'
-
 import { cleanupSVG } from '@iconify/tools/lib/svg/cleanup'
 
-export async function Generated(option: Convert): Promise<void> {
-  const { path, out, prefix, noColor } = option
+const SUCCESS_COLOR = '\x1B[32m'
+const RESET_COLOR = '\x1B[0m'
+const NUMBER_COLOR = '\x1B[31m'
+
+/**
+ * 转换多个图表集
+ * @param options 转换配置
+ */
+export async function Generateds(options: Required<Options>): Promise<void> {
+  if (!options.convert) {
+    throw new Error('No convert option')
+  }
+
+  for (const key in options.convert) {
+    await Generated(key, options.convert[key], options.output)
+  }
+
+  // eslint-disable-next-line no-console
+  console.log(`\n${SUCCESS_COLOR} Converted${RESET_COLOR} ${NUMBER_COLOR}${Object.keys(options.convert).length}${RESET_COLOR} ${SUCCESS_COLOR}collections${RESET_COLOR}`)
+}
+
+/**
+ * 转换单个图表集
+ * @param name 图表集名称
+ * @param setting 图表集路径或转换配置
+ * @param output 输出路径
+ */
+export async function Generated(name: string, setting: string | Convert, output: string): Promise<void> {
+  const convert = typeof setting === 'string' ? { path: setting } : { ...setting }
+  const { path, noColor, suffix } = convert
+
   if (!existsSync(path)) {
     throw new Error(`Path ${path} does not exist`)
   }
+
   // Import icons
   const iconSet = await importDirectory(path, {
-    prefix,
+    prefix: name,
+    includeSubDirs: true,
+    keyword: (_, name) => {
+      return `${name}${(suffix) ? `-${suffix}` : ''}`
+    },
   })
 
   // Validate, clean up, fix palette and optimise
-  await iconSet.forEach(async (name, type) => {
+  iconSet.forEach(async (name, type) => {
     if (type !== 'icon')
       return
 
@@ -58,14 +91,14 @@ export async function Generated(option: Convert): Promise<void> {
   const exported = `${JSON.stringify(iconSet.export(), null, '\t')}\n`
 
   // 构建 manifest 文件路径
-  const srcDir = join(cwd(), out || 'temp/icons')
-  if (!existsSync(srcDir)) {
-    mkdirSync(srcDir, { recursive: true })
+  const out_dir = join(cwd(), output)
+  if (!existsSync(out_dir)) {
+    mkdirSync(out_dir, { recursive: true })
   }
 
   // Save to file
-  writeFileSync(`${srcDir}/${iconSet.prefix}.json`, exported, 'utf8')
+  writeFileSync(`${out_dir}/${iconSet.prefix}.json`, exported, 'utf8')
 
   // eslint-disable-next-line no-console
-  console.log(`\x1B[32m Imported icons: \x1B[0m \x1B[31m ${Object.keys(iconSet.entries).length} \x1B[0m`)
+  console.log(`${SUCCESS_COLOR} Imported ${name}: ${RESET_COLOR}${NUMBER_COLOR}${Object.keys(iconSet.entries).length}${RESET_COLOR}`)
 }