@sj-distributor/react-iconfont-cli 2.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 原罪
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,165 @@
+## react-iconfont-cli
+用纯JS把iconfont.cn的图标转换成React组件，不依赖字体，支持多色彩
+
+![](https://github.com/fwh1990/react-iconfont-cli/blob/master/images/icons.png?raw=true)
+
+## 特性
+
+1、纯组件，不依赖字体，体积小
+<br />
+2、支持渲染多色彩图标，支持自定义颜色
+<br />
+3、自动化生成图标组件，支持es6和typescript两种文件格式
+
+## Step 1
+安装插件
+```bash
+# Yarn
+yarn add react-iconfont-cli --dev
+
+# Npm
+npm install react-iconfont-cli --save-dev
+```
+
+# Step 2
+生成配置文件
+```bash
+npx iconfont-init
+```
+此时项目根目录会生成一个`iconfont.json`的文件，内容如下：
+```json
+{
+    "symbol_url": "请参考README.md，复制官网提供的JS链接",
+    "use_typescript": false,
+    "save_dir": "./src/components/iconfont",
+    "trim_icon_prefix": "icon",
+    "unit": "px",
+    "default_icon_size": 18
+}
+```
+### 配置参数说明：
+### symbol_url
+请直接复制[iconfont](http://iconfont.cn)官网提供的项目链接。请务必看清是`.js`后缀而不是.css后缀。如果你现在还没有创建iconfont的仓库，那么可以填入这个链接去测试：`http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js`
+
+<br />
+
+![](https://github.com/fwh1990/react-iconfont-cli/blob/master/images/symbol-url.png?raw=true)
+
+### use_typescript
+如果您的项目使用Typescript编写，请设置为true。这个选项将决定生成的图标组件是`.tsx`还是`.js`后缀。
+
+当该值为false时，我们会为您的图标生成`.js`和`.d.ts`两个文件，以便您能享受到最好的开发体验。
+
+### save_dir
+根据iconfont图标生成的组件存放的位置。每次生成组件之前，该文件夹都会被清空。
+
+### trim_icon_prefix
+如果你的图标有通用的前缀，而你在使用的时候又不想重复去写，那么可以通过这种配置这个选项把前缀统一去掉。
+
+注意，这个选项只针对 `<Icon />` 组件有效
+
+### unit
+图标的单位，默认是网页常用单位`px`即像素，也推荐您在手机网页中使用自适应的`rem`单位。
+
+### default_icon_size
+我们将为每个生成的图标组件加入默认的字体大小，当然，你也可以通过传入props的方式改变这个size值。
+
+# Step 3
+开始生成React标准组件
+```bash
+npx iconfont-h5
+```
+
+生成后查看您设置的保存目录中是否含有所有的图标，你可以参考[snapshots目录](https://github.com/iconfont-cli/react-iconfont-cli/tree/master/snapshots)的快照文件，以区分不同模式下的图标结构。
+
+# 使用
+
+现在我们提供了两种引入方式供您选择：
+
+1、使用汇总`Icon`组件：
+```typescript jsx
+import React from 'react';
+import IconFont from '../src/iconfont';
+
+export const App = () => {
+  return (
+    <div>
+      <IconFont name="alipay" size={20} />
+      <IconFont name="wechat" />
+    </div>
+  );
+};
+```
+
+2、使用单个图标。这样可以避免没用到的图标也打包进App：
+
+```typescript jsx
+import React from 'react';
+import IconAlipay from '../src/iconfont/IconAlipay';
+import IconWechat from '../src/iconfont/IconWechat';
+
+export const App = () => {
+  return (
+    <div>
+      <IconAlipay size={20} />
+      <IconWechat />
+    </div>
+  );
+};
+```
+
+### 图标尺寸
+根据配置`default_icon_size`，每个图标都会有一个默认的尺寸，你可以随时覆盖。
+```typescript jsx
+<IconFont name="alipay" size={20} />
+```
+![](https://github.com/fwh1990/react-iconfont-cli/blob/master/images/default-color-icon.png?raw=true)
+### 图标单色
+单色图标，如果不指定颜色值，图标将渲染原本的颜色。如果你想设置为其他的颜色，那么设置一个你想要的颜色即可。
+
+**注意：如果你在props传入的color是字符串而不是数组，那么即使原本是多色彩的图标，也会变成单色图标。**
+
+```typescript jsx
+<IconFont name="alipay" color="green" />
+```
+![](https://github.com/fwh1990/react-iconfont-cli/blob/master/images/one-color-icon.png?raw=true)
+
+### 图标多色彩
+多色彩的图标，如果不指定颜色值，图标将渲染原本的多色彩。如果你想设置为其他的颜色，那么设置一组你想要的颜色即可
+```typescript jsx
+<IconFont name="alipay" color={['green', 'orange']} />
+```
+颜色组的数量以及排序，需要根据当前图标的信息来确定。您需要进入图标组件中查看并得出结论。
+
+
+![](https://github.com/fwh1990/react-iconfont-cli/blob/master/images/multi-color-icon.png?raw=true)
+
+### 与文字并排
+图标是块状的容器，如果您想与文字并排混合，请使用`flex`布局以保证文字和图标能对齐
+```jsx harmony
+<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+  <span>Hello</span>
+  <IconFont name="alipay" />
+</div>
+```
+
+# 更新图标
+当您在iconfont.cn中的图标有变更时，只需更改配置`symbol_url`，然后再次执行`Step 3`即可生成最新的图标组件
+```bash
+# 修改 symbol_url 配置后执行：
+npx iconfont-h5
+```
+
+# 扩展
+|平台|库|
+|----|---|
+|小程序|[mini-program-iconfont-cli](https://github.com/iconfont-cli/mini-program-iconfont-cli)|
+|Taro|[taro-iconfont-cli](https://github.com/iconfont-cli/taro-iconfont-cli)|
+|React Native|[react-native-iconfont-cli](https://github.com/iconfont-cli/react-native-iconfont-cli)|
+|Flutter|[flutter-iconfont-cli](https://github.com/iconfont-cli/flutter-iconfont-cli)
+|Remax|[remax-iconfont-cli](https://github.com/iconfont-cli/remax-iconfont-cli)
+
+
+--------
+
+欢迎使用，并给我一些反馈和建议，让这个库做的更好

package/commands/createIcon.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/commands/createIcon.js

@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+"use strict";
+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);
+});

package/commands/createJson.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/commands/createJson.js

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var path_1 = tslib_1.__importDefault(require("path"));
+var fs_1 = tslib_1.__importDefault(require("fs"));
+var fs_extra_1 = tslib_1.__importDefault(require("fs-extra"));
+var colors_1 = tslib_1.__importDefault(require("colors"));
+var targetFile = path_1.default.resolve('iconfont.json');
+if (fs_1.default.existsSync(targetFile)) {
+    console.error(colors_1.default.red('File "iconfont.json" was created before.'));
+}
+else {
+    // fs.copyFileSync only can be used above node v8.5.0+
+    fs_extra_1.default.copySync(path_1.default.join(__dirname, '../libs/iconfont.json'), targetFile);
+    console.log(colors_1.default.green('File "iconfont.json" is created now. We recommend you add it to version control.'));
+}

package/commands/help.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/commands/help.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var colors_1 = tslib_1.__importDefault(require("colors"));
+console.log([
+    '',
+    'Usage:',
+    '',
+    '    ' + colors_1.default.yellow('npx iconfont-init') + '       : generate config file',
+    '    ' + colors_1.default.yellow('npx iconfont-h5') + '         : generate icon components',
+    '',
+].join('\n'));

package/libs/copyTemplate.d.ts

@@ -0,0 +1 @@
+export declare const copyTemplate: (fromFile: string, toFile: string) => void;

package/libs/copyTemplate.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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);
+};

package/libs/generateComponent.d.ts

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

package/libs/generateComponent.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var fs_1 = tslib_1.__importDefault(require("fs"));
+var path_1 = tslib_1.__importDefault(require("path"));
+var mkdirp_1 = tslib_1.__importDefault(require("mkdirp"));
+var glob_1 = tslib_1.__importDefault(require("glob"));
+var colors_1 = tslib_1.__importDefault(require("colors"));
+var lodash_1 = require("lodash");
+var getTemplate_1 = require("./getTemplate");
+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 names = [];
+    var imports = [];
+    var saveDir = path_1.default.resolve(config.save_dir);
+    var jsxExtension = config.use_typescript ? ".tsx" : ".js";
+    var jsExtension = config.use_typescript ? ".ts" : ".js";
+    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));
+    if (!config.use_typescript) {
+        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;
+        var componentName = lodash_1.upperFirst(lodash_1.camelCase(iconId));
+        names.push(iconIdAfterTrim);
+        cases += whitespace_1.whitespace(4) + "case '" + 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);
+        if (jsxExtension === ".tsx") {
+            singleFile = 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);
+        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);
+            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) + "\"");
+    });
+    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);
+    if (config.use_typescript) {
+        iconFile = 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);
+        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");
+};
+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 _loop_1 = function (domName) {
+        if (domName === "$") {
+            return "continue";
+        }
+        if (!domName) {
+            console.error(colors_1.default.red("Unable to transform dom \"" + domName + "\""));
+            process.exit(1);
+        }
+        var counter = {
+            colorIndex: 0,
+            baseIdent: baseIdent,
+        };
+        if (data[domName].$) {
+            template += whitespace_1.whitespace(baseIdent + 2) + "<" + domName + addAttribute(domName, data[domName], counter) + "\n" + 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";
+            });
+        }
+    };
+    try {
+        for (var _b = tslib_1.__values(Object.keys(data)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var domName = _c.value;
+            _loop_1(domName);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    template += whitespace_1.whitespace(baseIdent) + "</svg>\n";
+    return template;
+};
+var addAttribute = function (domName, sub, counter) {
+    var e_2, _a;
+    var template = "";
+    if (sub && sub.$) {
+        if (ATTRIBUTE_FILL_MAP.includes(domName)) {
+            // Set default color same as in iconfont.cn
+            // And create placeholder to inject color by user's behavior
+            sub.$.fill = sub.$.fill || "#333333";
+        }
+        try {
+            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] + "')}";
+                    counter.colorIndex += 1;
+                }
+                else {
+                    template += "\n" + whitespace_1.whitespace(counter.baseIdent + 4) + lodash_1.camelCase(attributeName) + "=\"" + sub.$[attributeName] + "\"";
+                }
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+    }
+    return template;
+};

package/libs/getConfig.d.ts

@@ -0,0 +1,10 @@
+export interface Config {
+    symbol_url: string;
+    use_typescript: boolean;
+    save_dir: string;
+    trim_icon_prefix: string;
+    unit: string;
+    default_icon_size: number;
+    can_import_react: boolean;
+}
+export declare const getConfig: () => Config;

package/libs/getConfig.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 () {
+    if (cacheConfig) {
+        return cacheConfig;
+    }
+    var targetFile = path_1.default.resolve("iconfont.json");
+    if (!fs_1.default.existsSync(targetFile)) {
+        console.warn(colors_1.default.red('File "iconfont.json" doesn\'t exist, did you forget to generate it?'));
+        process.exit(1);
+    }
+    var config = require(targetFile);
+    if (!config.symbol_url || !/^(https?:)?\/\//.test(config.symbol_url)) {
+        console.warn(colors_1.default.red("You are required to provide symbol_url"));
+        process.exit(1);
+    }
+    if (config.symbol_url.indexOf("//") === 0) {
+        config.symbol_url = "http:" + config.symbol_url;
+    }
+    config.save_dir = config.save_dir || iconfont_json_1.default.save_dir;
+    config.default_icon_size =
+        config.default_icon_size || iconfont_json_1.default.default_icon_size;
+    config.unit = config.unit || iconfont_json_1.default.unit;
+    config.can_import_react =
+        config.can_import_react || iconfont_json_1.default.can_import_react;
+    cacheConfig = config;
+    return config;
+};

package/libs/getTemplate.d.ts

@@ -0,0 +1 @@
+export declare const getTemplate: (fileName: string) => string;

package/libs/getTemplate.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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();
+};

