📝 docs: 完善文档

README.md

@@ -10,7 +10,7 @@
 
 - 📦 内置了丰富的图标资源
 - 🎉 支持对 React、Vue、React Native、Angular 各种框架的适配
-- 💻 使用 TypeScript 编写，提供完整的类型定义
+- 💻 使用 TypeScript 开发，提供完整的类型定义文件
 
 ## 🏗 安装
 

docs/components/example.tsx

@@ -0,0 +1,7 @@
+import { AccountBookFilled } from '@lotus-design/icons';
+
+export default () => {
+  return (
+    <AccountBookFilled />
+  )
+}

docs/contribution-guide.md

@@ -0,0 +1,67 @@
+---
+title: 贡献指南
+order: 10
+group:
+  path: /
+nav:
+  title: 文档
+  path: /docs
+---
+
+## 生成流程
+
+通过运行命令
+
+```sh
+pnpm generate
+```
+
+开始 gulp 构建，整个构建流程如下
+
+```
+1. 清理之前生成的文件
+2. 并行运行下列任务
+  2.1 直接拷贝部分代码至 src 目录，例如辅助函数 helpers.ts、类型定义 types.ts
+  2.2 生成 filled 主题风格的图标抽象节点
+  2.3 生成 outlined 主题风格的图标抽象节点
+  2.4 生成 twotone 主题风格的图标抽象节点
+3. 并行运行下列任务
+  3.1 生成入口文件 index.ts
+  3.2 生成内联图标 inline-svg
+  3.3 生成包含名字空间的内联图标 inline-namespaced-svg
+4. 美化生成的代码
+```
+
+## 编译流程
+
+通过运行命令
+
+```sh
+pnpm build
+```
+
+输出至 es、lib 目录
+
+## 新增图标
+
+首先确保图标符合以下设计上的要求：
+
+1. 符合 [设计规格](https://ant.design/docs/spec/icon-cn#%E8%AE%BE%E8%AE%A1%E8%A7%84%E6%A0%BC) 的图标
+1. 图标的 viewBox 为 0 0 1024 1024
+2. 图标外围有预留 64px 的出血位
+
+然后将需要新增的图标添加至 svg 目录下对应的主题风格目录中，即 filled, outlined, twotone 中的一个
+
+运行目录下的 npm scripts
+
+```sh
+# 生成 ts 源文件至 src
+pnpm generate
+
+# 编译 src 文件至 es、lib
+pnpm build
+```
+
+## 修改/删除图标
+
+修改和删除跟新增图标类似，直接修改/删除 svg 目录下对应主题风格目录中的 .svg 图标即可

docs/getting-started.md

@@ -0,0 +1,24 @@
+---
+title: 快速开始
+order: 2
+group:
+  path: /
+nav:
+  title: 文档
+  path: /docs
+---
+
+## 安装
+
+使用图标组件，需要安装 对应的框架 图标组件包：
+
+```sh
+# React
+pnpm i @lotus-design/icons
+```
+
+### 在项目中使用
+
+以React为例，使用示例如下 ：
+
+<code src="./components/example.tsx" />

docs/index.md

@@ -1,39 +1,30 @@
 ---
-title: Pansy Hooks - React Hooks Library
+title: Lotus Icons - Lotus Design Icons Library
 hero:
   title: Lotus Icons
-  desc: 一套高质量可靠的 React Hooks 库
+  desc: 语义化矢量图形库，提供了描述图标的抽象节点来满足对各种框架的适配。
   actions:
-    - text: 快速上手
-      link: /zh-CN/docs/getting-started
+    - text: 快速开始
+      link: /docs/getting-started
 features:
-  - icon: https://gw.alipayobjects.com/zos/bmw-prod/813f5ed9-6bc4-43d4-9f74-ec81ecf35733/k7htg6n4_w144_h144.png
-    title: 内容丰富
-  - icon: https://gw.alipayobjects.com/zos/bmw-prod/7659205c-6637-4fa2-8529-d32e5818304b/k7htflfb_w144_h144.png
-    title: 完备的教程
-  - icon: https://gw.alipayobjects.com/zos/bmw-prod/6319a122-e8b8-497f-9b45-37cfbe77edaa/k7htfx7t_w144_h144.png
-    title: 生产可用
+  - icon: https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*43rfS4dD0MUAAAAAAAAAAABkARQnAQ
+    title: 简单易用
+    desc: 更简单的将SVG作为图标使用
+  - icon: https://gw.alipayobjects.com/zos/bmw-prod/881dc458-f20b-407b-947a-95104b5ec82b/k79dm8ih_w144_h144.png
+    title: 开箱即用
+    desc: 内置丰富的图标，开箱即用
+  - icon: https://gw.alipayobjects.com/zos/bmw-prod/b8570f4d-c1b1-45eb-a1da-abff53159967/kj9t990h_w144_h144.png
+    title: 多套主题
+    desc: Filled、Outlined、Twotone
+  - icon: https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*cY0tTr8q3Y4AAAAAAAAAAABkARQnAQ
+    title: 多框架支持
+    desc: 将对 React、Vue、Angular、React Native 等框架提供支持
+  - icon: https://gw.alipayobjects.com/zos/basement_prod/a1c647aa-a410-4024-8414-c9837709cb43/k7787itw_w126_h114.png
+    title: 自定义
+    desc: 配和 阿里妈妈的 iconfont 可使用自定义图标
+  - icon: https://gw.alipayobjects.com/zos/antfincdn/Eb8IHpb9jE/Typescript_logo_2020.svg
+    title: TypeScript
+    desc: 使用 TypeScript 开发，提供完整的类型定义文件
 footer: Open-source MIT Licensed | Copyright © 2020-present
 ---
 
-<code src="./components/index.tsx" />
-
-## 🏗 安装
-
-```bash
-# npm install
-$ npm install @pansy/react-hooks --save
-
-# yarn install
-$ yarn add @pansy/react-hooks
-```
-
-## 🔨 使用
-
-```ts
-import { useBoolean } from '@pansy/react-hooks';
-
-export default () => {
-  const [visible] = useBoolean();
-}
-```

docs/intro.md

@@ -0,0 +1,11 @@
+---
+title: 简介
+order: 0
+group:
+  path: /
+nav:
+  title: 文档
+  path: /docs
+---
+
+## 安装