fix: refine types and jsdoc

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+  "eslint.enable": true,
   "prettier.enable": true,
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",

docs/package.json

@@ -10,8 +10,8 @@
   "devDependencies": {
     "@goy/vuepress-plugin-svg-icons": "workspace:*",
     "@vuepress/bundler-vite": "^2.0.0-rc.18",
-    "@vuepress/plugin-shiki": "^2.0.0-rc.57",
-    "@vuepress/theme-default": "^2.0.0-rc.58",
-    "sass-embedded": "^1.80.4"
+    "@vuepress/plugin-shiki": "^2.0.0-rc.60",
+    "@vuepress/theme-default": "^2.0.0-rc.60",
+    "sass-embedded": "^1.81.0"
   }
 }

package.json

@@ -2,7 +2,7 @@
   "name": "@goy/vuepress-plugin-svg-icons",
   "type": "module",
   "version": "5.6.0",
-  "packageManager": "pnpm@9.12.2",
+  "packageManager": "pnpm@9.13.2",
   "description": "SVG sprite icon plugin for VuePress",
   "keywords": [
     "vuepress-plugin",
@@ -17,10 +17,10 @@
     "email": "ntnyq13@gmail.com"
   },
   "homepage": "https://vp-icon.ntnyq.com",
+  "repository": "ntnyq/vuepress-plugin-svg-icons",
   "bugs": {
     "url": "https://github.com/ntnyq/vuepress-plugin-svg-icons/issues"
   },
-  "repository": "ntnyq/vuepress-plugin-svg-icons",
   "exports": {
     ".": "./dist/node/index.js",
     "./client": "./dist/client/index.js",
@@ -32,6 +32,9 @@
   "files": [
     "dist"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "build": "run-s clean build:lib copy",
     "build:docs": "pnpm -C docs run build",
@@ -54,26 +57,23 @@
     "vue": "^3.5.12"
   },
   "devDependencies": {
-    "@ntnyq/eslint-config": "^3.1.1",
+    "@ntnyq/eslint-config": "^3.2.2",
     "@ntnyq/prettier-config": "^1.21.3",
-    "@types/node": "^22.8.1",
+    "@types/node": "^22.9.0",
     "copyfiles": "^2.4.1",
-    "eslint": "^9.13.0",
+    "eslint": "^9.14.0",
     "husky": "^9.1.6",
     "nano-staged": "^0.8.0",
     "npm-run-all2": "^7.0.1",
-    "pnpm": "^9.12.2",
+    "pnpm": "^9.13.2",
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
-    "tsc-watch": "^6.2.0",
+    "tsc-watch": "^6.2.1",
     "typescript": "^5.6.3",
     "vuepress": "^2.0.0-rc.18"
   },
   "prettier": "@ntnyq/prettier-config",
   "nano-staged": {
     "*.{js,ts,cjs,mjs,vue,yaml,yml,md,json}": "eslint --fix"
-  },
-  "publishConfig": {
-    "access": "public"
   }
 }

src/client/components/Icon.ts

@@ -1,25 +1,31 @@
 import { defineComponent, h } from 'vue'
+import type { ExtractPropTypes } from 'vue'
 