package/libs/iconfont.json

@@ -0,0 +1,9 @@
+{
+    "symbol_url": "请参考README.md，复制官网提供的JS链接",
+    "use_typescript": false,
+    "save_dir": "./src/components/iconfont",
+    "trim_icon_prefix": "icon",
+    "unit": "px",
+    "default_icon_size": 18,
+    "can_import_react": false
+}

package/libs/replace.d.ts

@@ -0,0 +1,10 @@
+export declare const replaceSize: (content: string, size: number) => string;
+export declare const replaceCases: (content: string, cases: string) => string;
+export declare const replaceNames: (content: string, names: string[]) => string;
+export declare const replaceNamesArray: (content: string, names: string[]) => string;
+export declare const replaceComponentName: (content: string, name: string) => string;
+export declare const replaceReactName: (content: string, canImport: boolean) => string;
+export declare const replaceSingleIconContent: (content: string, render: string) => string;
+export declare const replaceImports: (content: string, imports: string[]) => string;
+export declare const replaceSizeUnit: (content: string, unit: string) => string;
+export declare const replaceExports: (content: string, exports: string[]) => string;

package/libs/replace.js

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

package/libs/whitespace.d.ts

@@ -0,0 +1 @@
+export declare const whitespace: (repeat: number) => string;

package/libs/whitespace.js

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

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@sj-distributor/react-iconfont-cli",
+  "version": "2.0.3",
+  "main": "index.js",
+  "keywords": [
+    "iconfont",
+    "react",
+    "react-iconfont",
+    "icon",
+    "icons",
+    "iconfont.cn"
+  ],
+  "repository": "https://github.com/Simoon-F/react-iconfont-cli",
+  "author": "Simon <simoonf@vip.qq.com>",
+  "license": "MIT",
+  "bin": {
+    "sj-iconfont": "./commands/help.js",
+    "sj-iconfont-init": "./commands/createJson.js",
+    "sj-iconfont-h5": "./commands/createIcon.js"
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "dependencies": {
+    "colors": "^1.3.3",
+    "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"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^8.0.0",
+    "@types/glob": "^7.1.1",
+    "@types/lodash": "^4.14.137",
+    "@types/minimist": "^1.2.0",
+    "@types/mkdirp": "^0.5.2",
+    "@types/node": "^12.7.2",
+    "@types/react": "^16.9.2",
+    "react": "^16.9.0",
+    "ts-node": "^8.3.0",
+    "typescript": "^3.5.3"
+  }
+}

