docs(Icon): use composition api

src/icon/demo/index.vue

@@ -95,7 +95,10 @@
 
 <script>
 import icons from '@vant/icons';
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 import { RED } from '../../utils/constant';
+import Notify from '../../notify';
 
 // from https://30secondsofcode.org
 function copyToClipboard(str) {
@@ -121,8 +124,7 @@ function copyToClipboard(str) {
   }
 }
 
-export default {
-  i18n: {
+const i18n = {
   'zh-CN': {
     title: '图标列表',
     badge: '徽标提示',
@@ -145,20 +147,14 @@ export default {
     color: 'Icon Color',
     size: 'Icon Size',
   },
-  },
-
-  data() {
-    this.RED = RED;
-    this.icons = icons;
-    return {
-      tab: 0,
-      demoIcon: 'chat-o',
-      demoImage: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',
 };
-  },
 
-  methods: {
-    copy(icon, option = {}) {
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const tab = ref(0);
+
+    const copy = (icon, option = {}) => {
       let tag = `<van-icon name="${icon}"`;
       if ('dot' in option) {
         tag = `${tag} ${option.dot ? 'dot' : ''}`;
@@ -175,13 +171,23 @@ export default {
       tag = `${tag} />`;
       copyToClipboard(tag);
 
-      this.$notify({
+      Notify({
         type: 'success',
         duration: 1500,
         className: 'demo-icon-notify',
-        message: `${this.t('copied')}：${tag}`,
+        message: `${t('copied')}：${tag}`,
       });
-    },
+    };
+
+    return {
+      t,
+      tab,
+      RED,
+      copy,
+      icons,
+      demoIcon: 'chat-o',
+      demoImage: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',
+    };
   },
 };
 </script>