iconfont-cli · ZaneL1u · Dec 12, 2021 · Dec 12, 2021 · Dec 15, 2021 · Dec 15, 2021
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,11 @@
 node_modules/
 *.log
-.idea/
 build/
 /iconfont.json
-.DS_Store
+
+# macOS
+.DS_Store
+
+# IDE
+.idea/
+.vscode/launch.json
diff --git a/README.md b/README.md
@@ -20,6 +20,8 @@
 4、支持自定义颜色
 <br>
 5、支持es6和typescript两种模式
+<br>
+6、支持vue/react（v3.3.0版本以上）
 
 # Step 1
 安装插件
@@ -49,6 +51,7 @@ npx iconfont-init
   "symbol_url": "请参考README.md，复制 http://iconfont.cn 官网提供的JS链接",
   "save_dir": "./src/components/iconfont",
   "use_typescript": false,
+  "lang":"react",
   "platforms": "*",
   "use_rpx": true,
   "trim_icon_prefix": "icon",
@@ -72,6 +75,17 @@ npx iconfont-init
 
 当该值为false时，我们会为您的图标生成`.js`和`.d.ts`两个文件，以便您能享受到最好的开发体验。
 
+### lang
+`v3.3.0`以上版本支持Vue，React。如果您的项目使用Vue编写，请设置为"Vue"。这个选项将决定生成的图标组件是`.jsx/.tsx`还是`.vue`组件。
+
+```json5
+{
+  // 选择你需要的语言
+  // 说明 =>  react: React | vue: Vue
+  "lang": "react" 或 "vue",
+}
+```
+
 ### platforms
 选择需要支持的平台，默认是`*`，意味着所有平台都需要支持（如果有）。如果你只想支持部分平台，也可以设置成数组：
 ```json5
@@ -124,6 +138,9 @@ export default {
 
 # 使用
 在Page中使用图标
+
+React：
+
 ```jsx harmony
 import React, { Component } from 'react';
 import IconFont from '../components/iconfont';
@@ -136,7 +153,20 @@ class App extends Component {
 
 export default App;
 ```
+Vue：
+```vue
+<template>
+	<iconfont name="alipay"></iconfont>
+</template>
+
+<script lang="ts" setup>
+	import Iconfont from "@/components/iconfont/Index.vue";
+</script>
+
+```
+
 更多用法：
+
 ```jsx harmony
 // 原色彩
 <IconFont name="alipay" />

diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@tarojs/taro": "^3.0.8"
   },
   "dependencies": {
+    "@types/http-proxy": "^1.17.7",
     "colors": "^1.4.0",
     "fs-extra": "^8.1.0",
     "iconfont-parser": "^1.0.0",
@@ -22,6 +23,7 @@
     "mkdirp": "^0.5.1",
     "react-iconfont-cli": "2.0.2",
     "react-native-iconfont-cli": "2.2.4",
+    "vue-iconfonts-cli": "^1.0.5",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
@@ -37,6 +39,8 @@
     "react-native": "^0.65.1",
     "react-native-svg": "^9.9.4",
     "ts-node": "^8.4.1",
-    "typescript": "^3.6.3"
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.3",
+    "vue": "^2.6.14"
   }
-}
+}
diff --git a/scripts/config/iconfont-js.json b/scripts/config/iconfont-js.json
@@ -2,6 +2,7 @@
   "symbol_url": "http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js",
   "use_typescript": false,
   "platforms": "*",
+  "lang": "react",
   "use_rpx": true,
   "design_width": 720,
   "save_dir": "./snapshots/iconfont-js",

diff --git a/src/commands/index.ts b/src/commands/index.ts
@@ -8,14 +8,15 @@ import mkdirp from 'mkdirp';
 import { getConfig } from '../libs/getConfig';
 import { fetchXml } from 'iconfont-parser';
 import { PLATFORM_MAP } from '../libs/maps';
