diff --git a/scripts/doc-demo-extract-replace.js b/scripts/doc-demo-extract-replace.js
index faca63c579..ba9d9d7688 100644
--- a/scripts/doc-demo-extract-replace.js
+++ b/scripts/doc-demo-extract-replace.js
@@ -1,82 +1,82 @@
-const fs = require('fs')
-const path = require('path')
-const args = process.argv.slice(2)
-console.log(args)
+const fs = require("fs");
+const path = require("path");
+const args = process.argv.slice(2);
+console.log(args);
 const extractH5Demos = (i) => {
   const markdownFilePath = path.join(
     __dirname,
     `../src/packages/${args[i]}/doc.md`
-  )
-  let markdownContent = fs.readFileSync(markdownFilePath, 'utf-8')
+  );
+  let markdownContent = fs.readFileSync(markdownFilePath, "utf-8");
   const outputDirectory = path.join(
     __dirname,
     `../src/packages/${args[i]}/demos/h5`
-  )
-  const tsxRegex = /:::demo\r\n\r\n```tsx\r\n([\s\S]*?)```\r\n\r\n:::/g
-  let match
+  );
+  const tsxRegex = /:::demo\r\n\r\n```tsx\r\n([\s\S]*?)```\r\n\r\n:::/g;
+  let match;
   if (!fs.existsSync(outputDirectory)) {
-    fs.mkdirSync(outputDirectory, { recursive: true })
+    fs.mkdirSync(outputDirectory, { recursive: true });
   }
 
-  let counter = 1
+  let counter = 1;
   while ((match = tsxRegex.exec(markdownContent)) !== null) {
-    let codeContent = match[1]
+    let codeContent = match[1];
     codeContent = codeContent.replace(
       /const \w+ = \(\) => \{/,
       `const Demo${counter} = () => {`
-    )
+    );
     codeContent = codeContent.replace(
       /export default \w+/,
       `export default Demo${counter}`
-    )
-    const fileName = `/demos/h5/demo${counter}.tsx`
+    );
+    const fileName = `/demos/h5/demo${counter}.tsx`;
     fs.writeFileSync(
       path.join(__dirname, `../src/packages/${args[i]}/${fileName}`),
       codeContent.trim()
-    )
-    counter++
+    );
+    counter++;
   }
-  fs.writeFileSync(markdownFilePath, markdownContent)
-  console.log('======H5 demos have been extracted successfully======')
-}
+  fs.writeFileSync(markdownFilePath, markdownContent);
+  console.log("======H5 demos have been extracted successfully======");
+};
 const extractTaroDemos = (i) => {
   const markdownFilePath = path.join(
     __dirname,
-    `../src/packages/${args[i]}/doc.md`
-  )
-  let markdownContent = fs.readFileSync(markdownFilePath, 'utf-8')
+    `../src/packages/${args[i]}/doc.taro.md`
+  );
+  let markdownContent = fs.readFileSync(markdownFilePath, "utf-8");
   const outputDirectory = path.join(
     __dirname,
     `../src/packages/${args[i]}/demos/taro`
-  )
-  const tsxRegex = /:::demo\r\n\r\n```tsx\r\n([\s\S]*?)```\r\n\r\n:::/g
-  let match
+  );
+  const tsxRegex = /:::demo\r\n\r\n```tsx\r\n([\s\S]*?)```\r\n\r\n:::/g;
+  let match;
   if (!fs.existsSync(outputDirectory)) {
-    fs.mkdirSync(outputDirectory, { recursive: true })
+    fs.mkdirSync(outputDirectory, { recursive: true });
   }
 
-  let counter = 1
+  let counter = 1;
   while ((match = tsxRegex.exec(markdownContent)) !== null) {
-    let codeContent = match[1]
+    let codeContent = match[1];
     codeContent = codeContent.replace(
       /const \w+ = \(\) => \{/,
       `const Demo${counter} = () => {`
-    )
+    );
     codeContent = codeContent.replace(
       /export default \w+/,
       `export default Demo${counter}`
-    )
-    const fileName = `/demos/taro/demo${counter}.tsx`
+    );
+    const fileName = `/demos/taro/demo${counter}.tsx`;
     fs.writeFileSync(
       path.join(__dirname, `../src/packages/${args[i]}/${fileName}`),
       codeContent.trim()
-    )
+    );
 
