fix(cli,ui): icon 文档和重构

affects: @varlet/cli, @varlet/ui

packages/varlet-cli/site/pc/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="varlet-site">
-    <div class="varlet-site-header var-elevation--2">
+    <div class="varlet-site-header var-elevation--1">
       <span class="varlet-site-header__logo">
         <img :src="header.logo" alt="" />
         <span>{{ title }}</span>

packages/varlet-cli/site/site.config.json

@@ -87,6 +87,13 @@
         },
         "doc": "dialog"
       },
+      {
+        "text": {
+          "zh-CN": "Icon 图标",
+          "en-US": "Icon"
+        },
+        "doc": "icon"
+      },
       {
         "text": {
           "zh-CN": "Loading 加载",
@@ -171,13 +178,6 @@
         },
         "doc": "image"
       },
-      {
-        "text": {
-          "zh-CN": "Icon 图标",
-          "en-US": "Icon"
-        },
-        "doc": "icon"
-      },
       {
         "text": {
           "zh-CN": "Rate 评分",

packages/varlet-ui/src/icon/Icon.vue

@@ -1,68 +1,66 @@
 <template>
-	<component
-		:is="isURL(name) ? 'img' : 'i'"
-		class="var-icon"
-		:class="[
-			`${namespace}--set`,
-			isURL(name) ? 'var-icon__image' : `${namespace}-${nextName}`,
-			tickTransition ? 'var-icon--hidden' : null,
-		]"
-		:src="isURL(name) ? nextName : null"
-		:style="{
-			transition: `all ${transition}ms`,
-			color,
-			fontSize: size,
-		}"
-		@click="handleClick"
-		v-bind="$attrs"
-	/>
+  <component
+    class="var-icon"
+    :is="isURL(name) ? 'img' : 'i'"
+    :class="[
+      `${namespace}--set`,
+      isURL(name) ? 'var-icon__image' : `${namespace}-${nextName}`,
+      shrinking ? 'var-icon--shrinking' : null,
+    ]"
+    :style="{
+      color,
+      transition: `all ${toNumber(transition)}ms`,
+      width: isURL(name) ? toPx(size) : null,
+      height: isURL(name) ? toPx(size) : null,
+      fontSize: toPx(size),
+    }"
+    :src="isURL(name) ? nextName : null"
+    v-bind="$attrs"
+    @click="onClick"
+  />
 </template>
 
 <script lang="ts">
 import { defineComponent, watch, ref, Ref, nextTick } from 'vue'
-import { isURL } from '../utils/shared'
+import { isURL, toNumber } from '../utils/shared'
 import { props } from './props'