-import { filterMiniProgramConfig, filterReactNativeConfig, filterReactWebConfig } from '../libs/filterConfig';
+import { filterMiniProgramConfig, filterReactNativeConfig, filterH5WebConfig } from '../libs/filterConfig';
 import { generateUsingComponent } from '../libs/generateUsingComponent';
 import { getIconNames } from '../libs/getIconNames';
 
 const basePath = path.join(__dirname, '..');
 const miniProgramBasePath = 'node_modules/mini-program-iconfont-cli';
 const reactNativeBasePath = 'node_modules/react-native-iconfont-cli';
 const reactWebBasePath = 'node_modules/react-iconfont-cli';
+const vueWebBasePath = 'node_modules/vue-iconfonts-cli';
 const miniProgramDir = fs.existsSync(path.join(basePath, miniProgramBasePath))
   ? path.join(basePath, miniProgramBasePath)
   : path.resolve(miniProgramBasePath);
@@ -25,9 +26,13 @@ const reactNativeDir = fs.existsSync(path.join(basePath, reactNativeBasePath))
 const reactWebDir = fs.existsSync(path.join(basePath, reactWebBasePath))
   ? path.join(basePath, reactWebBasePath)
   : path.resolve(reactWebBasePath);
+const vueWebDir = fs.existsSync(path.join(basePath, vueWebBasePath))
+  ? path.join(basePath, vueWebBasePath)
+  : path.resolve(vueWebBasePath);
 
 const config = getConfig();
 