-    counter++
+    counter++;
   }
-  fs.writeFileSync(markdownFilePath, markdownContent)
-  console.log('======Taro demos have been extracted successfully======')
-}
+  fs.writeFileSync(markdownFilePath, markdownContent);
+  console.log("======Taro demos have been extracted successfully======");
+};
 
 const replaceAllDocs = (i) => {
   const filePaths = [
@@ -84,12 +84,12 @@ const replaceAllDocs = (i) => {
     path.join(__dirname, `../src/packages/${args[i]}/doc.en-US.md`),
     path.join(__dirname, `../src/packages/${args[i]}/doc.taro.md`),
     path.join(__dirname, `../src/packages/${args[i]}/doc.zh-TW.md`),
-  ]
+  ];
   filePaths.forEach((path, index) => {
-    let markdownContent = fs.readFileSync(path, 'utf-8')
+    let markdownContent = fs.readFileSync(path, "utf-8");
 
-    const tsxRegex = /:::demo\r\n\r\n```tsx\r\n([\s\S]*?)```\r\n\r\n:::/g
-    const arr = markdownContent.match(tsxRegex)
+    const tsxRegex = /:::demo\r\n\r\n```tsx\r\n([\s\S]*?)```\r\n\r\n:::/g;
+    const arr = markdownContent.match(tsxRegex);
     for (let i = 0; i < arr.length; i++) {
       markdownContent = markdownContent.replace(
         arr[i],
@@ -100,14 +100,14 @@ const replaceAllDocs = (i) => {
           : `:::demo\r\n\r\n<CodeBlock src='h5/demo${
               i + 1
             }.tsx'></CodeBlock>\r\n\r\n:::`
-      )
+      );
     }
-    fs.writeFileSync(path, markdownContent)
-  })
-  console.log('======All docs have replaced successfully======')
-}
+    fs.writeFileSync(path, markdownContent);
+  });
+  console.log("======All docs have replaced successfully======");
+};
 for (let i = 0; i < args.length; i++) {
-  extractH5Demos(i)
-  extractTaroDemos(i)
-  replaceAllDocs(i)
+  extractH5Demos(i);
+  extractTaroDemos(i);
+  replaceAllDocs(i);
 }
diff --git a/src/packages/icon/demo.taro.tsx b/src/packages/icon/demo.taro.tsx
index 1cdea2f282..adcd570d72 100644
--- a/src/packages/icon/demo.taro.tsx
+++ b/src/packages/icon/demo.taro.tsx
@@ -1,27 +1,17 @@
 import React, { useState } from 'react'
 import Taro from '@tarojs/taro'
 import '@nutui/icons-react-taro/dist/style_iconfont.css'
-import {
-  Add,
-  IconFontConfig,
-  IconFont,
-  Dongdong,
-  UserAdd,
-} from '@nutui/icons-react-taro'
+import { IconFontConfig, IconFont } from '@nutui/icons-react-taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import { Cell, Toast } from '@/packages/nutui.react.taro'
 import '@/packages/icon/demo.scss'
 import Header from '@/sites/components/header'
 import { camelCase } from '@/utils/camel-case'
