@sj-distributor/react-iconfont-cli 2.3.0 → 2.4.1

package/README.md

@@ -1,3 +1,5 @@
+> 这个存储库是 原始存储库名称 [react-iconfont-cli](https://github.com/iconfont-cli/react-iconfont-cli) 的一个分支，它已经有一段时间没有被积极维护。我们已经决定接管这个项目的维护，以保持它的活力和改善它的功能。我们致力于引入新特性、修复现有问题，并与社区紧密合作，确保这个库能够满足开发者的需求。
+
 ## react-iconfont-cli
 
 用纯 JS 把 iconfont.cn 的图标转换成 React 组件，不依赖字体，支持多色彩

package/commands/createIcon.js

@@ -4,12 +4,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var colors_1 = tslib_1.__importDefault(require("colors"));
 var getConfig_1 = require("../libs/getConfig");
-var iconfont_parser_1 = require("iconfont-parser");
 var generateComponent_1 = require("../libs/generateComponent");
-var config = getConfig_1.getConfig();
-iconfont_parser_1.fetchXml(config.symbol_url).then(function (result) {
-    generateComponent_1.generateComponent(result, config);
-}).catch(function (e) {
-    console.error(colors_1.default.red(e.message || 'Unknown Error'));
-    process.exit(1);
-});
+var axios_1 = tslib_1.__importDefault(require("axios"));
+var xml2js_1 = require("xml2js");
+var config = (0, getConfig_1.getConfig)();
+var fetchXmlAndGenerateComponent = function (url) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+    var data, matches_1, result, e_1, errorText;
+    return tslib_1.__generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                console.log('Fetching iconfont data...');
+                _a.label = 1;
+            case 1:
+                _a.trys.push([1, 4, , 5]);
+                return [4 /*yield*/, axios_1.default.get(url)];
+            case 2:
+                data = (_a.sent()).data;
+                matches_1 = String(data).match(/'<svg>(.+?)<\/svg>'/);
+                if (!matches_1)
+                    throw new Error('You provide a wrong symbol url');
+                return [4 /*yield*/, new Promise(function (resolve, reject) {
+                        (0, xml2js_1.parseString)("<svg>".concat(matches_1[1], "</svg>"), { rootName: 'svg' }, function (err, result) {
+                            err ? reject(err) : resolve(result);
+                        });
+                    })];
+            case 3:
+                result = _a.sent();
+                (0, generateComponent_1.generateComponent)(result, config);
+                return [3 /*break*/, 5];
+            case 4:
+                e_1 = _a.sent();
+                errorText = e_1 instanceof Error ? e_1.message : 'Unknown Error';
+                console.error(colors_1.default.red(errorText));
+                process.exit(1);
+                return [3 /*break*/, 5];
+            case 5: return [2 /*return*/];
+        }
+    });
+}); };
+fetchXmlAndGenerateComponent(config.symbol_url);

package/commands/types.d.ts

@@ -0,0 +1,17 @@
+export interface XmlData {
+    svg: {
+        symbol: Array<{
+            $: {
+                viewBox: string;
+                id: string;
+            };
+            path: Array<{
+                $: {
+                    d: string;
+                    fill?: string;
+                    'fill-opacity'?: number;
+                };
+            }>;
+        }>;
+    };
+}

package/commands/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/libs/copyTemplate.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.copyTemplate = void 0;
 var tslib_1 = require("tslib");
 var fs_1 = tslib_1.__importDefault(require("fs"));
 var path_1 = tslib_1.__importDefault(require("path"));
