diff --git a/README.md b/README.md
index 8e169ac..194dbcc 100644
--- a/README.md
+++ b/README.md
@@ -53,7 +53,8 @@ npx iconfont-init
   "use_rpx": true,
   "trim_icon_prefix": "icon",
   "default_icon_size": 18,
-  "design_width": 750
+  "design_width": 750,
+  "component_name": "iconfont"
 }
 ```
 ### 配置参数说明：
@@ -94,6 +95,9 @@ npx iconfont-init
 ### default_icon_size
 我们将为每个生成的图标组件加入默认的字体大小，当然，你也可以通过传入props的方式改变这个size值。
 
+### component_name
+生成的组件名称，用于注册小程序的组件，所以该项只有在小程序平台下才会生效。此项能满足一个项目中引入多个 iconfont 组件。
+
 
 # Step 3
 开始生成Taro标准组件
diff --git a/package.json b/package.json
index c9af652..979989a 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,9 @@
     "@tarojs/taro": "^3.0.8"
   },
   "dependencies": {
+    "camelcase": "^6.0.0",
     "colors": "^1.4.0",
+    "decamelize": "^5.0.0",
     "fs-extra": "^8.1.0",
     "iconfont-parser": "^1.0.0",
     "mini-program-iconfont-cli": "0.6.1",
diff --git a/scripts/config/iconfont-js.json b/scripts/config/iconfont-js.json
index 5ee9111..f428dbd 100644
--- a/scripts/config/iconfont-js.json
+++ b/scripts/config/iconfont-js.json
@@ -6,5 +6,6 @@
   "design_width": 720,
   "save_dir": "./snapshots/iconfont-js",
   "trim_icon_prefix": "icon",
-  "default_icon_size": 14
+  "default_icon_size": 14,
+  "component_name": "iconfont"
 }
diff --git a/scripts/config/iconfont-ts.json b/scripts/config/iconfont-ts.json
index 5f11fab..e274da4 100644
--- a/scripts/config/iconfont-ts.json
+++ b/scripts/config/iconfont-ts.json
@@ -5,5 +5,6 @@
   "use_rpx": false,
   "save_dir": "./snapshots/iconfont-ts",
   "trim_icon_prefix": "icon",
-  "default_icon_size": 20
+  "default_icon_size": 20,
+  "component_name": "iconfont"
 }
diff --git a/snapshots/iconfont-js/helper.d.ts b/snapshots/iconfont-js/helper.d.ts
index 24a9a53..78a8fcf 100644
--- a/snapshots/iconfont-js/helper.d.ts
+++ b/snapshots/iconfont-js/helper.d.ts
@@ -1,2 +1,2 @@
 /* eslint-disable */
-export declare var useGlobalIconFont: () => { iconfont: string };
+export declare var useGlobalIconFont: () => { 'iconfont': string };
diff --git a/snapshots/iconfont-js/helper.js b/snapshots/iconfont-js/helper.js
index c2462fc..1c79a50 100644
--- a/snapshots/iconfont-js/helper.js
+++ b/snapshots/iconfont-js/helper.js
@@ -1,7 +1,7 @@
 /* eslint-disable */
 const useGlobalIconFont = () => {
   return {
-    iconfont: `../snapshots/iconfont-js/${process.env.TARO_ENV}/${process.env.TARO_ENV}`,
+    'iconfont': `../snapshots/iconfont-js/${process.env.TARO_ENV}/${process.env.TARO_ENV}`,
   };
 };
 
diff --git a/snapshots/iconfont-js/index.alipay.js b/snapshots/iconfont-js/index.alipay.js
index 9627e01..09038dc 100644
--- a/snapshots/iconfont-js/index.alipay.js
+++ b/snapshots/iconfont-js/index.alipay.js
@@ -3,14 +3,14 @@
 import React from 'react';
 import Taro from '@tarojs/taro';
 
-const IconFont = (props) => {
+const Iconfont = (props) => {
   const { name, size, color, style } = props;
 
   return <iconfont name={name} size={parseFloat(Taro.pxTransform(size))} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 14,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-js/index.d.ts b/snapshots/iconfont-js/index.d.ts
index eb6c0fa..4855e96 100644
--- a/snapshots/iconfont-js/index.d.ts
+++ b/snapshots/iconfont-js/index.d.ts
@@ -8,6 +8,6 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-declare const IconFont: FunctionComponent<Props>;
+declare const Iconfont: FunctionComponent<Props>;
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-js/index.h5.js b/snapshots/iconfont-js/index.h5.js
index 3bec858..a50c9a8 100644
--- a/snapshots/iconfont-js/index.h5.js
+++ b/snapshots/iconfont-js/index.h5.js
@@ -4,14 +4,14 @@ import React from 'react';
 import Taro from '@tarojs/taro';
 import Icon from './h5';
 
-const IconFont = (props) => {
+const Iconfont = (props) => {
   const { name, size, color, style } = props;
 
   return <Icon name={name} size={parseFloat(Taro.pxTransform(size, 720))} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 14,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-js/index.js b/snapshots/iconfont-js/index.js
index 9236f4b..7758104 100644
--- a/snapshots/iconfont-js/index.js
+++ b/snapshots/iconfont-js/index.js
@@ -1,7 +1,7 @@
 /* eslint-disable */
 
-const IconFont = () => {
+const Iconfont = () => {
   return null;
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-js/index.qq.js b/snapshots/iconfont-js/index.qq.js
index 9627e01..09038dc 100644
--- a/snapshots/iconfont-js/index.qq.js
+++ b/snapshots/iconfont-js/index.qq.js
@@ -3,14 +3,14 @@
 import React from 'react';
 import Taro from '@tarojs/taro';
 
-const IconFont = (props) => {
+const Iconfont = (props) => {
   const { name, size, color, style } = props;
 
   return <iconfont name={name} size={parseFloat(Taro.pxTransform(size))} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 14,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-js/index.rn.js b/snapshots/iconfont-js/index.rn.js
index 7645954..28792fc 100644
--- a/snapshots/iconfont-js/index.rn.js
+++ b/snapshots/iconfont-js/index.rn.js
@@ -4,14 +4,14 @@ import React from 'react';
 import Taro from '@tarojs/taro';
 import Icon from './rn';
 
-const IconFont = (props) => {
+const Iconfont = (props) => {
   const { name, size, color, style } = props;
 
   return <Icon name={name} size={parseFloat(Taro.pxTransform(size))} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 14,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-js/index.swan.js b/snapshots/iconfont-js/index.swan.js
index 9627e01..09038dc 100644
--- a/snapshots/iconfont-js/index.swan.js
+++ b/snapshots/iconfont-js/index.swan.js
@@ -3,14 +3,14 @@
 import React from 'react';
 import Taro from '@tarojs/taro';
 
-const IconFont = (props) => {
+const Iconfont = (props) => {
   const { name, size, color, style } = props;
 
   return <iconfont name={name} size={parseFloat(Taro.pxTransform(size))} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 14,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-js/index.tt.js b/snapshots/iconfont-js/index.tt.js
index 9627e01..09038dc 100644
--- a/snapshots/iconfont-js/index.tt.js
+++ b/snapshots/iconfont-js/index.tt.js
@@ -3,14 +3,14 @@
 import React from 'react';
 import Taro from '@tarojs/taro';
 
-const IconFont = (props) => {
+const Iconfont = (props) => {
   const { name, size, color, style } = props;
 
   return <iconfont name={name} size={parseFloat(Taro.pxTransform(size))} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 14,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-js/index.weapp.js b/snapshots/iconfont-js/index.weapp.js
index 9627e01..09038dc 100644
--- a/snapshots/iconfont-js/index.weapp.js
+++ b/snapshots/iconfont-js/index.weapp.js
@@ -3,14 +3,14 @@
 import React from 'react';
 import Taro from '@tarojs/taro';
 
-const IconFont = (props) => {
+const Iconfont = (props) => {
   const { name, size, color, style } = props;
 
   return <iconfont name={name} size={parseFloat(Taro.pxTransform(size))} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 14,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-ts/helper.d.ts b/snapshots/iconfont-ts/helper.d.ts
index 24a9a53..78a8fcf 100644
--- a/snapshots/iconfont-ts/helper.d.ts
+++ b/snapshots/iconfont-ts/helper.d.ts
@@ -1,2 +1,2 @@
 /* eslint-disable */
-export declare var useGlobalIconFont: () => { iconfont: string };
+export declare var useGlobalIconFont: () => { 'iconfont': string };
diff --git a/snapshots/iconfont-ts/helper.js b/snapshots/iconfont-ts/helper.js
index 3f4876c..d79e6c0 100644
--- a/snapshots/iconfont-ts/helper.js
+++ b/snapshots/iconfont-ts/helper.js
@@ -1,7 +1,7 @@
 /* eslint-disable */
 const useGlobalIconFont = () => {
   return {
-    iconfont: `../snapshots/iconfont-ts/${process.env.TARO_ENV}/${process.env.TARO_ENV}`,
+    'iconfont': `../snapshots/iconfont-ts/${process.env.TARO_ENV}/${process.env.TARO_ENV}`,
   };
 };
 
diff --git a/snapshots/iconfont-ts/index.alipay.tsx b/snapshots/iconfont-ts/index.alipay.tsx
index 8a3b96e..eeb0081 100644
--- a/snapshots/iconfont-ts/index.alipay.tsx
+++ b/snapshots/iconfont-ts/index.alipay.tsx
@@ -13,15 +13,15 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-const IconFont: FunctionComponent<Props> = (props) => {
+const Iconfont: FunctionComponent<Props> = (props) => {
   const { name, size, color, style } = props;
 
   // @ts-ignore
   return <iconfont name={name} size={size} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 20,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-ts/index.h5.tsx b/snapshots/iconfont-ts/index.h5.tsx
index 2b4b536..d23a04d 100644
--- a/snapshots/iconfont-ts/index.h5.tsx
+++ b/snapshots/iconfont-ts/index.h5.tsx
@@ -14,14 +14,14 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-const IconFont: FunctionComponent<Props> = (props) => {
+const Iconfont: FunctionComponent<Props> = (props) => {
   const { name, size, color, style } = props;
 
   return <Icon name={name} size={size} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 20,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-ts/index.qq.tsx b/snapshots/iconfont-ts/index.qq.tsx
index 8a3b96e..eeb0081 100644
--- a/snapshots/iconfont-ts/index.qq.tsx
+++ b/snapshots/iconfont-ts/index.qq.tsx
@@ -13,15 +13,15 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-const IconFont: FunctionComponent<Props> = (props) => {
+const Iconfont: FunctionComponent<Props> = (props) => {
   const { name, size, color, style } = props;
 
   // @ts-ignore
   return <iconfont name={name} size={size} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 20,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-ts/index.rn.tsx b/snapshots/iconfont-ts/index.rn.tsx
index 5447b0f..0f18969 100644
--- a/snapshots/iconfont-ts/index.rn.tsx
+++ b/snapshots/iconfont-ts/index.rn.tsx
@@ -14,15 +14,15 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-const IconFont: FunctionComponent<Props> = (props) => {
+const Iconfont: FunctionComponent<Props> = (props) => {
   const { name, size, color, style } = props;
 
   // @ts-ignore
   return <Icon name={name} size={size} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 20,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-ts/index.swan.tsx b/snapshots/iconfont-ts/index.swan.tsx
index 8a3b96e..eeb0081 100644
--- a/snapshots/iconfont-ts/index.swan.tsx
+++ b/snapshots/iconfont-ts/index.swan.tsx
@@ -13,15 +13,15 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-const IconFont: FunctionComponent<Props> = (props) => {
+const Iconfont: FunctionComponent<Props> = (props) => {
   const { name, size, color, style } = props;
 
   // @ts-ignore
   return <iconfont name={name} size={size} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 20,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-ts/index.tsx b/snapshots/iconfont-ts/index.tsx
index deb343b..a6df351 100644
--- a/snapshots/iconfont-ts/index.tsx
+++ b/snapshots/iconfont-ts/index.tsx
@@ -12,8 +12,8 @@ export interface IconProps {
   style?: React.CSSProperties;
 }
 
-const IconFont: FunctionComponent<IconProps> = () => {
+const Iconfont: FunctionComponent<IconProps> = () => {
   return null;
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-ts/index.tt.tsx b/snapshots/iconfont-ts/index.tt.tsx
index 8a3b96e..eeb0081 100644
--- a/snapshots/iconfont-ts/index.tt.tsx
+++ b/snapshots/iconfont-ts/index.tt.tsx
@@ -13,15 +13,15 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-const IconFont: FunctionComponent<Props> = (props) => {
+const Iconfont: FunctionComponent<Props> = (props) => {
   const { name, size, color, style } = props;
 
   // @ts-ignore
   return <iconfont name={name} size={size} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 20,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/snapshots/iconfont-ts/index.weapp.tsx b/snapshots/iconfont-ts/index.weapp.tsx
index 8a3b96e..eeb0081 100644
--- a/snapshots/iconfont-ts/index.weapp.tsx
+++ b/snapshots/iconfont-ts/index.weapp.tsx
@@ -13,15 +13,15 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-const IconFont: FunctionComponent<Props> = (props) => {
+const Iconfont: FunctionComponent<Props> = (props) => {
   const { name, size, color, style } = props;
 
   // @ts-ignore
   return <iconfont name={name} size={size} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+Iconfont.defaultProps = {
   size: 20,
 };
 
-export default IconFont;
+export default Iconfont;
diff --git a/src/libs/generateUsingComponent.ts b/src/libs/generateUsingComponent.ts
index a95596d..18f5c69 100644
--- a/src/libs/generateUsingComponent.ts
+++ b/src/libs/generateUsingComponent.ts
@@ -1,5 +1,7 @@
 import path from 'path';
 import fs from 'fs';
+import camelCase from 'camelcase';
+import decamelize from 'decamelize';
 import { Config } from './getConfig';
 import { getTemplate } from './getTemplate';
 import {
@@ -9,6 +11,8 @@ import {
   replaceSize,
   replaceRelativePath,
   replaceDesignWidth,
+  replaceComponentName,
+  replaceComponentNameCamelCase
 } from './replace';
 
 export const generateUsingComponent = (config: Config, names: string[], platform?: string) => {
@@ -27,6 +31,8 @@ export const generateUsingComponent = (config: Config, names: string[], platform
     iconFile = getTemplate('index' + jsxExtension);
   }
 
+  iconFile = replaceComponentName(iconFile, decamelize(config.component_name, { separator: '-' }));
+  iconFile = replaceComponentNameCamelCase(iconFile, camelCase(config.component_name, { pascalCase: true }));
   iconFile = replaceNames(iconFile, names);
   iconFile = replaceSize(iconFile, config.default_icon_size);
 
@@ -45,14 +51,23 @@ export const generateUsingComponent = (config: Config, names: string[], platform
     let definitionFile = getTemplate('index.d.ts');
 
     definitionFile = replaceNames(definitionFile, names);
+    definitionFile = replaceComponentName(definitionFile, decamelize(config.component_name, { separator: '-' }));
+    definitionFile = replaceComponentNameCamelCase(definitionFile, camelCase(config.component_name, { pascalCase: true }));
     fs.writeFileSync(path.join(saveDir, 'index.d.ts'), definitionFile);
   }
 
   // index.config.ts only support commonJs
   let helperFile = getTemplate('helper.js');
   helperFile = replaceRelativePath(helperFile, config.save_dir);
+  helperFile = replaceComponentName(helperFile, decamelize(config.component_name, { separator: '-' }));
+  helperFile = replaceComponentNameCamelCase(helperFile, camelCase(config.component_name, { pascalCase: true }));
   fs.writeFileSync(path.join(saveDir, 'helper.js'), helperFile);
-  fs.writeFileSync(path.join(saveDir, 'helper.d.ts'), getTemplate('helper.d.ts'));
+
+  let helpDFile = getTemplate('helper.d.ts');
+  helpDFile = replaceComponentName(helpDFile, decamelize(config.component_name, { separator: '-' }));
+  helpDFile = replaceComponentNameCamelCase(helpDFile, camelCase(config.component_name, { pascalCase: true }));
+
+  fs.writeFileSync(path.join(saveDir, 'helper.d.ts'), helpDFile);
 
   fs.writeFileSync(path.join(saveDir, 'index' + (platform ? `.${platform}` : '') + jsxExtension), iconFile);
 };
diff --git a/src/libs/getConfig.ts b/src/libs/getConfig.ts
index 99eaee9..16df9e6 100644
--- a/src/libs/getConfig.ts
+++ b/src/libs/getConfig.ts
@@ -14,6 +14,7 @@ export interface Config {
   design_width: string | number;
   trim_icon_prefix: string;
   default_icon_size: number;
+  component_name: string
 }
 
 let cacheConfig: Config;
@@ -60,6 +61,7 @@ export const getConfig = (argv?: string[]) => {
 
   config.save_dir = config.save_dir || defaultConfig.save_dir;
   config.default_icon_size = config.default_icon_size || defaultConfig.default_icon_size;
+  config.component_name = config.component_name || 'iconfont'
 
   cacheConfig = config;
 
diff --git a/src/libs/iconfont.json b/src/libs/iconfont.json
index 4dbfc53..4ff5d73 100644
--- a/src/libs/iconfont.json
+++ b/src/libs/iconfont.json
@@ -1,10 +1,11 @@
 {
   "symbol_url": "请参考README.md，复制 http://iconfont.cn 官网提供的JS链接",
-  "save_dir": "./src/components/iconfont",
+  "save_dir": "./components/iconfont",
   "use_typescript": false,
   "platforms": "*",
   "use_rpx": true,
   "trim_icon_prefix": "icon",
   "default_icon_size": 18,
-  "design_width":  750
+  "design_width":  750,
+  "component_name": "iconfont"
 }
diff --git a/src/libs/replace.ts b/src/libs/replace.ts
index 3cd94a8..043573c 100644
--- a/src/libs/replace.ts
+++ b/src/libs/replace.ts
@@ -30,3 +30,11 @@ export const replaceRelativePath = (content: string, saveDir: string) => {
     .replace('\\', '/');
   return content.replace(/#relativePath#/g, relativePath);
 };
+
+export const replaceComponentName = (content: string, componentName: string) => {
+  return content.replace(/#component-name#/g, componentName);
+};
+
+export const replaceComponentNameCamelCase = (content: string, componentName: string) => {
+  return content.replace(/#ComponentName#/g, componentName);
+};
diff --git a/src/templates/helper.d.ts.template b/src/templates/helper.d.ts.template
index 24a9a53..57594f5 100644
--- a/src/templates/helper.d.ts.template
+++ b/src/templates/helper.d.ts.template
@@ -1,2 +1,2 @@
 /* eslint-disable */
-export declare var useGlobalIconFont: () => { iconfont: string };
+export declare var useGlobalIconFont: () => { '#component-name#': string };
diff --git a/src/templates/helper.js.template b/src/templates/helper.js.template
index 6c66d4e..0c83968 100644
--- a/src/templates/helper.js.template
+++ b/src/templates/helper.js.template
@@ -1,7 +1,7 @@
 /* eslint-disable */
 const useGlobalIconFont = () => {
   return {
-    iconfont: `#relativePath#/${process.env.TARO_ENV}/${process.env.TARO_ENV}`,
+    '#component-name#': `#relativePath#/${process.env.TARO_ENV}/${process.env.TARO_ENV}`,
   };
 };
 