-
-interface T {
-  '84aa6bce': string
-  dab8a74f: string
-  svg: string
-  '52c15454': string
-  '7aeb5407': string
-  f2e6c6d6: string
-}
+import Demo1 from './demos/taro/demo1'
+import Demo2 from './demos/taro/demo2'
+import Demo3 from './demos/taro/demo3'
+import Demo4 from './demos/taro/demo4'
+import Demo5 from './demos/taro/demo5'
 
 const generateCopyText = (name: string) => {
   return `<${camelCase(name, { pascalCase: true })} />`
@@ -70,7 +60,7 @@ ul li span .nutui-iconfont {
 `
 
 const IconDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       '84aa6bce': '基础用法',
       svg: 'SVG 按需使用',
@@ -89,10 +79,10 @@ const IconDemo = () => {
     },
     'en-US': {
       '84aa6bce': 'Basic Usage',
-      svg: 'SVG import on demand',
-      dab8a74f: 'Image link',
-      '52c15454': 'IconFont color',
-      '7aeb5407': 'IconFont size',
+      svg: 'SVG import On Demand',
+      dab8a74f: 'Image Link',
+      '52c15454': 'IconFont Color',
+      '7aeb5407': 'IconFont Size',
       f2e6c6d6: 'Base IconFont',
     },
   })
@@ -131,34 +121,23 @@ const IconDemo = () => {
         />
         <h2>{translated.svg}</h2>
         <Cell>
-          <Add color="red" />
-          <UserAdd />
-          <Dongdong />
+          <Demo1 />
         </Cell>
         <h2>{translated['84aa6bce']}</h2>
         <Cell>
-          <IconFont name="dongdong" />
-          <IconFont name="add" />
-          <IconFont name="minus" />
+          <Demo2 />
         </Cell>
         <h2>{translated.dab8a74f}</h2>
         <Cell>
-          <IconFont
-            size="40"
-            name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-          />
+          <Demo3 />
         </Cell>
         <h2>{translated['52c15454']}</h2>
         <Cell>
-          <IconFont name="dongdong" color="#fa2c19" />
-          <IconFont name="dongdong" color="#64b578" />
-          <IconFont name="dongdong" color="#ffd700" />
+          <Demo4 />
         </Cell>
         <h2>{translated['7aeb5407']}</h2>
         <Cell style={{ alignItems: 'center' }}>
-          <IconFont name="dongdong" size="16" />
-          <IconFont name="dongdong" size="20" />
-          <IconFont name="dongdong" size="24" />
+          <Demo5 />
         </Cell>
         {(IconFontConfig as any).data.map((item: any) => {
           return (
diff --git a/src/packages/icon/demo.tsx b/src/packages/icon/demo.tsx
index 14f47b5d25..e3d76e526f 100644
--- a/src/packages/icon/demo.tsx
+++ b/src/packages/icon/demo.tsx
@@ -1,25 +1,15 @@
 import React from 'react'
 import '@nutui/icons-react/dist/style_iconfont.css'
-import {
-  Add,
-  IconFontConfig,
-  IconFont,
-  Dongdong,
-  UserAdd,
-} from '@nutui/icons-react'
+import { IconFontConfig, IconFont } from '@nutui/icons-react'
 import { useTranslate } from '../../sites/assets/locale'
 import Cell from '../cell'
 import Toast from '../toast'
 import { camelCase } from '@/utils/camel-case'
-
-interface T {
-  '84aa6bce': string
-  dab8a74f: string
-  svg: string
-  '52c15454': string
-  '7aeb5407': string
-  f2e6c6d6: string
-}
+import Demo1 from './demos/h5/demo1'
+import Demo2 from './demos/h5/demo2'
+import Demo3 from './demos/h5/demo3'
+import Demo4 from './demos/h5/demo4'
+import Demo5 from './demos/h5/demo5'
 
 const generateCopyText = (name: string) => {
   return `<${camelCase(name, { pascalCase: true })} />`
@@ -67,9 +57,8 @@ ul li span .nutui-iconfont {
   margin: 16px 0 16px;
 }
 `
-
 const IconDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       '84aa6bce': '基础用法',
       svg: 'SVG 按需使用',
@@ -88,10 +77,10 @@ const IconDemo = () => {
     },
     'en-US': {
       '84aa6bce': 'Basic Usage',
-      svg: 'SVG import on demand',
-      dab8a74f: 'Image link',
-      '52c15454': 'IconFont color',
-      '7aeb5407': 'IconFont size',
+      svg: 'SVG Import On Demand',
+      dab8a74f: 'Image Link',
+      '52c15454': 'IconFont Color',
+      '7aeb5407': 'IconFont Size',
       f2e6c6d6: 'Base IconFont',
     },
   })