package/templates/Icon.d.ts.template

@@ -0,0 +1,14 @@
+/* eslint-disable */
+
+import { SVGAttributes, FunctionComponent } from 'react';
+#exports#
+
+interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
+  name: '#names#';
+  size?: number;
+  color?: string | string[];
+}
+
+declare const IconFont: FunctionComponent<Props>;
+
+export default IconFont;

package/templates/Icon.js.template

@@ -0,0 +1,15 @@
+/* eslint-disable */
+
+import React from 'react';
+#imports#
+#exports#
+
+const IconFont = ({ name, ...rest }) => {
+  switch (name) {
+#cases#
+  }
+
+  return null;
+};
+
+export default IconFont;

package/templates/Icon.tsx.template

@@ -0,0 +1,24 @@
+/* tslint:disable */
+/* eslint-disable */
+
+import React, { SVGAttributes, FunctionComponent } from 'react';
+#imports#
+#exports#
+
+export type IconNames = '#names#';
+
+interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
+  name: IconNames;
+  size?: number;
+  color?: string | string[];
+}
+
+const IconFont: FunctionComponent<Props> = ({ name, ...rest }) => {
+  switch (name) {
+#cases#
+  }
+
+  return null;
+};
+
+export default IconFont;

package/templates/SingleIcon.d.ts.template

