@canlooks/can-ui 0.0.25 → 0.0.26

package/documentation/dist/components/highlight.md

@@ -0,0 +1,26 @@
+# Highlight 高亮文本
+
+## 示例
+
+```tsx
+import {Highlight} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <div>
+            <Highlight keywords="高亮">高亮文本</Highlight>
+        </div>
+    )
+}
+```
+
+## Props
+
+| 属性                 | 类型                          | 默认值 | 说明                 |
+|--------------------|-----------------------------|-----|--------------------|
+| keywords           | string \| string[]          | -   | 高亮的关键词             |
+| highlightClassName | string                      | -   | 高亮元素的类名            |
+| highlightStyle     | CSSProperties               | -   | 高亮元素的样式            |
+| renderHighlight    | (text: string) => ReactNode | -   | 自定义渲染高亮元素          |
+| children           | string                      | -   | 文本，`content`属性的别名  |
+| content            | string                      | -   | 文本，`children`属性的别名 |

package/documentation/dist/components/image.md

@@ -0,0 +1,88 @@
+# Image 图片
+
+## 普通示例
+
+```tsx
+import {Image} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Image src="/logo.png" style={{width: 100, height: 100}}/>
+    )
+}
+```
+
+## 相册预览示例
+
+```tsx
+import {Flex, Image} from '@canlooks/can-ui'
+
+export default function Index() {
+    const src1 = 'https://picsum.photos/seed/seed1/100'
+    const src2 = 'https://picsum.photos/seed/seed2/100'
+
+    const [open, setOpen] = React.useState(false)
+    const [index, setIndex] = React.useState(0)
+
+    const previewHandler = (e: React.MouseEvent<HTMLDivElement>, index: number) => {
+        e.preventDefault()
+        setOpen(true)
+        setIndex(index)
+    }
+
+    return (
+        <>
+            <Flex gap={12}>
+                <Image src={src1} style={{width: 100, height: 100}} onPreview={e => previewHandler(e, 0)}/>
+                <Image src={src2} style={{width: 100, height: 100}} onPreview={e => previewHandler(e, 1)}/>
+            </Flex>
+
+            <Image.Preview
+                open={open}
+                onOpenChange={setOpen}
+                index={index}
+                onIndexChange={setIndex}
+                src={[src1, src2]}
+            />
+        </>
+    )
+}
+```
+
+## ImageProps
+
+| 属性             | 类型                                      | 默认值  | 说明                                             |
+|----------------|-----------------------------------------|------|------------------------------------------------|
+| src            | string                                  | -    |                                                |
+| fallback       | string                                  | -    | 加载失败时会自动加载fallback                             |
+| renderLoading  | ReactNode                               | -    | 自定义渲染loading展位符，若指定为`false`或`null`会禁用loading功能 |
+| objectFit      | CSSProperties['objectFit']              | -    |                                                |
+| objectPosition | CSSProperties['objectPosition']         | -    |                                                |
+| actions        | ReactNode                               | -    | 自定义渲染操作，默认为`预览`按钮                              |
+| previewable    | boolean                                 | true | 是否可预览                                          |
+| previewProps   | [ImagePreviewProps](#ImagePreviewProps) | -    | 传递至`<ImagePreview/>`组件的属性                      |
+| onPreview      | (event) => void                         | -    | 点击预览按钮                                         |
+| onLoad         | ImgHTMLAttributes['onLoad']             | -    | 传递至`<img/>`元素                                  |
+| onError        | ImgHTMLAttributes['onError']            | -    | 传递至`<img/>`元素                                  |
+| alt            | ImgHTMLAttributes['alt']                | -    | 传递至`<img/>`元素                                  |
+| width          | ImgHTMLAttributes['width']              | -    | 传递至`<img/>`元素                                  |
+| height         | ImgHTMLAttributes['height']             | -    | 传递至`<img/>`元素                                  |
+| imgProps       | ImgHTMLAttributes                       | -    | 传递至`<img/>`元素                                  |
+
+## ImagePreviewProps
+
+`<ImagePreview/>`组件继承了`<Modal/>`组件的所有属性，此外还有如下属性：
+
+| 属性                    | 类型                                                                                   | 默认值  | 说明                 |
+|-----------------------|--------------------------------------------------------------------------------------|------|--------------------|
+| src                   | string[]                                                                             | -    |                    |
+| defaultIndex          | number                                                                               | 0    | 默认预览的图片下标（对应`src`） |
+| index                 | number                                                                               | -    | 受控的预览下标            |
+| onIndexChange         | (index) => void                                                                      | -    |                    |
+| defaultOpen           | boolean                                                                              | -    |                    |
+| onOpenChange          | (open) => void                                                                       | -    |                    |
+| showRotate            | boolean                                                                              | true | 是否渲染旋转按钮           |
+| showZoom              | boolean                                                                              | true | 是否渲染放大缩小按钮         |
+| showClose             | boolean                                                                              | true | 是否渲染关闭按钮           |
+| renderControl         | ReactNode                                                                            | -    | 自定义渲染控制按钮          |
+| transformWrapperProps | [ReactZoomPanPinchProps](https://github.com/BetterTyped/react-zoom-pan-pinch#readme) | -    |                    |

package/documentation/dist/components/input.md

@@ -0,0 +1,39 @@
+# Input 输入框
+
+## 示例
+
+```tsx
+import {Input} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Flex width={300} gap={15} direction="column">
+            <Input
+                prefix={<Icon icon={faUser}/>}
+                suffix="后缀"
+                placeholder="请输入内容"
+            />
+            <Input variant="underlined" placeholder="请输入内容"/>
+            <Input variant="plain" placeholder="请输入内容"/>
+            <Input shape="rounded" placeholder="请输入内容"/>
+        </Flex>
+    )
+}
+```
+
+## Props
+
+`<Input/>`组件继承了`<input/>`元素的全部属性，此外还有如下属性：
+
+| 属性             | 类型                                               | 默认值        | 说明                 |
+|----------------|--------------------------------------------------|------------|--------------------|
+| inputProps     | InputHTMLAttributes                              | -          | 传递至`<input/>`元素的属性 |
+| widthAdaptable | boolean                                          | false      | 是否根据内容自动调整宽度       |
+| variant        | 'outlined' \| 'underlined' \| 'plain'            | 'outlined' |                    |
+| size           | 'small' \| 'medium'                   \| 'large' |            |                    |
+| color          | string                                           | -          |                    |
+| prefix         | ReactNode                                        | -          | 前缀                 |
+| suffix         | ReactNode                                        | -          | 后缀                 |
+| clearable      | boolean                                          | true       | 是否显示清空按钮           |
+| onClear        | () => void                                       | -          |                    |
+| loading        | boolean                                          | false      |                    |

package/documentation/dist/components/loading.md

@@ -0,0 +1,46 @@
+# Loading 加载中
+
+## LoadingIndicator
+
+```tsx
+import {LoadingIndicator} from '@canlooks/can-ui'
+
+export default function () {
+    return <LoadingIndicator/>
+}
+```
+
+### LoadingIndicatorProps
+
+| 属性    | 类型     | 默认值       | 说明 |
+|-------|--------|-----------|----|
+| size  | number | -         | 尺寸 |
+| width | number | -         | 粗细 |
+| color | string | 'primary' |    |
+
+## Loading
+
+```tsx
+import {Loading} from '@canlooks/can-ui'
+
+export default function () {
+    return (
+        <Loading
+            open
+            progress={46}
+        >
+            <div style={{height: 150}}/>
+        </Loading>
+    )
+}
+```
+
+### LoadingProps
+
+| 属性             | 类型                                              | 默认值       | 说明                    |
+|----------------|-------------------------------------------------|-----------|-----------------------|
+| text           | ReactNode                                       | '加载中...'  |                       |
+| progress       | number                                          | -         | 若指定该字段会显示进度条          |
+| color          | string                                          | 'primary' |                       |
+| indicatorProps | [LoadingIndicatorProps](#LoadingIndicatorProps) | -         |                       |
+| progressProps  | [ProgressProps](/components/progress)           | -         | 传递至`<Progress/>`组件的属性 |

package/documentation/dist/components/menu.md

@@ -0,0 +1,85 @@
+# Menu 菜单
+
+## Menu示例
+
+```tsx
+import {Menu} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Menu
+            style={{width: 300}}
+            items={[
+                {label: '选项1', value: 1},
+                {label: '选项2', value: 2},
+            ]}
+        />
+    )
+}
+```
+
+## menuProps
+
+| 属性               | 类型                                                  | 默认值     | 说明                               |
+|------------------|-----------------------------------------------------|---------|----------------------------------|
+| items            | [MenuItemProps](#menuItemProps)[]                   | -       |                                  |
+| primaryKey       | string \| number                                    | 'value' | item中的主键                         |
+| labelKey         | string \| number                                    | 'value' | item中作为label的键                   |
+| childrenKey      | string \| number                                    | 'value' | item中作为children的键，若存在该字段，则会渲染子菜单 |
+| defaultExpanded  | (string \| number)[]                                | -       |                                  |
+| expanded         | (string \| number)[]                                | -       |                                  |
+| onExpandedChange | (expanded) => void                                  | -       |                                  |
+| multiple         | boolean                                             | false   | 是否支持多选                           |
+| defaultValue     | string \| number \| (string \| number)[]            |         |                                  |
+| value            | string \| number \| (string \| number)[]            |         |                                  |
+| onChange         | (value) => void                                     |         |                                  |
+| size             | 'small' \| 'medium'                      \| 'large' | 'large' |                                  |
+| showCheckbox     | boolean                                             | false   |                                  |
+| ellipsis         | boolean                                             | false   |                                  |
+| indent           | number                                              | 24      |                                  |
+
+## MenuItem可单独使用
+
+```tsx
+import {MenuItem} from '@canlooks/can-ui'
+import {Icon} from '@canlooks/can-ui'
+import {faUser} from '@fortawesome/free-solid-svg-icons'
+
+export default function Index() {
+    return (
+        <div style={{width: 300}}>
+            <MenuItem
+                prefix={<Icon icon={faUser}/>}
+                label="选项1"
+                suffix="这是一个选项"
+                selected
+                defaultExpanded
+            >
+                <MenuItem label="选项1-1"/>
+                <MenuItem label="选项1-2"/>
+            </MenuItem>
+        </div>
+    )
+}
+```
+
+## menuItemProps
+
+| 属性               | 类型                                                  | 默认值     | 说明                                           |
+|------------------|-----------------------------------------------------|---------|----------------------------------------------|
+| size             | 'small' \| 'medium'                      \| 'large' | 'large' |                                              |
+| color            | string                                              | -       |                                              |
+| emphasized       | boolean                                             | false   | 是否强调颜色，如果指定了`color`建议同时指定`emphasized`为`true` |
+| selected         | boolean                                             | false   | 是否选中状态                                       |
+| disabled         | boolean                                             | false   |                                              |
+| showCheckbox     | boolean                                             | false   |                                              |
+| checkboxProps    | [checkboxProps](/components/checkbox)               | -       |                                              |
+| ellipsis         | boolean                                             | false   |                                              |
+| prefix           | ReactNode                                           | -       |                                              |
+| label            | ReactNode                                           | -       |                                              |
+| suffix           | ReactNode                                           | -       |                                              |
+| indent           | number                                              | 24      |                                              |
+| expandIcon       | ReactNode                                           | -       |                                              |
+| defaultExpanded  | boolean                                             | -       |                                              |
+| expanded         | boolean                                             | -       |                                              |
+| onExpandedChange | (expanded) => void                                  | -       |                                              |

package/documentation/dist/components/pagination.md

@@ -0,0 +1,24 @@
+# Pagination 分页器
+
+## 示例
+
+若不指定`children`默认会开启所有功能，或者通过`children`指定功能及顺序。
+
+```tsx
+import {Flex, Pagination} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Flex direction="column" gap={24}>
+            <Pagination total={50}/>
+
+            <Pagination>
+                <Pagination.Counter/>
+                <Pagination.Pager/>
+                <Pagination.Sizer/>
+                <Pagination.Jumper/>
+            </Pagination>
+        </Flex>
+    )
+}
+```

package/documentation/dist/guide/appComponent.md

@@ -0,0 +1,30 @@
+# 入口组件
+
+## <App\/>
+
+通常使用`<App/>`组件作为入口组件，该组件定义了[全局方法](globalMethods)与顶层样式，也便于[自定义主题](theme)
+
+如果你使用`npx create-canlooks`脚手架程序创建项目，你会得到类似这样的代码：
+
+```tsx no-preview
+import {App} from '@canlooks/can-ui'
+
+export default function Root() {
+    return (
+        <App>
+            {/*your top component here*/}
+        </App>
+    )
+}
+```
+
+## Props
+
+`<App/>`组件继承了`<div/>`元素的所有属性，此外还有以下属性：
+
+| 属性        | 类型                           | 默认值   | 说明                                           |
+|-----------|------------------------------|-------|----------------------------------------------|
+| theme     | [ThemeDefinition](theme)     | -     | 传递给[<ThemeProvider\/>](theme)组件的属性           |
+| fill      | boolean                      | true  | <App\/>组件是否填满父元素，component为`null`或`false`时无效 |
+| children  | ReactNode                    | -     | 子组件                                          |
+| component | ElementType \| null \| false | 'div' | 使用特定的组件渲染，若指定为`null`或`false`则不会渲染组件          |

package/documentation/dist/guide/globalMethods.md

@@ -0,0 +1,238 @@
+# 全局方法
+
+## App.dialog
+
+- `App.dialog.info(props, [...args])`
+- `App.dialog.success(props, [...args])`
+- `App.dialog.warning(props, [...args])`
+- `App.dialog.error(props, [...args])`
+- `App.dialog.confirm(props, [...args])`
+
+`args`会传递至`props.onConfirm`与`props.onCancel`回调中
+
+```tsx
+import {App, Flex, Button} from '@canlooks/can-ui'
+
+export default function Index() {
+    const onClick = async (type: 'info' | 'success' | 'warning' | 'error' | 'confirm') => {
+        await App.dialog[type]({
+            title: '对话框',
+            content: '这是一个对话框'
+        })
+    }
+
+    return (
+        <Flex gap={12} wrap="wrap">
+            <Button onClick={() => onClick('info')}>info</Button>
+            <Button onClick={() => onClick('success')}>success</Button>
+            <Button onClick={() => onClick('warning')}>warning</Button>
+            <Button onClick={() => onClick('error')}>error</Button>
+            <Button onClick={() => onClick('confirm')}>confirm</Button>
+        </Flex>
+    )
+}
+```
+
+### dialog props
+
+| 属性                | 类型                                   | 默认值                                  | 说明                                                             |
+|-------------------|--------------------------------------|--------------------------------------|----------------------------------------------------------------|
+| icon              | ReactNode                            | [<StatusIcon\/>](/components/status) |                                                                |
+| title             | ReactNode                            |                                      |                                                                |
+| footer            | ReactNode                            |                                      |                                                                |
+| prefix            | ReactNode                            |                                      |                                                                |
+| suffix            | ReactNode                            |                                      |                                                                |
+| content           | ReactNode                            |                                      |                                                                |
+| width             | string \| number                     | 360                                  | 对话框的宽度                                                         |
+| minWidth          | string \| number                     |                                      |                                                                |
+| maxWidth          | string \| number                     | 100%                                 |                                                                |
+| showClose         | boolean                              |                                      | 是否显示关闭按钮                                                       |
+| closeProps        | [ButtonProps](/components/button)    |                                      |                                                                |
+| showConfirm       | boolean                              | true                                 | 是否显示确定按钮                                                       |
+| confirmText       | ReactNode                            | '确定'                                 |                                                                |
+| confirmProps      | [ButtonProps](/components/button)    |                                      |                                                                |
+| onConfirm         | (...args) => void                    |                                      |                                                                |
+| confirmLoading    | boolean                              |                                      | 确定按钮的加载状态                                                      |
+| showCancel        | boolean                              | true                                 | 取消按钮                                                           |
+| cancelText        | ReactNode                            | '取消'                                 |                                                                |
+| cancelProps       | [ButtonProps](/components/button)    |                                      |                                                                |
+| onCancel          | (...args) => void                    |                                      |                                                                |
+| draggable         | boolean                              |                                      | 对话框是否可拖拽                                                       |
+| maskClosable      | boolean                              | true                                 | 是否可以点击遮罩层关闭                                                    |
+| onMaskClick       | MouseEventHandler                    |                                      | 点击遮罩层                                                          |
+| escapeClosable    | boolean                              | false                                | 是否可以点击`ESC`关闭                                                  |
+| defaultOpen       | boolean                              |                                      | 打开状态                                                           |
+| open              | boolean                              |                                      | 受控的打开状态                                                        |
+| onOpened          | () => void                           | 打开动画结束后                              |                                                                |
+| onClose           | (closeReason: string) => void        |                                      |                                                                |
+| onClosed          | () => void                           | 关闭动画结束后                              |                                                                |
+| container         | Element \| () => Element             | document.body                        | 容器元素，自定义渲染在DOM树的位置                                             |
+| forceRender       | boolean                              | undefined                            | `true`-强制渲染<br>`false`-关闭后销毁<br/>`undeinfed`-第一次打开时渲染，后跟随父组件销毁 |
+| singleLayer       | boolean                              | true                                 | 是否只显示一层遮罩                                                      |
+| removeFocusOnOpen | boolean                              | true                                 | 打开时是否移除当前焦点                                                    |
+| modalProps        | [ModalProps](/components/transition) |                                      | 传递给`<Modal/>`组件属性                                              |
+| maskProps         | DOMAttributes                        |                                      | 传递给遮罩层元素的属性                                                    |
+
+---
+
+## App.message
+
+- `App.message.info(content|props)`
+- `App.message.success(content|props)`
+- `App.message.warning(content|props)`
+- `App.message.error(content|props)`
+
+```tsx
+import {App, Flex, Button} from '@canlooks/can-ui'
+
+export default function Index() {
+    const onClick = async (type: 'info' | 'success' | 'warning' | 'error') => {
+        await App.message[type]('这是一个消息框')
+    }
+
+    return (
+        <Flex gap={12} wrap="wrap">
+            <Button onClick={() => onClick('info')}>info</Button>
+            <Button onClick={() => onClick('success')}>success</Button>
+            <Button onClick={() => onClick('warning')}>warning</Button>
+            <Button onClick={() => onClick('error')}>error</Button>
+        </Flex>
+    )
+}
+```
+
+### message props
+
+| 属性                 | 类型                      | 默认值        | 说明       |
+|--------------------|-------------------------|------------|----------|
+| variant            | 'filled' \| 'outlined'  | 'outlined' | 弹框的样式    |
+| color              | string                  | 'primary'  |          |
+| icon               | ReactNode               |            |          |
+| title              | ReactNode               |            |          |
+| content            | ReactNode               |            |          |
+| showClose          | boolean                 | false      | 是否显示关闭按钮 |
+| placement          | string                  | 'top'      | 弹框弹出的位置  |
+| duration           | number                  | 3000       | 关闭延迟     |
+| onAutoClose        | () => void              |            | 自动关闭时    |
+| onCloseButtonClick | (e: MouseEvent) => void |            | 点击关闭按钮时  |
+
+---
+
+## App.notification
+
+- `App.message.notification(content|props)`
+- `App.message.notification(content|props)`
+- `App.message.notification(content|props)`
+- `App.message.notification(content|props)`
+
+```tsx
+import {App, Flex, Button} from '@canlooks/can-ui'
+
+export default function Index() {
+    const onClick = async (type: 'info' | 'success' | 'warning' | 'error') => {
+        await App.notification[type]({
+            title: '通知',
+            content: '这是一个通知框'
+        })
+    }
+
+    return (
+        <Flex gap={12} wrap="wrap">
+            <Button onClick={() => onClick('info')}>info</Button>
+            <Button onClick={() => onClick('success')}>success</Button>
+            <Button onClick={() => onClick('warning')}>warning</Button>
+            <Button onClick={() => onClick('error')}>error</Button>
+        </Flex>
+    )
+}
+```
+
+---
+
+### notification props
+
+notification方法接受与[message](#message%20props)方法相同的属性
+
+---
+
+## App.actionSheet
+
+- `App.actionSheet.confirm(title|props, [...args])`
+- `App.actionSheet.open(props, [...args])`
+
+```tsx
+import {App, Flex, Button} from '@canlooks/can-ui'
+
+export default function Index() {
+    const onClick = async (type: 'confirm' | 'open') => {
+        const selected = await App.actionSheet[type]({
+            title: '弹出菜单',
+            actions: [
+                {label: '选项1'},
+                {label: '选项2'}
+            ]
+        })
+    }
+
+    return (
+        <Flex gap={12} wrap="wrap">
+            <Button onClick={() => onClick('confirm')}>confirm</Button>
+            <Button onClick={() => onClick('open')}>open</Button>
+        </Flex>
+    )
+}
+```
+
+### actionSheet props
+
+| 属性                | 类型                                   | 默认值                                   | 说明                                                             |
+|-------------------|--------------------------------------|---------------------------------------|----------------------------------------------------------------|
+| title             | ReactNode                            |                                       |                                                                |
+| actions           | ReactNode                            | [MenuItemProps](/components/menuItem) |                                                                |
+| placement         | 'top' \| 'bottom'                    | 'bottom'                              | 菜单弹出的位置                                                        |
+| maskClosable      | boolean                              | true                                  | 是否可以点击遮罩层关闭                                                    |
+| escapeClosable    | boolean                              | false                                 | 是否可以点击`ESC`关闭                                                  |
+| onAction          | (action) => void                     |                                       | 点击选项                                                           |
+| onConfirm         | (e: MouseEvent) => void              |                                       | 点击确定                                                           |
+| showConfirm       | boolean                              | true                                  | 是否显示确定选项，`actionSheet.confirm`方法有效                             |
+| confirmText       | ReactNode                            | '确定'                                  |                                                                |
+| confirmProps      | [ButtonProps](/components/button)    |                                       |                                                                |
+| showCancel        | boolean                              | true                                  | 是否显示取消选项，`actionSheet.confirm`方法有效                             |
+| cancelText        | ReactNode                            | '取消'                                  |                                                                |
+| cancelProps       | [ButtonProps](/components/button)    |                                       |                                                                |
+| onCancel          | (e: MouseEvent) => void              |                                       | 点击取消                                                           |
+| defaultOpen       | boolean                              |                                       | 打开状态                                                           |
+| open              | boolean                              |                                       | 受控的打开状态                                                        |
+| onOpened          | () => void                           | 打开动画结束后                               |                                                                |
+| onClose           | (closeReason: string) => void        |                                       |                                                                |
+| onClosed          | () => void                           | 关闭动画结束后                               |                                                                |
+| container         | Element \| () => Element             | document.body                         | 容器元素，自定义渲染在DOM树的位置                                             |
+| forceRender       | boolean                              | undefined                             | `true`-强制渲染<br>`false`-关闭后销毁<br/>`undeinfed`-第一次打开时渲染，后跟随父组件销毁 |
+| singleLayer       | boolean                              | true                                  | 是否只显示一层遮罩                                                      |
+| removeFocusOnOpen | boolean                              | true                                  | 打开时是否移除当前焦点                                                    |
+| slideProps        | [SlideProps](/components/transition) |                                       | 传递给`<Slide/>`的属性                                               |
+| maskProps         | DOMAttributes                        |                                       | 传递给遮罩层元素的属性                                                    |
+
+---
+
+## useAppContext()
+
+如果你的应用使用了多个`<App/>`（入口组件），比如定义[局部样式](theme)。
+
+此时直接使用App全局方法，可能会导致上下文混淆，因此建议使用`useAppContext()`方法：
+
+```tsx no-preview
+import {useAppContext} from '@canlooks/can-ui'
+
+export default function Index() {
+    const {dialog, message, notification, actionSheet} = useAppContext()
+
+    const someMethod = () => {
+        dialog.confirm({
+            title: '对话框'
+        })
+    }
+    
+    // ...
+}
+```

package/documentation/dist/guide/icon.md

@@ -0,0 +1,57 @@
+# 图标
+
+## 图标库
+
+CanUI并不内置图标，但对主流的图标库均做了样式适配，你可以使用任何你喜欢的图标库，比如
+- [Font Awesome](https://fontawesome.com/)
+- [Material Design Icons](https://materialdesignicons.com/)
+- [Ant Design Icons](https://ant.design/components/icon/)
+- [Heroicons](https://heroicons.com/)
+- [Feather Icons](https://feathericons.com/)
+- [Ionicons](https://ionicons.com/)
+
+等等。
+
+CanUI默认使用`Font Awesome`并加入依赖项可直接使用。如果你想使用其他图标库，需要额外安装。
+
+## <Icon\/>
+
+`<Icon/>`组件支持fontAwesome图标库，将fontAwesome导出的图标传入`icon`属性即可。
+
+```tsx
+import {Icon} from '@canlooks/can-ui'
+import {faUser} from '@fortawesome/free-solid-svg-icons'
+
+export default function Index() {
+    return (
+        <Icon icon={faUser}/>
+    )
+}
+```
+
+### Props
+
+`<Icon/>`组件的属性继承于`FontAwesomeIconProps`，详情请查看[fontAwesome官方文档](https://fontawesome.com/)
+
+## 其他图标库
+
+使用其他图标库需要额外安装：
+
+### 以Material Design Icons为例
+
+```bash
+npm i @mdi/react @mdi/js
+```
+
+然后像其官网介绍的那样使用即可：
+
+```tsx no-preview
+import Icon from '@mdi/react'
+import {mdiAccount} from '@mdi/js'
+
+export default function Index() {
+    return (
+        <Icon path={mdiAccount} size={1}/>
+    )
+}
+```

package/documentation/dist/guide/introduction.md

@@ -0,0 +1,2 @@
+# 介绍
+无