@@ -102,34 +91,23 @@ const IconDemo = () => {
       <div className="demo">
         <h2>{translated.svg}</h2>
         <Cell>
-          <Add color="red" />
-          <UserAdd />
-          <Dongdong />
+          <Demo1 />
         </Cell>
         <h2>{translated['84aa6bce']}</h2>
         <Cell>
-          <IconFont name="dongdong" />
-          <IconFont name="add" />
-          <IconFont name="minus" />
+          <Demo2 />
         </Cell>
         <h2>{translated.dab8a74f}</h2>
         <Cell>
-          <IconFont
-            size="40"
-            name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-          />
+          <Demo3 />
         </Cell>
         <h2>{translated['52c15454']}</h2>
         <Cell>
-          <IconFont name="dongdong" color="#fa2c19" />
-          <IconFont name="dongdong" color="#64b578" />
-          <IconFont name="dongdong" color="#ffd700" />
+          <Demo4 />
         </Cell>
         <h2>{translated['7aeb5407']}</h2>
         <Cell style={{ alignItems: 'center' }}>
-          <IconFont name="dongdong" size="16" />
-          <IconFont name="dongdong" size="20" />
-          <IconFont name="dongdong" size="24" />
+          <Demo5 />
         </Cell>
         {(IconFontConfig as any).data.map((item: any) => {
           return (
diff --git a/src/packages/icon/demos/h5/demo1.tsx b/src/packages/icon/demos/h5/demo1.tsx
new file mode 100644
index 0000000000..8ec63a78ef
--- /dev/null
+++ b/src/packages/icon/demos/h5/demo1.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Add, Dongdong, UserAdd } from '@nutui/icons-react'
+
+const Demo1 = () => {
+  return (
+    <>
+      <Add color="red" />
+      <UserAdd />
+      <Dongdong />
+    </>
+  )
+}
+export default Demo1
diff --git a/src/packages/icon/demos/h5/demo2.tsx b/src/packages/icon/demos/h5/demo2.tsx
new file mode 100644
index 0000000000..36c23afad1
--- /dev/null
+++ b/src/packages/icon/demos/h5/demo2.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { IconFont } from '@nutui/icons-react'
+
+const Demo2 = () => {
+  return (
+    <>
+      <IconFont name="dongdong" />
+      <IconFont name="add" />
+      <IconFont name="minus" />
+    </>
+  )
+}
+export default Demo2
diff --git a/src/packages/icon/demos/h5/demo3.tsx b/src/packages/icon/demos/h5/demo3.tsx
new file mode 100644
index 0000000000..8c3865f120
--- /dev/null
+++ b/src/packages/icon/demos/h5/demo3.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { IconFont } from '@nutui/icons-react'
+
+const Demo3 = () => {
+  return (
+    <>
+      <IconFont
+        size="40"
+        name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+      />
+    </>
+  )
+}
+export default Demo3
diff --git a/src/packages/icon/demos/h5/demo4.tsx b/src/packages/icon/demos/h5/demo4.tsx
new file mode 100644
index 0000000000..d2a82a1ce6
--- /dev/null
+++ b/src/packages/icon/demos/h5/demo4.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { IconFont } from '@nutui/icons-react'
+
+const Demo4 = () => {
+  return (
+    <>
+      <IconFont name="dongdong" color="#fa2c19" />
+      <IconFont name="dongdong" color="#64b578" />
+      <IconFont name="dongdong" color="#ffd700" />
+    </>
+  )
+}
+
+export default Demo4
diff --git a/src/packages/icon/demos/h5/demo5.tsx b/src/packages/icon/demos/h5/demo5.tsx
new file mode 100644
index 0000000000..272e876b8f
--- /dev/null
+++ b/src/packages/icon/demos/h5/demo5.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { IconFont } from '@nutui/icons-react'
+
+const Demo5 = () => {
+  return (
+    <>
+      <IconFont name="dongdong" size="16" />
+      <IconFont name="dongdong" size="20" />
+      <IconFont name="dongdong" size="24" />
+    </>
+  )
+}
+
+export default Demo5
diff --git a/src/packages/icon/demos/taro/demo1.tsx b/src/packages/icon/demos/taro/demo1.tsx
new file mode 100644
index 0000000000..923865412c
--- /dev/null
+++ b/src/packages/icon/demos/taro/demo1.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Add, Dongdong, UserAdd } from '@nutui/icons-react-taro'
+
+const Demo1 = () => {
+  return (
+    <>
+      <Add color="red" />
+      <UserAdd />
+      <Dongdong />
+    </>
+  )
+}
+export default Demo1
diff --git a/src/packages/icon/demos/taro/demo2.tsx b/src/packages/icon/demos/taro/demo2.tsx
new file mode 100644
index 0000000000..e961801dfd
--- /dev/null
+++ b/src/packages/icon/demos/taro/demo2.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { IconFont } from '@nutui/icons-react-taro'
+
+const Demo2 = () => {
+  return (
+    <>
+      <IconFont name="dongdong" />
+      <IconFont name="add" />
+      <IconFont name="minus" />
+    </>
+  )
+}
+export default Demo2
diff --git a/src/packages/icon/demos/taro/demo3.tsx b/src/packages/icon/demos/taro/demo3.tsx
new file mode 100644
index 0000000000..d17dbf28c5
--- /dev/null
+++ b/src/packages/icon/demos/taro/demo3.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { IconFont } from '@nutui/icons-react-taro'
+
+const Demo3 = () => {
+  return (
+    <>
+      <IconFont
+        size="40"
+        name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+      />
+    </>
+  )
+}
+export default Demo3
diff --git a/src/packages/icon/demos/taro/demo4.tsx b/src/packages/icon/demos/taro/demo4.tsx
new file mode 100644
index 0000000000..4b4cb3ee7e
--- /dev/null
+++ b/src/packages/icon/demos/taro/demo4.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { IconFont } from '@nutui/icons-react-taro'
+
+const Demo4 = () => {
+  return (
+    <>
+      <IconFont name="dongdong" color="#fa2c19" />
+      <IconFont name="dongdong" color="#64b578" />
+      <IconFont name="dongdong" color="#ffd700" />
+    </>
+  )
+}
+
+export default Demo4
diff --git a/src/packages/icon/demos/taro/demo5.tsx b/src/packages/icon/demos/taro/demo5.tsx
new file mode 100644
index 0000000000..cc1b7c2f6e
--- /dev/null
+++ b/src/packages/icon/demos/taro/demo5.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { IconFont } from '@nutui/icons-react-taro'
+
+const Demo5 = () => {
+  return (
+    <>
+      <IconFont name="dongdong" size="16" />
+      <IconFont name="dongdong" size="20" />
+      <IconFont name="dongdong" size="24" />
+    </>
+  )
+}
+
+export default Demo5
diff --git a/src/packages/icon/doc.en-US.md b/src/packages/icon/doc.en-US.md
index 85971379a9..f19edee41a 100644
--- a/src/packages/icon/doc.en-US.md
+++ b/src/packages/icon/doc.en-US.md
@@ -18,19 +18,7 @@ How to load components on demand, see @nutui/icons-react/dist/types/index.d.ts f
 
 :::demo
 
-```tsx
-import React from "react";
-import { Add, Dongdong, UserAdd } from '@nutui/icons-react'
-
-const App = () => {
-  return <>
-    <Add color="red" />
-    <UserAdd />
-    <Dongdong />
-  </>
-}
-
-```
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
 :::
 
@@ -58,20 +46,7 @@ The `name` attribute of `Icon` supports passing in the icon name or image link.
 
 :::demo
 
-```tsx
-import React from "react";
-import { IconFont } from '@nutui/icons-react'
-
-const App = () => {
-  return <>
-    <IconFont name="dongdong" />
-    <IconFont name="add" />
-    <IconFont name="minus" />
-  </>
-}
-export default App;
-
-```
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
 
 :::
 
@@ -81,21 +56,7 @@ The `name` attribute of `Icon` supports passing in the icon name or image link.
 
 :::demo
 
-```tsx
-import React from "react";
-import { IconFont } from '@nutui/icons-react'
-
-const App = () => {
-  return <>
-    <IconFont
-      size="40"
-      name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-    />
-  </>
-}
-export default App;
-
-```
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
 
 :::
 
@@ -105,20 +66,7 @@ The `color` property of `Icon` is used to set the color of the icon.
 
 :::demo
 
-```tsx
-import React from "react";
-import { IconFont } from '@nutui/icons-react'
-
-const App = () => {
-  return <>
-    <IconFont name="dongdong" color="#fa2c19" />
-    <IconFont name="dongdong" color="#64b578" />
-    <IconFont name="dongdong" color="#ffd700" />
-  </>
-}
-
-export default App;
-```
+<CodeBlock src='h5/demo4.tsx'></CodeBlock>
 
 :::
 
@@ -128,20 +76,7 @@ The `size` attribute of `Icon` is used to set the size of the icon, and the defa
 
 :::demo
 
-```tsx
-import React from "react";
-import { IconFont } from '@nutui/icons-react'
-
-const App = () => {
-  return <>
-    <IconFont name="dongdong" size="16" />
-    <IconFont name="dongdong" size="20" />
-    <IconFont name="dongdong" size="24" />
-  </>
-}
-
-export default App;
-```
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
 
 :::
 
diff --git a/src/packages/icon/doc.md b/src/packages/icon/doc.md
index 3579a314be..2e0892fe32 100644
--- a/src/packages/icon/doc.md
+++ b/src/packages/icon/doc.md
@@ -17,19 +17,7 @@ npm i --save @nutui/icons-react
 按需加载组件使用方式，可选项见 @nutui/icons-react/dist/types/index.d.ts
 :::demo
 
-```tsx
-import React from "react";
-import { Add, Dongdong, UserAdd } from '@nutui/icons-react'
-
-const App = () => {
-  return <>
-    <Add color="red" />
-    <UserAdd />
-    <Dongdong />
-  </>
-}
-
-```
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
 :::
 
@@ -57,20 +45,7 @@ import { IconFont } from '@nutui/icons-react'
 
 :::demo
 
-```tsx
-import React from "react";
-import { IconFont } from '@nutui/icons-react'
-
-const App = () => {
-  return <>
-    <IconFont name="dongdong" />
-    <IconFont name="add" />
-    <IconFont name="minus" />
-  </>
-}
-export default App;
-
-```
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
 
 :::
 
@@ -80,21 +55,7 @@ export default App;
 
 :::demo
 
-```tsx
-import React from "react";
-import { IconFont } from '@nutui/icons-react'
-
-const App = () => {
-  return <>
-    <IconFont
-      size="40"
-      name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-    />
-  </>
-}
-export default App;
-
-```
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
 
 :::
 
@@ -104,20 +65,7 @@ export default App;
 
 :::demo
 
-```tsx
-import React from "react";
-import { IconFont } from '@nutui/icons-react'
-
-const App = () => {
-  return <>
-    <IconFont name="dongdong" color="#fa2c19" />
-    <IconFont name="dongdong" color="#64b578" />
-    <IconFont name="dongdong" color="#ffd700" />
-  </>
-}
-
-export default App;
-```
+<CodeBlock src='h5/demo4.tsx'></CodeBlock>
 
 :::
 
@@ -127,20 +75,7 @@ export default App;
 
 :::demo
 
-```tsx
-import React from "react";
-import { IconFont } from '@nutui/icons-react'
-
-const App = () => {
-  return <>
-    <IconFont name="dongdong" size="16" />
-    <IconFont name="dongdong" size="20" />
-    <IconFont name="dongdong" size="24" />
-  </>
-}
-
-export default App;
-```
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
 
 :::
 
diff --git a/src/packages/icon/doc.taro.md b/src/packages/icon/doc.taro.md
index 8057cc5bd3..67c47070df 100644
--- a/src/packages/icon/doc.taro.md
+++ b/src/packages/icon/doc.taro.md
@@ -20,19 +20,7 @@ npm i --save @nutui/icons-react-taro
 
 :::demo
 
-```tsx
-import React from "react";
-import { Add, Dongdong, UserAdd } from '@nutui/icons-react-taro'
-
-const App = () => {
-  return <>
-    <Add color="red" />
-    <UserAdd />
-    <Dongdong />
-  </>
-}
-
-```
+<CodeBlock src='taro/demo1.tsx'></CodeBlock>
 
 :::
 
@@ -60,20 +48,7 @@ import { IconFont } from '@nutui/icons-react-taro'
 
 :::demo
 
-```tsx
-import React from "react";
-import { IconFont } from '@nutui/icons-react-taro'
-
-const App = () => {
-  return <>
-    <IconFont name="dongdong" />
-    <IconFont name="add" />
-    <IconFont name="minus" />
-  </>
-}
-export default App;
-
-```
+<CodeBlock src='taro/demo2.tsx'></CodeBlock>
 
 :::
 
@@ -83,21 +58,7 @@ export default App;
 
 :::demo
 
-```tsx
-import React from "react";
-import { IconFont } from '@nutui/icons-react-taro'
-
-const App = () => {
-  return <>
-    <IconFont
-      size="40"
-      name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-    />
-  </>
-}
-export default App;
-
-```
+<CodeBlock src='taro/demo3.tsx'></CodeBlock>
 
 :::
 
@@ -107,20 +68,7 @@ export default App;
 
 :::demo
 
-```tsx
-import React from "react";
-import { IconFont } from '@nutui/icons-react-taro'
-
-const App = () => {
-  return <>
-    <IconFont name="dongdong" color="#fa2c19" />
-    <IconFont name="dongdong" color="#64b578" />
-    <IconFont name="dongdong" color="#ffd700" />
-  </>
-}
-
-export default App;
-```
+<CodeBlock src='taro/demo4.tsx'></CodeBlock>
 
 :::
 
@@ -130,20 +78,7 @@ export default App;
 
 :::demo
 
-```tsx
-import React from "react";
-import { IconFont } from '@nutui/icons-react-taro'
-
-const App = () => {
-  return <>
-    <IconFont name="dongdong" size="16" />
-    <IconFont name="dongdong" size="20" />
-    <IconFont name="dongdong" size="24" />
-  </>
-}
-
-export default App;
-```
+<CodeBlock src='taro/demo5.tsx'></CodeBlock>
 
 :::
 
diff --git a/src/packages/icon/doc.zh-TW.md b/src/packages/icon/doc.zh-TW.md
index 3c173b0b4d..83a83ddb60 100644
--- a/src/packages/icon/doc.zh-TW.md
+++ b/src/packages/icon/doc.zh-TW.md
@@ -18,19 +18,7 @@ npm i --save @nutui/icons-react
 
 :::demo
 
-```tsx
-import React from "react";
-import { Add, Dongdong, UserAdd } from '@nutui/icons-react'
-
-const App = () => {
-  return <>
-    <Add color="red" />
-    <UserAdd />
-    <Dongdong />
-  </>
-}
-
-```
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
 :::
 
@@ -58,20 +46,7 @@ import { IconFont } from '@nutui/icons-react'
 
 :::demo
 
-```tsx
-import React from "react";
-import { IconFont } from '@nutui/icons-react'
-
-const App = () => {
-  return <>
-    <IconFont name="dongdong" />
-    <IconFont name="add" />
-    <IconFont name="minus" />
-  </>
-}
-export default App;
-
-```
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
 
 :::
 
@@ -81,21 +56,7 @@ export default App;
 
 :::demo
 
-```tsx
-import React from "react";
-import { IconFont } from '@nutui/icons-react'
-
-const App = () => {
-  return <>
-    <IconFont
-      size="40"
-      name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-    />
-  </>
-}
-export default App;
-
-```
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
 
 :::
 
@@ -105,20 +66,7 @@ export default App;
 
 :::demo
 
-```tsx
-import React from "react";
-import { IconFont } from '@nutui/icons-react'
-
-const App = () => {
-  return <>
-    <IconFont name="dongdong" color="#fa2c19" />
-    <IconFont name="dongdong" color="#64b578" />
-    <IconFont name="dongdong" color="#ffd700" />
-  </>
-}
-
-export default App;
-```
+<CodeBlock src='h5/demo4.tsx'></CodeBlock>
 
 :::
 
@@ -128,20 +76,7 @@ export default App;
 
 :::demo
 
-```tsx
-import React from "react";
-import { IconFont } from '@nutui/icons-react'
-
-const App = () => {
-  return <>
-    <IconFont name="dongdong" size="16" />
-    <IconFont name="dongdong" size="20" />
-    <IconFont name="dongdong" size="24" />
-  </>
-}
-
-export default App;
-```
+<CodeBlock src='h5/demo5.tsx'></CodeBlock>
 
 :::