+import { toPx } from '../utils/elements'
 
 export default defineComponent({
   name: 'VarIcon',
   inheritAttrs: false,
   props,
   setup(props) {
     const nextName: Ref<string | undefined> = ref('')
-    const tickTransition: Ref<boolean> = ref(false)
+    const shrinking: Ref<boolean> = ref(false)
 
-    watch(
-      () => props.name,
-      (newValue: string | undefined, oldValue: string | undefined) => {
-        if (oldValue === undefined || !props.transition) {
-          nextName.value = newValue
-          return
-        }
-
-        tickTransition.value = true
+    const handleNameChange = async (newName: string | undefined, oldName: string | undefined) => {
+      const { transition } = props
 
-        nextTick().then(() => {
-          setTimeout(() => {
-            if (oldValue !== undefined) {
-              nextName.value = newValue
-            }
+      if (oldName == null || toNumber(transition) === 0) {
+        nextName.value = newName
+        return
+      }
 
-            tickTransition.value = false
-          }, props.transition)
-        })
-      },
-      { immediate: true }
-    )
+      shrinking.value = true
+      await nextTick()
+      setTimeout(() => {
+        if (oldName != null) {
+          nextName.value = newName
+        }
 
-    const handleClick = (e: Event) => {
-      props.onClick?.(e)
+        shrinking.value = false
+      }, toNumber(transition))
     }
 
+    watch(() => props.name, handleNameChange, { immediate: true })
+
     return {
-      isURL,
       nextName,
-      tickTransition,
-      handleClick,
+      shrinking,
+      isURL,
+      toNumber,
+      toPx,
     }
   },
 })

packages/varlet-ui/src/icon/docs/en-US.md

@@ -0,0 +1,158 @@
+# Icon
+
+### Intro
+```html
+Font based icon library, also support web images.
+```
+Font icons are from [Material Design Icon](https://materialdesignicons.com/)
+
+### Install
+
+```js
+import { createApp } from 'vue';
+import { Icon } from '@varlet/ui';
+
+createApp().use(Icon)
+```
+
+### Icon Size
+
+```html
+<var-icon name="checkbox-marked-circle" />
+<var-icon name="checkbox-marked-circle" :size="26"/>
+```
+
+### Icon Color
+
+```html
+<var-icon name="checkbox-marked-circle" color="#2979ff" />
+<var-icon name="checkbox-marked-circle" color="#2979ff" :size="26"/>
+```
+
+### Use Image
+
+```html
+When the name passed in is a URL the img tag is displayed in cover mode. 
+Size is the width and height of the image.
+```
+
+```html
+<var-icon name="https://varlet-ui.github.io/cat.jpg" :size="32" />
+```
+
+### Events
+
+```html
+<var-icon 
+  name="checkbox-marked-circle"
+  color="#2979ff"
+  @click="() => Snackbar.success('Click success')"
+/>
+```
+
+```js
+import { Snackbar } from '@varlet/ui'
+
+export default {
+  setup() {
+    return { Snackbar }
+  },
+}
+```
+
+### Icon Animation
+
+```html
+When Transition (MS) is set and the icon is toggled by its name, trigger a toggle animation。
+```
+
+```html
+<var-icon color="#2979ff" :name="name" :transition="300" :size="30" />
+```
+
+```js
+export default {
+  setup() {
+    const name = ref('information')
+
+    const toggle = () => {
+      name.value = name.value === 'information' 
+        ? 'checkbox-marked-circle' 
+        : 'information'
+    }
+
+    return {
+      name,
+      toggle
+    }
+  },
+}
+```
+
+### Custom Icons
+```html
+First you need to set up your own font and install it into your project.
+Let's assume that we extend a font named my-icons.
+```
+
+```css
+/* Set the font */
+@font-face {
+  font-family: "my-icons";
+  src: url("https://xxx.my-icons.eot");
+  src: url("https://xxx.my-icons.eot") format("embedded-opentype"), 
+    url("https://xxx.my-icons.woff2") format("woff2"), 
+    url("https://xxx.my-icons.woff") format("woff"), 
+    url("https://xxx.my-icons.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* Font style */
+.my-icon--set,
+.my-icon--set::before {
+  position: relative;
+  display: inline-block;
+  font: normal normal normal 14px/1 "my-icons";
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Font names map code points */
+.my-icon-hot::before {
+  content: "\F000";
+}
+```
+
+```html
+Here you have successfully extended your icon library.
+So my-icon is your font namespace.
+You can use it this way:
+<var-icon namespace="my-icon" name="hot" />
+```
+
+## API
+
+### Props
+
+| Prop | Description | Type | Default | 
+| --- | --- | --- | --- | 
+| `name` | icon name | _string_ | `-` |
+| `size` | icon size | _string \| number_ | `-` |
+| `color` | icon color, Only applies to font icons | _string_ | `-` |  
+| `namespace` | Icon namespace, extensible custom icon library |  _string_ | `var-icon` |
+| `transition` | Transition animation time(ms) |  _string \| number_ | `0` |
+
+### Events
+
+| Event | Description | Arguments |
+| --- | --- | --- |
+| `click` | Triggered when you click on the icon | `event: Event` |
+
+### Theme Variables
+#### The following LESS variables can be overridden at build time to modify the theme style
+
+| Variable | Default |
+| --- | --- |
+| `@icon-size` | `20px` |