+const isVue = config.lang === 'vue' && !config.use_typescript;
 fetchXml(config.symbol_url).then((result) => {
   if (!config.platforms.length) {
     console.warn(`\nPlatform is required.\n`);
@@ -75,15 +80,24 @@ fetchXml(config.symbol_url).then((result) => {
         fs.unlinkSync(rnFilePath);
       });
     } else {
-      execFile = execFile.replace(/react-iconfont-cli/, reactWebDir);
-      require(execFile)[execMethod](result, filterReactWebConfig(config, platform));
+      let langReg = /react-iconfont-cli/;
+      if (isVue) {
+        execFile = 'vue-iconfonts-cli/libs/generateComponent';
+        langReg = /vue-iconfonts-cli/;
+      }
+      execFile = execFile.replace(langReg, isVue ? vueWebDir : reactWebDir);
+      require(execFile)[execMethod](result, filterH5WebConfig(config, platform));
 
       // Remove .d.ts files
       glob.sync(path.resolve(config.save_dir, platform, '*.d.ts')).map((h5FilePath) => {
         fs.unlinkSync(h5FilePath);
       });
     }
 
+    if (platform && isVue) {
+      platform = platform + '-vue';
+    }
+
     generateUsingComponent(config, iconNames, platform);
   });
 }).catch((e) => {

diff --git a/src/libs/filterConfig.ts b/src/libs/filterConfig.ts
@@ -21,7 +21,7 @@ export const filterReactNativeConfig = (config: Config, platform: string) => {
   };
 };
 
-export const filterReactWebConfig = (config: Config, platform: string) => {
+export const filterH5WebConfig = (config: Config, platform: string) => {
   return {
     symbol_url: config.symbol_url,
     use_typescript: config.use_typescript,

diff --git a/src/libs/generateUsingComponent.ts b/src/libs/generateUsingComponent.ts
@@ -21,7 +21,7 @@ export const generateUsingComponent = (config: Config, names: string[], platform
     if (fs.existsSync(path.join(__dirname, '../templates/index.' + platform + jsxExtension + '.template'))) {
       iconFile = getTemplate('index.' + platform + jsxExtension);
     } else {
-      iconFile = getTemplate('index.platform' + jsxExtension);
+      iconFile = getTemplate(`index.platform${(platform && platform.includes("-vue")) ? "-vue" : ""}` + jsxExtension);
     }
   } else {
     iconFile = getTemplate('index' + jsxExtension);
@@ -30,7 +30,7 @@ export const generateUsingComponent = (config: Config, names: string[], platform
   iconFile = replaceNames(iconFile, names);
   iconFile = replaceSize(iconFile, config.default_icon_size);
 
-  if(platform === 'h5' && config.use_rpx) {
+  if (platform === 'h5' && config.use_rpx) {
     let designWidth = config.design_width || 750
     iconFile = replaceDesignWidth(iconFile, designWidth);
   }
@@ -54,5 +54,10 @@ export const generateUsingComponent = (config: Config, names: string[], platform
   fs.writeFileSync(path.join(saveDir, 'helper.js'), helperFile);
   fs.writeFileSync(path.join(saveDir, 'helper.d.ts'), getTemplate('helper.d.ts'));
 
+  if (platform && platform.includes("-vue")) {
+    platform = platform.replace(/-vue/, "");
+    fs.writeFileSync(path.join(saveDir, "shims.d.ts"), getTemplate('shims.d.ts'));
+  }
+
   fs.writeFileSync(path.join(saveDir, 'index' + (platform ? `.${platform}` : '') + jsxExtension), iconFile);
 };
diff --git a/src/libs/getConfig.ts b/src/libs/getConfig.ts
@@ -10,6 +10,7 @@ export interface Config {
   save_dir: string;
   use_typescript: boolean;
   platforms: string[];
+  lang?: "vue" | "react";
   use_rpx: boolean;
   design_width: string | number;
   trim_icon_prefix: string;

diff --git a/src/libs/iconfont.json b/src/libs/iconfont.json
@@ -3,6 +3,7 @@
   "save_dir": "./src/components/iconfont",
   "use_typescript": false,
   "platforms": "*",
+  "lang": "vue",
   "use_rpx": true,
   "trim_icon_prefix": "icon",
   "default_icon_size": 18,

diff --git a/src/libs/replace.ts b/src/libs/replace.ts
@@ -27,6 +27,6 @@ export const replaceRelativePath = (content: string, saveDir: string) => {
   const relativePath = path
     .relative(path.resolve('src'), path.resolve(saveDir))
     // To resolve the path separator on windows
-    .replace('\\', '/');
+    .replace(/\\/g, '/');
   return content.replace(/#relativePath#/g, relativePath);
 };
diff --git a/src/templates/index.h5-vue.js.template b/src/templates/index.h5-vue.js.template
@@ -0,0 +1,3 @@
+import Icon from "./h5/Index.vue";
+
+export default Icon;
diff --git a/src/templates/index.h5-vue.tsx.template b/src/templates/index.h5-vue.tsx.template
@@ -0,0 +1,3 @@
+import Icon from "./h5/Index.vue";
+
+export default Icon;
diff --git a/src/templates/index.platform-vue.js.template b/src/templates/index.platform-vue.js.template
@@ -0,0 +1,3 @@
+import Icon from "./h5/Index.vue";
+
+export default Icon;
diff --git a/src/templates/index.platform-vue.tsx.template b/src/templates/index.platform-vue.tsx.template
@@ -0,0 +1,3 @@
+import Icon from "./h5/Index.vue";
+
+export default Icon;
diff --git a/src/templates/shims.d.ts.template b/src/templates/shims.d.ts.template
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+    import { ComponentOptions } from 'vue'
+    const componentOptions: ComponentOptions
+    export default componentOptions
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es5",
     "module": "commonjs",
-    "lib": ["esnext"],
+    "lib": ["esnext", "es2021.String"],
     "allowJs": false,
     "declaration": true,
     "removeComments": false,
@@ -30,8 +30,5 @@
     "resolveJsonModule": true,
     "skipLibCheck": true
   },
-  "exclude": [
-    "./snapshots/",
-    "./build/"
-  ]
+  "exclude": ["./snapshots/", "./build/"]
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Icon from "./h5/Index.vue";

		export default Icon;