diff --git a/snapshots/demo-js/IconSetup.d.ts b/snapshots/demo-js/IconFontIconAlipay.d.ts
similarity index 67%
rename from snapshots/demo-js/IconSetup.d.ts
rename to snapshots/demo-js/IconFontIconAlipay.d.ts
index e6b6d5a..474fe24 100644
--- a/snapshots/demo-js/IconSetup.d.ts
+++ b/snapshots/demo-js/IconFontIconAlipay.d.ts
@@ -7,6 +7,6 @@ interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
   color?: string | string[];
 }
 
-declare const IconSetup: FunctionComponent<Props>;
+declare const IconFontIconAlipay: FunctionComponent<Props>;
 
-export default IconSetup;
+export default IconFontIconAlipay;
diff --git a/snapshots/demo-js/IconAlipay.js b/snapshots/demo-js/IconFontIconAlipay.js
similarity index 90%
rename from snapshots/demo-js/IconAlipay.js
rename to snapshots/demo-js/IconFontIconAlipay.js
index 170dd0b..28bd640 100644
--- a/snapshots/demo-js/IconAlipay.js
+++ b/snapshots/demo-js/IconFontIconAlipay.js
@@ -7,7 +7,7 @@ const DEFAULT_STYLE = {
   display: 'block',
 };
 
