feat: auto import icon components

playground/app.vue

@@ -4,7 +4,7 @@
     <t-divider>Basic</t-divider>
     <t-space>
       <t-button>Button</t-button>
-      <t-icon name="cry-and-laugh"></t-icon>
+      <t-icon name="cry-and-laugh" />
     </t-space>
 
     <t-divider>Layout</t-divider>
@@ -23,6 +23,9 @@
     <t-space>
       <edit-icon />
       <edit-1-icon />
+      <icon-font name="sneer" />
+      <icon-font name="unhappy" />
+      <icon name="close" />
     </t-space>
   </div>
 </template>

playground/nuxt.config.ts

@@ -7,6 +7,7 @@ export default defineNuxtConfig({
     // iconInclude: ['Edit1']
     // prefix: 'tdesign'
     // plugins :['DialogPlugin']
+    // iconComponents:['IconFont']
   },
   devtools: { enabled: true }
 });

src/config/icon-components.ts

@@ -0,0 +1,7 @@
+export const iconComponentList = ['Icon', 'IconFont'] as const;
+export type TDesignIconComponent = (typeof iconComponentList)[number];
+
+export const iconComponentMap = {
+  Icon: 'svg-sprite',
+  IconFont: 'iconfont'
+};

src/config/plugins.ts

@@ -1,4 +1,3 @@
 export const pluginList = ['DialogPlugin', 'MessagePlugin', 'NotifyPlugin', 'LoadingPlugin', 'PopupPlugin', 'DrawerPlugin'] as const;
-
-export type TdesignPlugin = typeof pluginList[number];
 // popupPlugin and drawerPlugin is in progress
+export type TdesignPlugin = (typeof pluginList)[number];

src/interface.ts

@@ -1,4 +1,5 @@
-import { TdesignPlugin } from "./config/plugins";
+import { TDesignIconComponent } from './config/icon-components';
+import { TdesignPlugin } from './config/plugins';
 
 // Module options TypeScript interface definition
 export interface ModuleOptions {
@@ -15,7 +16,7 @@ export interface ModuleOptions {
    * exclude component name, if match do not resolve the name
    */
   exclude?: string | RegExp | (string | RegExp)[];
-   /**
+  /**
    * included component, only resolve component which match include
    */
   include?: string | RegExp | (string | RegExp)[];
@@ -37,6 +38,12 @@ export interface ModuleOptions {
    * included icons, only resolve icons which match iconInclude
    */
   iconInclude?: string | RegExp | (string | RegExp)[];
+
+  /**
+   * self-defined import icon component from tdesign-icons-vue-next
+   */
+  iconComponents?: TDesignIconComponent[];
+
   /**
    * self-defined import plugin from tdesign-vue-next
    */

src/module.ts

@@ -1,5 +1,5 @@
 import { defineNuxtModule, createResolver } from '@nuxt/kit';
-import { resolveTDesignComponents, resolveTDesignPlugins, resolveTDesignVariables, resolveTDesignIcons } from './resolvers';
+import { resolveTDesignComponents, resolveTDesignPlugins, resolveTDesignVariables, resolveTDesignIcons, resolveTDesignIconComponents } from './resolvers';
 
 import type { ModuleOptions } from './interface';
 
@@ -17,7 +17,8 @@ export default defineNuxtModule<ModuleOptions>({
     iconPrefix: undefined,
     iconExclude: undefined,
     iconInclude: undefined,
-    plugins: undefined
+    plugins: undefined,
+    iconComponents: undefined
   },
   setup(options: ModuleOptions, nuxt) {
     const resolver = createResolver(import.meta.url);
@@ -31,5 +32,6 @@ export default defineNuxtModule<ModuleOptions>({
     resolveTDesignComponents(options);
     resolveTDesignPlugins(options);
     options.resolveIcons && resolveTDesignIcons(options);
+    resolveTDesignIconComponents(options);
   }
 });

src/resolvers.ts

@@ -6,6 +6,7 @@ import { map, kebabCase } from 'lodash-es';
 import { isMatch } from './utils';
 
 import type { ModuleOptions } from './interface';
+import { iconComponentList, iconComponentMap } from './config/icon-components';
 
 /**
  * auto import components
@@ -62,6 +63,20 @@ export const resolveTDesignIcons = (options: ModuleOptions) => {
   });
 };
 
+/**
+ * auto import icon from tdesign-icons-vue-next
+ */
+export const resolveTDesignIconComponents = (options: ModuleOptions) => {
+  const components = options.iconComponents ?? iconComponentList;
+  components.forEach((component) => {
+    addComponent({
+      name: component,
+      export: component,
+      filePath: `tdesign-icons-vue-next/esm/${iconComponentMap[component]}/index`
+    });
+  });
+};
+
 /**
  * auto import global CSS variables
  */