-exports.copyTemplate = function (fromFile, toFile) {
-    return fs_1.default.copyFileSync(path_1.default.join(__dirname, "../templates/" + fromFile + ".template"), toFile);
+var copyTemplate = function (fromFile, toFile) {
+    return fs_1.default.copyFileSync(path_1.default.join(__dirname, "../templates/".concat(fromFile, ".template")), toFile);
 };
+exports.copyTemplate = copyTemplate;

package/libs/generateComponent.d.ts

@@ -1,3 +1,3 @@
-import { XmlData } from "iconfont-parser";
 import { Config } from "./getConfig";
+import type { XmlData } from '../commands/types';
 export declare const generateComponent: (data: XmlData, config: Config) => void;

package/libs/generateComponent.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateComponent = void 0;
 var tslib_1 = require("tslib");
 var fs_1 = tslib_1.__importDefault(require("fs"));
 var path_1 = tslib_1.__importDefault(require("path"));
@@ -12,7 +13,7 @@ var replace_1 = require("./replace");
 var whitespace_1 = require("./whitespace");
 var copyTemplate_1 = require("./copyTemplate");
 var ATTRIBUTE_FILL_MAP = ["path"];
-exports.generateComponent = function (data, config) {
+var generateComponent = function (data, config) {
     var names = [];
     var imports = [];
     var saveDir = path_1.default.resolve(config.save_dir);
@@ -21,64 +22,65 @@ exports.generateComponent = function (data, config) {
     var cases = "";
     mkdirp_1.default.sync(saveDir);
     glob_1.default.sync(path_1.default.join(saveDir, "*")).forEach(function (file) { return fs_1.default.unlinkSync(file); });
-    copyTemplate_1.copyTemplate("helper" + jsExtension, path_1.default.join(saveDir, "helper" + jsExtension));
+    (0, copyTemplate_1.copyTemplate)("helper".concat(jsExtension), path_1.default.join(saveDir, "helper".concat(jsExtension)));
     if (!config.use_typescript) {
-        copyTemplate_1.copyTemplate("helper.d.ts", path_1.default.join(saveDir, "helper.d.ts"));
+        (0, copyTemplate_1.copyTemplate)("helper.d.ts", path_1.default.join(saveDir, "helper.d.ts"));
     }
     data.svg.symbol.forEach(function (item) {
         var singleFile;
         var iconId = item.$.id;
         var iconIdAfterTrim = config.trim_icon_prefix
-            ? iconId.replace(new RegExp("^" + config.trim_icon_prefix + "(.+?)$"), function (_, value) { return value.replace(/^[-_.=+#@!~*]+(.+?)$/, "$1"); })
+            ? iconId.replace(new RegExp("^".concat(config.trim_icon_prefix, "(.+?)$")), function (_, value) { return value.replace(/^[-_.=+#@!~*]+(.+?)$/, "$1"); })
             : iconId;
-        var componentName = lodash_1.upperFirst(lodash_1.camelCase(iconId));
+        var componentName = (0, lodash_1.upperFirst)((0, lodash_1.camelCase)(iconId));
         names.push(iconIdAfterTrim);
-        cases += whitespace_1.whitespace(4) + "case '" + iconIdAfterTrim + "':\n";
+        cases += "".concat((0, whitespace_1.whitespace)(4), "case '").concat(iconIdAfterTrim, "':\n");
         imports.push(componentName);
-        cases += whitespace_1.whitespace(6) + "return <" + componentName + " {...rest} />;\n";
-        singleFile = getTemplate_1.getTemplate("SingleIcon" + jsxExtension);
-        singleFile = replace_1.replaceSize(singleFile, config.default_icon_size);
+        cases += "".concat((0, whitespace_1.whitespace)(6), "return <").concat(componentName, " {...rest} />;\n");
+        singleFile = (0, getTemplate_1.getTemplate)("SingleIcon" + jsxExtension);
+        singleFile = (0, replace_1.replaceSize)(singleFile, config.default_icon_size);
         if (jsxExtension === ".tsx") {
-            singleFile = replace_1.replaceReactName(singleFile, config.can_import_react);
+            singleFile = (0, replace_1.replaceReactName)(singleFile, config.can_import_react);
         }
-        singleFile = replace_1.replaceComponentName(singleFile, componentName);
-        singleFile = replace_1.replaceSingleIconContent(singleFile, generateCase(item, 4));
-        singleFile = replace_1.replaceSizeUnit(singleFile, config.unit);
+        singleFile = (0, replace_1.replaceComponentName)(singleFile, componentName);
+        singleFile = (0, replace_1.replaceSingleIconContent)(singleFile, generateCase(item, 4));
+        singleFile = (0, replace_1.replaceSizeUnit)(singleFile, config.unit);
         fs_1.default.writeFileSync(path_1.default.join(saveDir, componentName + jsxExtension), singleFile);
         if (!config.use_typescript) {
-            var typeDefinitionFile = getTemplate_1.getTemplate("SingleIcon.d.ts");
-            typeDefinitionFile = replace_1.replaceComponentName(typeDefinitionFile, componentName);
+            var typeDefinitionFile = (0, getTemplate_1.getTemplate)("SingleIcon.d.ts");
+            typeDefinitionFile = (0, replace_1.replaceComponentName)(typeDefinitionFile, componentName);
             fs_1.default.writeFileSync(path_1.default.join(saveDir, componentName + ".d.ts"), typeDefinitionFile);
         }
-        console.log(colors_1.default.green("√") + " Generated icon \"" + colors_1.default.yellow(iconId) + "\"");
+        console.log("".concat(colors_1.default.green("√"), " Generated icon \"").concat(colors_1.default.yellow(iconId), "\""));
     });
-    var iconFile = getTemplate_1.getTemplate("Icon" + jsxExtension);
-    iconFile = replace_1.replaceCases(iconFile, cases);
-    iconFile = replace_1.replaceImports(iconFile, imports);
-    iconFile = replace_1.replaceExports(iconFile, imports);
-    iconFile = replace_1.replaceReactName(iconFile, config.can_import_react);
+    var iconFile = (0, getTemplate_1.getTemplate)("Icon" + jsxExtension);
+    iconFile = (0, replace_1.replaceCases)(iconFile, cases);
+    iconFile = (0, replace_1.replaceImports)(iconFile, imports);
+    iconFile = (0, replace_1.replaceExports)(iconFile, imports);
+    iconFile = (0, replace_1.replaceReactName)(iconFile, config.can_import_react);
     if (config.use_typescript) {
-        iconFile = replace_1.replaceNames(iconFile, names);
+        iconFile = (0, replace_1.replaceNames)(iconFile, names);
     }
     else {
-        iconFile = replace_1.replaceNamesArray(iconFile, names);
-        var typeDefinitionFile = getTemplate_1.getTemplate("Icon.d.ts");
-        typeDefinitionFile = replace_1.replaceExports(typeDefinitionFile, imports);
-        typeDefinitionFile = replace_1.replaceNames(typeDefinitionFile, names);
+        iconFile = (0, replace_1.replaceNamesArray)(iconFile, names);
+        var typeDefinitionFile = (0, getTemplate_1.getTemplate)("Icon.d.ts");
+        typeDefinitionFile = (0, replace_1.replaceExports)(typeDefinitionFile, imports);
+        typeDefinitionFile = (0, replace_1.replaceNames)(typeDefinitionFile, names);
         fs_1.default.writeFileSync(path_1.default.join(saveDir, "index.d.ts"), typeDefinitionFile);
     }
     fs_1.default.writeFileSync(path_1.default.join(saveDir, "index" + jsxExtension), iconFile);
-    console.log("\n" + colors_1.default.green("√") + " All icons have putted into dir: " + colors_1.default.green(config.save_dir) + "\n");
+    console.log("\n".concat(colors_1.default.green("√"), " All icons have putted into dir: ").concat(colors_1.default.green(config.save_dir), "\n"));
 };
+exports.generateComponent = generateComponent;
 var generateCase = function (data, baseIdent) {
     var e_1, _a;
-    var template = "\n" + whitespace_1.whitespace(baseIdent) + "<svg viewBox=\"" + data.$.viewBox + "\" width={size} height={size} style={style} {...rest}>\n";
+    var template = "\n".concat((0, whitespace_1.whitespace)(baseIdent), "<svg viewBox=\"").concat(data.$.viewBox, "\" width={size} height={size} style={style} {...rest}>\n");
     var _loop_1 = function (domName) {
         if (domName === "$") {
             return "continue";
         }
         if (!domName) {
-            console.error(colors_1.default.red("Unable to transform dom \"" + domName + "\""));
+            console.error(colors_1.default.red("Unable to transform dom \"".concat(domName, "\"")));
             process.exit(1);
         }
         var counter = {
@@ -86,11 +88,11 @@ var generateCase = function (data, baseIdent) {
             baseIdent: baseIdent,
         };
         if (data[domName].$) {
-            template += whitespace_1.whitespace(baseIdent + 2) + "<" + domName + addAttribute(domName, data[domName], counter) + "\n" + whitespace_1.whitespace(baseIdent + 2) + "/>\n";
+            template += "".concat((0, whitespace_1.whitespace)(baseIdent + 2), "<").concat(domName).concat(addAttribute(domName, data[domName], counter), "\n").concat((0, whitespace_1.whitespace)(baseIdent + 2), "/>\n");
         }
         else if (Array.isArray(data[domName])) {
             data[domName].forEach(function (sub) {
-                template += whitespace_1.whitespace(baseIdent + 2) + "<" + domName + addAttribute(domName, sub, counter) + "\n" + whitespace_1.whitespace(baseIdent + 2) + "/>\n";
+                template += "".concat((0, whitespace_1.whitespace)(baseIdent + 2), "<").concat(domName).concat(addAttribute(domName, sub, counter), "\n").concat((0, whitespace_1.whitespace)(baseIdent + 2), "/>\n");
             });
         }
     };
@@ -107,7 +109,7 @@ var generateCase = function (data, baseIdent) {
         }
         finally { if (e_1) throw e_1.error; }
     }
-    template += whitespace_1.whitespace(baseIdent) + "</svg>\n";
+    template += "".concat((0, whitespace_1.whitespace)(baseIdent), "</svg>\n");
     return template;
 };
 var addAttribute = function (domName, sub, counter) {
@@ -123,11 +125,11 @@ var addAttribute = function (domName, sub, counter) {
             for (var _b = tslib_1.__values(Object.keys(sub.$)), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var attributeName = _c.value;
                 if (attributeName === "fill") {
-                    template += "\n" + whitespace_1.whitespace(counter.baseIdent + 4) + lodash_1.camelCase(attributeName) + "={getIconColor(color, " + counter.colorIndex + ", '" + sub.$[attributeName] + "')}";
+                    template += "\n".concat((0, whitespace_1.whitespace)(counter.baseIdent + 4)).concat((0, lodash_1.camelCase)(attributeName), "={getIconColor(color, ").concat(counter.colorIndex, ", '").concat(sub.$[attributeName], "')}");
                     counter.colorIndex += 1;
                 }
                 else {
-                    template += "\n" + whitespace_1.whitespace(counter.baseIdent + 4) + lodash_1.camelCase(attributeName) + "=\"" + sub.$[attributeName] + "\"";
+                    template += "\n".concat((0, whitespace_1.whitespace)(counter.baseIdent + 4)).concat((0, lodash_1.camelCase)(attributeName), "=\"").concat(sub.$[attributeName], "\"");
                 }
             }
         }

package/libs/getConfig.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getConfig = void 0;
 var tslib_1 = require("tslib");
 var path_1 = tslib_1.__importDefault(require("path"));
 var fs_1 = tslib_1.__importDefault(require("fs"));
 var colors_1 = tslib_1.__importDefault(require("colors"));
 var iconfont_json_1 = tslib_1.__importDefault(require("./iconfont.json"));
 var cacheConfig;
-exports.getConfig = function () {
+var getConfig = function () {
     if (cacheConfig) {
         return cacheConfig;
     }
@@ -30,3 +31,4 @@ exports.getConfig = function () {
     cacheConfig = config;
     return config;
 };
+exports.getConfig = getConfig;

package/libs/getTemplate.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTemplate = void 0;
 var tslib_1 = require("tslib");
 var fs_1 = tslib_1.__importDefault(require("fs"));
 var path_1 = tslib_1.__importDefault(require("path"));
-exports.getTemplate = function (fileName) {
-    return fs_1.default.readFileSync(path_1.default.join(__dirname, "../templates/" + fileName + ".template")).toString();
+var getTemplate = function (fileName) {
+    return fs_1.default.readFileSync(path_1.default.join(__dirname, "../templates/".concat(fileName, ".template"))).toString();
 };
+exports.getTemplate = getTemplate;

package/libs/replace.js

@@ -1,34 +1,45 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.replaceSize = function (content, size) {
+exports.replaceExports = exports.replaceSizeUnit = exports.replaceImports = exports.replaceSingleIconContent = exports.replaceReactName = exports.replaceComponentName = exports.replaceNamesArray = exports.replaceNames = exports.replaceCases = exports.replaceSize = void 0;
+var replaceSize = function (content, size) {
     return content.replace(/#size#/g, String(size));
 };
-exports.replaceCases = function (content, cases) {
+exports.replaceSize = replaceSize;
+var replaceCases = function (content, cases) {
     return content.replace(/#cases#/g, cases);
 };
-exports.replaceNames = function (content, names) {
+exports.replaceCases = replaceCases;
+var replaceNames = function (content, names) {
     return content.replace(/#names#/g, names.join("' | '"));
 };
-exports.replaceNamesArray = function (content, names) {
+exports.replaceNames = replaceNames;
+var replaceNamesArray = function (content, names) {
     return content.replace(/#namesArray#/g, JSON.stringify(names).replace(/"/g, "'").replace(/','/g, "', '"));
 };
-exports.replaceComponentName = function (content, name) {
+exports.replaceNamesArray = replaceNamesArray;
+var replaceComponentName = function (content, name) {
     return content.replace(/#componentName#/g, name);
 };
-exports.replaceReactName = function (content, canImport) {
+exports.replaceComponentName = replaceComponentName;
+var replaceReactName = function (content, canImport) {
     return content.replace(/#reactName#/g, canImport ? "React, " : "");
 };
-exports.replaceSingleIconContent = function (content, render) {
+exports.replaceReactName = replaceReactName;
+var replaceSingleIconContent = function (content, render) {
     return content.replace(/#iconContent#/g, render);
 };
-exports.replaceImports = function (content, imports) {
-    return content.replace(/#imports#/g, imports.map(function (item) { return "import " + item + " from './" + item + "';"; }).join("\n"));
+exports.replaceSingleIconContent = replaceSingleIconContent;
+var replaceImports = function (content, imports) {
+    return content.replace(/#imports#/g, imports.map(function (item) { return "import ".concat(item, " from './").concat(item, "';"); }).join("\n"));
 };
-exports.replaceSizeUnit = function (content, unit) {
-    return content.replace(/\{size\}/g, "{size + '" + unit + "'}");
+exports.replaceImports = replaceImports;
+var replaceSizeUnit = function (content, unit) {
+    return content.replace(/\{size\}/g, "{size + '".concat(unit, "'}"));
 };
-exports.replaceExports = function (content, exports) {
+exports.replaceSizeUnit = replaceSizeUnit;
+var replaceExports = function (content, exports) {
     return content.replace(/#exports#/g, exports
-        .map(function (item) { return "export { default as " + item + " } from './" + item + "';"; })
+        .map(function (item) { return "export { default as ".concat(item, " } from './").concat(item, "';"); })
         .join("\n"));
 };
+exports.replaceExports = replaceExports;

package/libs/whitespace.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.whitespace = function (repeat) {
+exports.whitespace = void 0;
+var whitespace = function (repeat) {
     return ' '.repeat(repeat);
 };
+exports.whitespace = whitespace;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sj-distributor/react-iconfont-cli",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "main": "index.js",
   "keywords": [
     "iconfont",
@@ -15,20 +15,21 @@
   "license": "MIT",
   "bin": {
     "sj-iconfont": "./commands/help.js",
-    "sj-iconfont-init": "./commands/createJson.js",
-    "sj-iconfont-h5": "./commands/createIcon.js"
+    "sj-iconfont-h5": "./commands/createIcon.js",
+    "sj-iconfont-init": "./commands/createJson.js"
   },
   "peerDependencies": {
     "react": "*"
   },
   "dependencies": {
-    "colors": "^1.3.3",
+    "axios": "^0.21.1",
+    "colors": "1.4.0",
     "glob": "^7.1.4",
-    "iconfont-parser": "^1.0.0",
     "lodash": "^4.17.15",
     "minimist": "^1.2.5",
     "mkdirp": "^0.5.1",
-    "tslib": "^1.10.0"
+    "tslib": "^1.10.0",
+    "xml2js": "0.4.22"
   },
   "devDependencies": {
     "@types/fs-extra": "^8.0.0",
@@ -38,8 +39,9 @@
     "@types/mkdirp": "^0.5.2",
     "@types/node": "^12.7.2",
     "@types/react": "^16.9.2",
+    "@types/xml2js": "0.4.5",
     "react": "^16.9.0",
     "ts-node": "^8.3.0",
-    "typescript": "^3.5.3"
+    "typescript": "^4.0.0"
   }
 }

package/templates/helper.js.template

@@ -7,11 +7,12 @@
  * @return {string}
  */
 export const getIconColor = (color, index, defaultColor) => {
-  return color
-    ? (
-      typeof color === 'string'
-        ? color
-        : color[index] || defaultColor
-    )
-    : defaultColor;
+  if (!color) return defaultColor;
+
+  // When color is a single value, only tint the first path.
+  if (typeof color === 'string') {
+    return index === 0 ? color : defaultColor;
+  }
+
+  return color[index] || defaultColor;
 };

package/templates/helper.ts.template

@@ -2,11 +2,12 @@
 /* eslint-disable */
 
 export const getIconColor = (color: string | string[] | undefined, index: number, defaultColor: string) => {
-  return color
-    ? (
-      typeof color === 'string'
-        ? color
-        : color[index] || defaultColor
-    )
-    : defaultColor;
+  if (!color) return defaultColor;
+
+  // When color is a single value, only tint the first path.
+  if (typeof color === 'string') {
+    return index === 0 ? color : defaultColor;
+  }
+
+  return color[index] || defaultColor;
 };