feat: Support change summary icon name

Author: fwh1990

README.md

@@ -66,7 +66,8 @@ npx iconfont init
     "save_dir": "./src/iconfont",
     "generate_mode": "all-in-one",
     "trim_icon_prefix": "icon",
-    "default_icon_size": 18
+    "default_icon_size": 18,
+    "summary_component_name": "Icon"
 }
 ```
 ### 配置参数说明：
@@ -105,6 +106,9 @@ npx iconfont init
 我们将为每个生成的图标组件加入默认的字体大小，当然，你也可以通过传入props的方式改变这个size值。
 
 
+### summary_component_name
+就是汇总组件的名称，默认名称为`Icon`，您也可以改成`IconFont`或者您喜欢的名字。记住，它是一个变量名，您必须遵守Javascript中关于变量的语法规则。以及作为组件名，请尽量以大写字母开头。
+
 # Step 4
 开始生成React组件
 ```bash

scripts/config/all-in-one-js.json

@@ -4,5 +4,6 @@
   "generate_mode": "all-in-one",
   "save_dir": "./snapshots/all-in-one-js",
   "trim_icon_prefix": "icon",
-  "default_icon_size": 14
+  "default_icon_size": 14,
+  "summary_component_name": "Icon"
 }

scripts/config/all-in-one-ts.json

@@ -4,5 +4,6 @@
   "generate_mode": "all-in-one",
   "save_dir": "./snapshots/all-in-one-ts",
   "trim_icon_prefix": "icon",
-  "default_icon_size": 16
+  "default_icon_size": 16,
+  "summary_component_name": "Icon"
 }

scripts/config/depends-on-js.json

@@ -4,5 +4,6 @@
   "generate_mode": "depends-on",
   "save_dir": "./snapshots/depends-on-js",
   "trim_icon_prefix": "icon",
-  "default_icon_size": 18
+  "default_icon_size": 18,
+  "summary_component_name": "IconFont"
 }

scripts/config/depends-on-ts.json

@@ -4,5 +4,6 @@
   "generate_mode": "depends-on",
   "save_dir": "./snapshots/depends-on-ts",
   "trim_icon_prefix": "icon",
-  "default_icon_size": 20
+  "default_icon_size": 20,
+  "summary_component_name": "CustomIcon"
 }

snapshots/depends-on-js/Icon.d.ts snapshots/depends-on-js/IconFont.d.tssnapshots/depends-on-js/Icon.d.ts renamed to snapshots/depends-on-js/IconFont.d.ts

@@ -11,6 +11,6 @@ interface Props extends GProps, ViewProps {
   color?: string | string[];
 }
 
-declare const Icon: FunctionComponent<Props>;
+declare const IconFont: FunctionComponent<Props>;
 
-export = Icon;
+export = IconFont;

snapshots/depends-on-js/Icon.js snapshots/depends-on-js/IconFont.jssnapshots/depends-on-js/Icon.js renamed to snapshots/depends-on-js/IconFont.js

@@ -9,7 +9,7 @@ import IconSetup from './IconSetup';
 // If you don't like lots of icon files in your project,
 // try to set generate_mode to "all-in-one" in root file "iconfont.json".
 // And then regenerate icons by using cli command.
-const Icon = ({ color, name, size, ...rest }) => {
+const IconFont = ({ color, name, size, ...rest }) => {
   switch (name) {
     case 'alipay':
       return <IconAlipay size={size} color={color} {...rest} />;
@@ -23,8 +23,8 @@ const Icon = ({ color, name, size, ...rest }) => {
   return null;
 };
 
-Icon.defaultProps = {
+IconFont.defaultProps = {
   size: 18,
 };
 
-export default Icon;
+export default IconFont;

snapshots/depends-on-ts/Icon.tsx snapshots/depends-on-ts/CustomIcon.tsxsnapshots/depends-on-ts/Icon.tsx renamed to snapshots/depends-on-ts/CustomIcon.tsx

@@ -19,7 +19,7 @@ interface Props extends GProps, ViewProps {
 // If you don't like lots of icon files in your project,
 // try to set generate_mode to "all-in-one" in root file "iconfont.json".
 // And then regenerate icons by using cli command.
-const Icon: FunctionComponent<Props> = ({ color, name, size, ...rest }) => {
+const CustomIcon: FunctionComponent<Props> = ({ color, name, size, ...rest }) => {
   switch (name) {
     case 'alipay':
       return <IconAlipay size={size} color={color} {...rest} />;
@@ -33,8 +33,8 @@ const Icon: FunctionComponent<Props> = ({ color, name, size, ...rest }) => {
   return null;
 };
 
-Icon.defaultProps = {
+CustomIcon.defaultProps = {
   size: 20,
 };
 
-export default Icon;
+export default CustomIcon;

src/libs/generateComponent.ts

@@ -14,7 +14,7 @@ import {
   replaceNames,
   replaceNamesArray, replaceNoColor,
   replaceSingleIconContent,
-  replaceSize,
+  replaceSize, replaceSummaryIcon,
   replaceSvgComponents,
   replaceToDependsComments,
   replaceToOneComments,
@@ -132,7 +132,8 @@ export const generateComponent = (data: XmlData, config: Config) => {
     let typeDefinitionFile = getTemplate('Icon.d.ts');
 
     typeDefinitionFile = replaceNames(typeDefinitionFile, names);
-    fs.writeFileSync(path.join(saveDir, 'Icon.d.ts'), typeDefinitionFile);
+    typeDefinitionFile = replaceSummaryIcon(typeDefinitionFile, config.summary_component_name);
+    fs.writeFileSync(path.join(saveDir, config.summary_component_name + '.d.ts'), typeDefinitionFile);
   }
 
   if (config.generate_mode === GENERATE_MODE.allInOne) {
@@ -143,7 +144,9 @@ export const generateComponent = (data: XmlData, config: Config) => {
     iconFile = replaceNoColor(iconFile);
   }
 
-  fs.writeFileSync(path.join(saveDir, 'Icon' + jsxExtension), iconFile);
+  iconFile = replaceSummaryIcon(iconFile, config.summary_component_name);
+
+  fs.writeFileSync(path.join(saveDir, config.summary_component_name + jsxExtension), iconFile);
 
   console.log(`\n${colors.green('√')} All icons have putted into dir: ${colors.green(config.save_dir)}\n`);
 };

src/libs/getConfig.ts

@@ -11,6 +11,7 @@ export interface Config {
   generate_mode: GENERATE_MODE;
   trim_icon_prefix: string;
   default_icon_size: number;
+  summary_component_name: string;
 }
 
 let cacheConfig: Config;
@@ -40,6 +41,7 @@ export const getConfig = () => {
 
   config.save_dir = config.save_dir || defaultConfig.save_dir;
   config.default_icon_size = config.default_icon_size || defaultConfig.default_icon_size;
+  config.summary_component_name = config.summary_component_name || defaultConfig.summary_component_name;
 
   if (!Object.values(GENERATE_MODE).includes(config.generate_mode)) {
     console.warn(colors.red(`Property generate_mode should be only one of ${JSON.stringify(Object.values(GENERATE_MODE))}`));