diff --git a/src/templates/index.d.ts.template b/src/templates/index.d.ts.template
index 5a18938..8cae9fd 100644
--- a/src/templates/index.d.ts.template
+++ b/src/templates/index.d.ts.template
@@ -8,6 +8,6 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-declare const IconFont: FunctionComponent<Props>;
+declare const #ComponentName#: FunctionComponent<Props>;
 
-export default IconFont;
+export default #ComponentName#;
diff --git a/src/templates/index.h5.js.template b/src/templates/index.h5.js.template
index faa759c..62175e4 100644
--- a/src/templates/index.h5.js.template
+++ b/src/templates/index.h5.js.template
@@ -4,14 +4,14 @@ import React from 'react';
 #rpx-1:import Taro from '@tarojs/taro';:#
 import Icon from './h5';
 
-const IconFont = (props) => {
+const #ComponentName# = (props) => {
   const { name, size, color, style } = props;
 
   return <Icon name={name} size={#rpx-1:parseFloat(Taro.pxTransform(size, #designWidth#)):##rpx-0:size:#} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+#ComponentName#.defaultProps = {
   size: #size#,
 };
 
-export default IconFont;
+export default #ComponentName#;
diff --git a/src/templates/index.h5.tsx.template b/src/templates/index.h5.tsx.template
index f90737d..b5df44f 100644
--- a/src/templates/index.h5.tsx.template
+++ b/src/templates/index.h5.tsx.template
@@ -14,14 +14,14 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-const IconFont: FunctionComponent<Props> = (props) => {
+const #ComponentName#: FunctionComponent<Props> = (props) => {
   const { name, size, color, style } = props;
 
   return <Icon name={name} size={#rpx-1:parseFloat(Taro.pxTransform(size, #designWidth#)):##rpx-0:size:#} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+#ComponentName#.defaultProps = {
   size: #size#,
 };
 
-export default IconFont;
+export default #ComponentName#;
diff --git a/src/templates/index.js.template b/src/templates/index.js.template
index 9236f4b..e5a1a2a 100644
--- a/src/templates/index.js.template
+++ b/src/templates/index.js.template
@@ -1,7 +1,7 @@
 /* eslint-disable */
 
-const IconFont = () => {
+const #ComponentName# = () => {
   return null;
 };
 
-export default IconFont;
+export default #ComponentName#;
diff --git a/src/templates/index.platform.js.template b/src/templates/index.platform.js.template
index cf2dd44..26860e4 100644
--- a/src/templates/index.platform.js.template
+++ b/src/templates/index.platform.js.template
@@ -3,14 +3,14 @@
 import React from 'react';
 #rpx-1:import Taro from '@tarojs/taro';:#
 
-const IconFont = (props) => {
+const #ComponentName# = (props) => {
   const { name, size, color, style } = props;
 
-  return <iconfont name={name} size={#rpx-1:parseFloat(Taro.pxTransform(size)):##rpx-0:size:#} color={color} style={style} />;
+  return <#component-name# name={name} size={#rpx-1:parseFloat(Taro.pxTransform(size)):##rpx-0:size:#} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+#ComponentName#.defaultProps = {
   size: #size#,
 };
 
-export default IconFont;
+export default #ComponentName#;
diff --git a/src/templates/index.platform.tsx.template b/src/templates/index.platform.tsx.template
index 1f03887..d4e533a 100644
--- a/src/templates/index.platform.tsx.template
+++ b/src/templates/index.platform.tsx.template
@@ -13,15 +13,15 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-const IconFont: FunctionComponent<Props> = (props) => {
+const #ComponentName#: FunctionComponent<Props> = (props) => {
   const { name, size, color, style } = props;
 
   // @ts-ignore
-  return <iconfont name={name} size={#rpx-1:parseFloat(Taro.pxTransform(size)):##rpx-0:size:#} color={color} style={style} />;
+  return <#component-name# name={name} size={#rpx-1:parseFloat(Taro.pxTransform(size)):##rpx-0:size:#} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+#ComponentName#.defaultProps = {
   size: #size#,
 };
 
-export default IconFont;
+export default #ComponentName#;
diff --git a/src/templates/index.rn.js.template b/src/templates/index.rn.js.template
index 420a6d8..6bff1ea 100644
--- a/src/templates/index.rn.js.template
+++ b/src/templates/index.rn.js.template
@@ -4,14 +4,14 @@ import React from 'react';
 #rpx-1:import Taro from '@tarojs/taro';:#
 import Icon from './rn';
 
-const IconFont = (props) => {
+const #ComponentName# = (props) => {
   const { name, size, color, style } = props;
 
   return <Icon name={name} size={#rpx-1:parseFloat(Taro.pxTransform(size)):##rpx-0:size:#} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+#ComponentName#.defaultProps = {
   size: #size#,
 };
 
-export default IconFont;
+export default #ComponentName#;
diff --git a/src/templates/index.rn.tsx.template b/src/templates/index.rn.tsx.template
index 6a406ec..9048121 100644
--- a/src/templates/index.rn.tsx.template
+++ b/src/templates/index.rn.tsx.template
@@ -14,15 +14,15 @@ interface Props {
   style?: React.CSSProperties;
 }
 
-const IconFont: FunctionComponent<Props> = (props) => {
+const #ComponentName#: FunctionComponent<Props> = (props) => {
   const { name, size, color, style } = props;
 
   // @ts-ignore
   return <Icon name={name} size={#rpx-1:parseFloat(Taro.pxTransform(size)):##rpx-0:size:#} color={color} style={style} />;
 };
 
-IconFont.defaultProps = {
+#ComponentName#.defaultProps = {
   size: #size#,
 };
 
-export default IconFont;
+export default #ComponentName#;
diff --git a/src/templates/index.tsx.template b/src/templates/index.tsx.template
index d9f9fc3..18496af 100644
--- a/src/templates/index.tsx.template
+++ b/src/templates/index.tsx.template
@@ -12,8 +12,8 @@ export interface IconProps {
   style?: React.CSSProperties;
 }
 
-const IconFont: FunctionComponent<IconProps> = () => {
+const #ComponentName#: FunctionComponent<IconProps> = () => {
   return null;
 };
 
-export default IconFont;
+export default #ComponentName#;
diff --git a/yarn.lock b/yarn.lock
index 8908a66..120e44c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1852,6 +1852,11 @@ decamelize@^1.2.0:
   resolved "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
+decamelize@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/decamelize/-/decamelize-5.0.1.tgz#db11a92e58c741ef339fb0a2868d8a06a9a7b1e9"
+  integrity sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==
+
 decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"