feat(docs): add auto import and update icon (#4554)

docs/.vitepress/crowdin/en-US/component/demo-block.json

@@ -5,6 +5,6 @@
   "copy-code": "Copy code",
   "switch-button-option-text": "Switch to Options API",
   "switch-button-setup-text": "Switch to Composition API",
-  "copy-success": "Copied！",
+  "copy-success": "Copied!",
   "copy-error": "This browser does not support automatic copy！"
 }

docs/.vitepress/crowdin/en-US/component/icons.json

@@ -1,4 +1,4 @@
 {
-  "copy-success": "Copied！",
+  "copy-success": "Copied!",
   "copy-error": "Your browser does not support copy :("
 }

docs/.vitepress/vitepress/components/globals/icons.vue

@@ -43,8 +43,8 @@ const copySvgIcon = async (name, refs) => {
   <div style="text-align: right">
     <el-switch
       v-model="copyIcon"
-      active-text="Copy Icon Code"
+      active-text="Copy icon code"
-      inactive-text="Copy Svg Content"
+      inactive-text="Copy SVG content"
     >
     </el-switch>
   </div>
@@ -75,12 +75,12 @@ const copySvgIcon = async (name, refs) => {
   border-left: 1px solid var(--el-border-color-base);
   border-radius: 4px;
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
+  grid-template-columns: repeat(7, 1fr);
 
   .icon-item {
     text-align: center;
     color: var(--el-text-color-regular);
-    height: 120px;
+    height: 90px;
     font-size: 13px;
     border-right: 1px solid var(--el-border-color-base);
     border-bottom: 1px solid var(--el-border-color-base);

docs/en-US/component/icon.md

@@ -9,30 +9,31 @@ Element Plus provides a set of common icons.
 
 :::warning
 
-Element Plus team is replacing all **Font Icon** in the previously built components to **SVG Icon**, please keep you eyes on [ChangeLog](/#/en-US/component/changelog), for getting latest updates, **Font Icon** will be deprecated after the first stable release.
+⚠️ **Font Icon** has been removed, since version `1.2.0-beta.1`.
 
 :::
 
-<script setup>
+## Icon Usage
-import { Edit, Share, Delete, Search, Loading } from '@element-plus/icons'
-</script>
-
-## SvgIcon Usage
 
 - If you want to **use directly** like the example, you need to [globally register](https://v3.vuejs.org/guide/component-registration.html#global-registration) the components before using it.
 
-- If you want to see all available SVG icons please check [@element-plus/icons](https://unpkg.com/browse/@element-plus/icons@latest/lib/) and the source [Github/ElementPlus/icons](https://github.com/element-plus/element-plus-icons) out or [SVG icons](/#/en-US/component/icon#svg-tu-biao-ji-he)
+- If you want to see all available SVG icons please check [@element-plus/icons](https://unpkg.com/browse/@element-plus/icons@latest/lib/) and the source [element-plus-icons](https://github.com/element-plus/element-plus-icons) out or [Icon Collection](#icons-collection)
+
+- CDN importing and [auto importing](https://github.com/antfu/unplugin-icons) is under developing.
 
 ## Installation
 
-The current icon is only targeted to [Vue3](https://v3.vuejs.org).
+### Using packaging manager
-
-## Using packaging manager
 
 ```shell
-$ yarn add @element-plus/icons
+# Choose a package manager you like.
-# or
+
+# NPM
 $ npm install @element-plus/icons
+# Yarn
+$ yarn add @element-plus/icons
+# pnpm
+$ pnpm install @element-plus/icons
 ```
 
 ## Simple usage
@@ -57,6 +58,10 @@ so you need to use an alias in order to render the icon, if you register `Menu`
 </template>
 ```
 
+<script setup>
+import { Edit, Share, Delete, Search, Loading } from '@element-plus/icons'
+</script>
+
 <ElRow>
   <div>
     <ElIcon :size="30">
@@ -150,7 +155,7 @@ so you need to use an alias in order to render the icon, if you register `Menu`
   </div>
 </ElRow>
 
-## SVG Icons collection <ElTag>Available >= 1.0.2-beta.66</ElTag>
+## Icon Collection
 
 :::tip
 
@@ -162,20 +167,6 @@ so you need to use an alias in order to render the icon, if you register `Menu`
 
 <IconList />
 
-<!-- <ul class="icon-list">
-  <li
-    v-for="component in $svgIcons"
-    :key="component"
-    @click="$copySvgIcon(component)">
-    <span class="demo-svg-icon">
-      <el-icon color="#000">
-        <component :is="component" />
-      </el-icon>
-      <span class="icon-name">{{component}}</span>
-    </span>
-  </li>
-</ul> -->
-
 ## Icon Attributes
 
 | Attribute | Description                | Type                           | Acceptable Value | Default                |

docs/en-US/guide/quickstart.md

@@ -46,24 +46,28 @@ You need to use an additional plugin to import components you used.
 
 #### Auto import <el-tag type="primary" style="vertical-align: middle;" effect="dark" size="small">Recommend</el-tag>
 
-First you need install `unplugin-vue-components`.
+First you need install `unplugin-vue-components` and `unplugin-auto-import`.
 
 ```shell
-npm install unplugin-vue-components
+npm install -D unplugin-vue-components unplugin-auto-import
 ```
 
-Then add the code below into your `Vite` or `webpack` config file.
+Then add the code below into your `Vite` or `Webpack` config file.
 
 ##### Vite
 
 ```ts
 // vite.config.ts
+import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
 export default {
   plugins: [
     // ...
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
     Components({
       resolvers: [ElementPlusResolver()],
     }),
@@ -75,12 +79,16 @@ export default {
 
 ```ts
 // webpack.config.js
+import AutoImport from 'unplugin-auto-import/webpack'
 const Components = require('unplugin-vue-components/webpack')
 const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
 
 module.exports = {
   // ...
   plugins: [
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
     Components({
       resolvers: [ElementPlusResolver()],
     }),
@@ -88,9 +96,9 @@ module.exports = {
 }
 ```
 
-For more bundlers ([Rollup](https://rollupjs.org/), [Vue CLI](https://cli.vuejs.org/)) and configs please reference [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components#readme).
+For more bundlers ([Rollup](https://rollupjs.org/), [Vue CLI](https://cli.vuejs.org/)) and configs please reference [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components#installation) and [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import#install).
 
-#### Manually import
+### Manually import
 
 Element Plus provides out of box [Tree Shaking](https://webpack.js.org/guides/tree-shaking/)
 functionalities based on ES Module.
@@ -121,6 +129,19 @@ export default {
 }
 ```
 
+:::warning
+
+You need to manually import the styles if you're using `unplugin-element-plus` and only used the component API.
+
+Example:
+
+```ts
+import 'element-plus/es/components/message/style/css'
+import { ElMessage } from 'element-plus'
+```
+
+:::
+
 ## Starter Template
 
 ### Vue CLI