-export const Icon = defineComponent({
-  name: 'VpIcon',
+export const iconProps = {
+  name: {
+    type: String,
+    required: true,
+  },
 
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
+  color: {
+    type: String,
+  },
 
-    color: {
-      type: String,
-    },
+  size: {
+    type: String,
+  },
 
-    size: {
-      type: String,
-    },
+  prefix: {
+    type: String,
+    required: true,
+  },
+} as const
+
+export type IconProps = ExtractPropTypes<typeof iconProps>
 
-    prefix: {
-      type: String,
-    },
+export const Icon = defineComponent({
+  props: {
+    ...iconProps,
   },
 
   setup(props) {

src/client/components/Sprites.ts

@@ -1,17 +1,11 @@
 import { SVGIconsData } from '@vuepress/plugin-svg-icons/data'
 import { defineComponent, h } from 'vue'
 
-export const Sprites = defineComponent({
-  name: 'VpIconSprites',
-
-  setup() {
-    return () =>
-      h('div', {
-        style: 'display: none;',
-        'data-name': '__VUEPRESS_PLUGIN_SVG_ICONS__',
-        innerHTML: SVGIconsData,
-      })
-  },
-})
-
-export default Sprites
+export const Sprites = defineComponent(
+  () => () =>
+    h('div', {
+      style: 'display: none;',
+      'data-name': '__VUEPRESS_PLUGIN_SVG_ICONS__',
+      innerHTML: SVGIconsData,
+    }),
+)

src/client/config.ts

@@ -3,16 +3,22 @@ import { h } from 'vue'
 import { defineClientConfig } from 'vuepress/client'
 import { Icon, Sprites } from './components/index.js'
 import type { SvgIconPropsOptions } from '../shared/index.js'
+import type { IconProps } from './components/index.js'
 
 declare const __SVG_ICON_ID_PREFIX__: string
 declare const __SVG_ICON_COMPONENT_NAME__: string
 declare const __SVG_ICON_DEFAULT_PROPS_OPTIONS__: SvgIconPropsOptions
 
 const defaultPropsOptions = __SVG_ICON_DEFAULT_PROPS_OPTIONS__
 
+/**
+ * Prefix is a constant value
+ */
+export type IconPropsWithoutPrefix = Omit<IconProps, 'prefix'>
+
 export default defineClientConfig({
   enhance: ({ app }) => {
-    app.component(__SVG_ICON_COMPONENT_NAME__, (props: SvgIconPropsOptions) =>
+    app.component(__SVG_ICON_COMPONENT_NAME__, (props: IconPropsWithoutPrefix) =>
       h(Icon, {
         ...defaultPropsOptions,
         ...props,

src/node/svgIconPlugin.ts

@@ -1,14 +1,38 @@
 import { fs, getDirname, path } from 'vuepress/utils'
 import { getSVGIconsData } from './utils.js'
 import type { Plugin } from 'vuepress'
+import type { SvgIconPropsOptions } from '../shared/index.js'
 
 const __dirname = getDirname(import.meta.url)
 
 export interface SvgIconPluginOptions {
+  /**
+   * svg files directory based on source dir
+   *
+   * @default `icons`
+   */
   svgsDir?: string
+
+  /**
+   * icon id prefix
+   *
+   * @default `vp_icon_`
+   */
   iconIdPrefix?: string
+
+  /**
+   * icon component name
+   *
+   * @default `VpIcon`
+   */
   componentName?: string
-  defaultPropsOptions?: Record<string, any>
+
+  /**
+   * default props for icon component
+   *
+   * @default {}
+   */
+  defaultPropsOptions?: SvgIconPropsOptions
 }
 
 export const svgIconPlugin = (options: SvgIconPluginOptions = {}): Plugin => {

src/node/utils.ts

@@ -2,7 +2,10 @@ import path from 'node:path'
 import svgMixer from 'svg-mixer'
 
 interface SvgSpritesOptions {
-  prefix?: string
+  /**
+   * Svg symbol's id prefix
+   */
+  prefix: string
 }
 
 /**
@@ -15,16 +18,6 @@ interface SvgSpritesOptions {
  */
 const generateSymbolId = (file: string, prefix: string) => prefix + path.basename(file, '.svg')
 
-/**
- * Config to generate svg sprite data
- */
-const spriteConfig = {
-  filename: '',
-  usages: false,
-  spacing: 0,
-  attrs: { 'arial-hidden': 'true' },
-}
-
 /**
  * Generate svg sprite data
  *
@@ -33,11 +26,16 @@ const spriteConfig = {
  *
  * @returns svg sprite data
  */
-export async function getSVGIconsData(path: string, options: SvgSpritesOptions = {}) {
+export async function getSVGIconsData(path: string, options: SvgSpritesOptions) {
   // @ts-expect-error svg-mixer is not typed properly
   const result = await svgMixer(`${path}/*.svg`, {
-    generateSymbolId: path => generateSymbolId(path, options.prefix!),
-    spriteConfig,
+    generateSymbolId: path => generateSymbolId(path, options.prefix),
+    spriteConfig: {
+      filename: '',
+      usages: false,
+      spacing: 0,
+      attrs: { 'arial-hidden': 'true' },
+    },
   })
 
   return result.content

src/shared/types.ts

@@ -1,6 +1,11 @@
 export interface SvgIconPropsOptions {
-  name: string
+  /**
+   * icon svg font-size
+   */
   size?: string
+
+  /**
+   * icon svg fill color
+   */
   color?: string
-  prefix?: string
 }