@@ -0,0 +1,12 @@
+/* eslint-disable */
+
+import { SVGAttributes, FunctionComponent } from 'react';
+
+interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
+  size?: number;
+  color?: string | string[];
+}
+
+declare const #componentName#: FunctionComponent<Props>;
+
+export default #componentName#;

package/templates/SingleIcon.js.template

@@ -0,0 +1,20 @@
+/* eslint-disable */
+
+import React from 'react';
+import { getIconColor } from './helper';
+
+const DEFAULT_STYLE = {
+  display: 'block',
+};
+
+const #componentName# = ({ size, color, style: _style, ...rest }) => {
+  const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
+
+  return (#iconContent#  );
+};
+
+#componentName#.defaultProps = {
+  size: #size#,
+};
+
+export default #componentName#;

package/templates/SingleIcon.tsx.template

@@ -0,0 +1,26 @@
+/* tslint:disable */
+/* eslint-disable */
+
+import #reactName#{ CSSProperties, SVGAttributes, FunctionComponent } from 'react';
+import { getIconColor } from './helper';
+
+interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
+  size?: number;
+  color?: string | string[];
+}
+
+const DEFAULT_STYLE: CSSProperties = {
+  display: 'block',
+};
+
+const #componentName#: FunctionComponent<Props> = ({ size, color, style: _style, ...rest }) => {
+  const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
+
+  return (#iconContent#  );
+};
+
+#componentName#.defaultProps = {
+  size: #size#,
+};
+
+export default #componentName#;

package/templates/helper.d.ts.template

@@ -0,0 +1,3 @@
+/* eslint-disable */
+
+export declare const getIconColor: (color: string | string[] | undefined, index: number, defaultColor: string) => string;

package/templates/helper.js.template

@@ -0,0 +1,17 @@
+/* eslint-disable */
+
+/**
+ * @param {string | string[] | undefined} color
+ * @param {number} index
+ * @param {string} defaultColor
+ * @return {string}
+ */
+export const getIconColor = (color, index, defaultColor) => {
+  return color
+    ? (
+      typeof color === 'string'
+        ? color
+        : color[index] || defaultColor
+    )
+    : defaultColor;
+};

package/templates/helper.ts.template

@@ -0,0 +1,12 @@
+/* tslint:disable */
+/* eslint-disable */
+
+export const getIconColor = (color: string | string[] | undefined, index: number, defaultColor: string) => {
+  return color
+    ? (
+      typeof color === 'string'
+        ? color
+        : color[index] || defaultColor
+    )
+    : defaultColor;
+};