-const IconAlipay = ({ size, color, style: _style, ...rest }) => {
+const IconFontIconAlipay = ({ size, color, style: _style, ...rest }) => {
   const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
 
   return (
@@ -24,8 +24,8 @@ const IconAlipay = ({ size, color, style: _style, ...rest }) => {
   );
 };
 
-IconAlipay.defaultProps = {
+IconFontIconAlipay.defaultProps = {
   size: 14,
 };
 
-export default IconAlipay;
+export default IconFontIconAlipay;
diff --git a/snapshots/demo-js/IconUser.d.ts b/snapshots/demo-js/IconFontIconSetup.d.ts
similarity index 68%
rename from snapshots/demo-js/IconUser.d.ts
rename to snapshots/demo-js/IconFontIconSetup.d.ts
index bbbd50d..b104305 100644
--- a/snapshots/demo-js/IconUser.d.ts
+++ b/snapshots/demo-js/IconFontIconSetup.d.ts
@@ -7,6 +7,6 @@ interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
   color?: string | string[];
 }
 
-declare const IconUser: FunctionComponent<Props>;
+declare const IconFontIconSetup: FunctionComponent<Props>;
 
-export default IconUser;
+export default IconFontIconSetup;
diff --git a/snapshots/demo-js/IconSetup.js b/snapshots/demo-js/IconFontIconSetup.js
similarity index 97%
rename from snapshots/demo-js/IconSetup.js
rename to snapshots/demo-js/IconFontIconSetup.js
index efe0e28..ee00fc5 100644
--- a/snapshots/demo-js/IconSetup.js
+++ b/snapshots/demo-js/IconFontIconSetup.js
@@ -7,7 +7,7 @@ const DEFAULT_STYLE = {
   display: 'block',
 };
 
-const IconSetup = ({ size, color, style: _style, ...rest }) => {
+const IconFontIconSetup = ({ size, color, style: _style, ...rest }) => {
   const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
 
   return (
@@ -60,8 +60,8 @@ const IconSetup = ({ size, color, style: _style, ...rest }) => {
   );
 };
 
-IconSetup.defaultProps = {
+IconFontIconSetup.defaultProps = {
   size: 14,
 };
 
-export default IconSetup;
+export default IconFontIconSetup;
diff --git a/snapshots/demo-js/IconAlipay.d.ts b/snapshots/demo-js/IconFontIconUser.d.ts
similarity index 68%
rename from snapshots/demo-js/IconAlipay.d.ts
rename to snapshots/demo-js/IconFontIconUser.d.ts
index 04866c0..4479e38 100644
--- a/snapshots/demo-js/IconAlipay.d.ts
+++ b/snapshots/demo-js/IconFontIconUser.d.ts
@@ -7,6 +7,6 @@ interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
   color?: string | string[];
 }
 
-declare const IconAlipay: FunctionComponent<Props>;
+declare const IconFontIconUser: FunctionComponent<Props>;
 
-export default IconAlipay;
+export default IconFontIconUser;
diff --git a/snapshots/demo-js/IconUser.js b/snapshots/demo-js/IconFontIconUser.js
similarity index 94%
rename from snapshots/demo-js/IconUser.js
rename to snapshots/demo-js/IconFontIconUser.js
index b1b497f..e5403bc 100644
--- a/snapshots/demo-js/IconUser.js
+++ b/snapshots/demo-js/IconFontIconUser.js
@@ -7,7 +7,7 @@ const DEFAULT_STYLE = {
   display: 'block',
 };
 
-const IconUser = ({ size, color, style: _style, ...rest }) => {
+const IconFontIconUser = ({ size, color, style: _style, ...rest }) => {
   const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
 
   return (
@@ -24,8 +24,8 @@ const IconUser = ({ size, color, style: _style, ...rest }) => {
   );
 };
 
-IconUser.defaultProps = {
+IconFontIconUser.defaultProps = {
   size: 14,
 };
 
-export default IconUser;
+export default IconFontIconUser;
diff --git a/snapshots/demo-js/index.d.ts b/snapshots/demo-js/index.d.ts
index f40d105..9382c0e 100644
--- a/snapshots/demo-js/index.d.ts
+++ b/snapshots/demo-js/index.d.ts
@@ -1,9 +1,9 @@
 /* eslint-disable */
 
 import { SVGAttributes, FunctionComponent } from 'react';
-export { default as IconAlipay } from './IconAlipay';
-export { default as IconUser } from './IconUser';
-export { default as IconSetup } from './IconSetup';
+export { default as IconFontIconAlipay } from './IconFontIconAlipay';
+export { default as IconFontIconUser } from './IconFontIconUser';
+export { default as IconFontIconSetup } from './IconFontIconSetup';
 
 interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
   name: 'alipay' | 'user' | 'setup';
diff --git a/snapshots/demo-js/index.js b/snapshots/demo-js/index.js
index fc5a41e..8bb9d82 100644
--- a/snapshots/demo-js/index.js
+++ b/snapshots/demo-js/index.js
@@ -1,21 +1,21 @@
 /* eslint-disable */
 
 import React from 'react';
-import IconAlipay from './IconAlipay';
-import IconUser from './IconUser';
-import IconSetup from './IconSetup';
-export { default as IconAlipay } from './IconAlipay';
-export { default as IconUser } from './IconUser';
-export { default as IconSetup } from './IconSetup';
+import IconFontIconAlipay from './IconFontIconAlipay';
+import IconFontIconUser from './IconFontIconUser';
+import IconFontIconSetup from './IconFontIconSetup';
+export { default as IconFontIconAlipay } from './IconFontIconAlipay';
+export { default as IconFontIconUser } from './IconFontIconUser';
+export { default as IconFontIconSetup } from './IconFontIconSetup';
 
 const IconFont = ({ name, ...rest }) => {
   switch (name) {
     case 'alipay':
-      return <IconAlipay {...rest} />;
+      return <IconFontIconAlipay {...rest} />;
     case 'user':
-      return <IconUser {...rest} />;
+      return <IconFontIconUser {...rest} />;
     case 'setup':
-      return <IconSetup {...rest} />;
+      return <IconFontIconSetup {...rest} />;
 
   }
 
diff --git a/snapshots/demo-ts/IconAlipay.tsx b/snapshots/demo-ts/IconFontIconAlipay.tsx
similarity index 90%
rename from snapshots/demo-ts/IconAlipay.tsx
rename to snapshots/demo-ts/IconFontIconAlipay.tsx
index 6a9a39e..c9d5502 100644
--- a/snapshots/demo-ts/IconAlipay.tsx
+++ b/snapshots/demo-ts/IconFontIconAlipay.tsx
@@ -13,7 +13,7 @@ const DEFAULT_STYLE: CSSProperties = {
   display: 'block',
 };
 
-const IconAlipay: FunctionComponent<Props> = ({ size, color, style: _style, ...rest }) => {
+const IconFontIconAlipay: FunctionComponent<Props> = ({ size, color, style: _style, ...rest }) => {
   const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
 
   return (
@@ -30,8 +30,8 @@ const IconAlipay: FunctionComponent<Props> = ({ size, color, style: _style, ...r
   );
 };
 
-IconAlipay.defaultProps = {
+IconFontIconAlipay.defaultProps = {
   size: 16,
 };
 
-export default IconAlipay;
+export default IconFontIconAlipay;
diff --git a/snapshots/demo-ts/IconSetup.tsx b/snapshots/demo-ts/IconFontIconSetup.tsx
similarity index 97%
rename from snapshots/demo-ts/IconSetup.tsx
rename to snapshots/demo-ts/IconFontIconSetup.tsx
index 86d0f99..36eedc7 100644
--- a/snapshots/demo-ts/IconSetup.tsx
+++ b/snapshots/demo-ts/IconFontIconSetup.tsx
@@ -13,7 +13,7 @@ const DEFAULT_STYLE: CSSProperties = {
   display: 'block',
 };
 
-const IconSetup: FunctionComponent<Props> = ({ size, color, style: _style, ...rest }) => {
+const IconFontIconSetup: FunctionComponent<Props> = ({ size, color, style: _style, ...rest }) => {
   const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
 
   return (
@@ -66,8 +66,8 @@ const IconSetup: FunctionComponent<Props> = ({ size, color, style: _style, ...re
   );
 };
 
-IconSetup.defaultProps = {
+IconFontIconSetup.defaultProps = {
   size: 16,
 };
 
-export default IconSetup;
+export default IconFontIconSetup;
diff --git a/snapshots/demo-ts/IconUser.tsx b/snapshots/demo-ts/IconFontIconUser.tsx
similarity index 93%
rename from snapshots/demo-ts/IconUser.tsx
rename to snapshots/demo-ts/IconFontIconUser.tsx
index 2ba6396..ae0d20e 100644
--- a/snapshots/demo-ts/IconUser.tsx
+++ b/snapshots/demo-ts/IconFontIconUser.tsx
@@ -13,7 +13,7 @@ const DEFAULT_STYLE: CSSProperties = {
   display: 'block',
 };
 
-const IconUser: FunctionComponent<Props> = ({ size, color, style: _style, ...rest }) => {
+const IconFontIconUser: FunctionComponent<Props> = ({ size, color, style: _style, ...rest }) => {
   const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
 
   return (
@@ -30,8 +30,8 @@ const IconUser: FunctionComponent<Props> = ({ size, color, style: _style, ...res
   );
 };
 
-IconUser.defaultProps = {
+IconFontIconUser.defaultProps = {
   size: 16,
 };
 
-export default IconUser;
+export default IconFontIconUser;
diff --git a/snapshots/demo-ts/index.tsx b/snapshots/demo-ts/index.tsx
index ba0d5d5..6371978 100644
--- a/snapshots/demo-ts/index.tsx
+++ b/snapshots/demo-ts/index.tsx
@@ -2,12 +2,12 @@
 /* eslint-disable */
 
 import React, { SVGAttributes, FunctionComponent } from 'react';
-import IconAlipay from './IconAlipay';
-import IconUser from './IconUser';
-import IconSetup from './IconSetup';
-export { default as IconAlipay } from './IconAlipay';
-export { default as IconUser } from './IconUser';
-export { default as IconSetup } from './IconSetup';
+import IconFontIconAlipay from './IconFontIconAlipay';
+import IconFontIconUser from './IconFontIconUser';
+import IconFontIconSetup from './IconFontIconSetup';
+export { default as IconFontIconAlipay } from './IconFontIconAlipay';
+export { default as IconFontIconUser } from './IconFontIconUser';
+export { default as IconFontIconSetup } from './IconFontIconSetup';
 
 export type IconNames = 'alipay' | 'user' | 'setup';
 
@@ -20,11 +20,11 @@ interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
 const IconFont: FunctionComponent<Props> = ({ name, ...rest }) => {
   switch (name) {
     case 'alipay':
-      return <IconAlipay {...rest} />;
+      return <IconFontIconAlipay {...rest} />;
     case 'user':
-      return <IconUser {...rest} />;
+      return <IconFontIconUser {...rest} />;
     case 'setup':
-      return <IconSetup {...rest} />;
+      return <IconFontIconSetup {...rest} />;
 
   }
 
diff --git a/src/libs/generateComponent.ts b/src/libs/generateComponent.ts
index 0782fd2..8695c6a 100644
--- a/src/libs/generateComponent.ts
+++ b/src/libs/generateComponent.ts
@@ -48,7 +48,7 @@ export const generateComponent = (data: XmlData, config: Config) => {
         (_, value) => value.replace(/^[-_.=+#@!~*]+(.+?)$/, '$1')
       )
       : iconId;
-    const componentName = upperFirst(camelCase(iconId));
+    const componentName = 'IconFont' + upperFirst(camelCase(iconId));
 
     names.push(iconIdAfterTrim);