# 从 Antd 迁移
## 📦 安装
```bash
$ npm install @agentscope-ai/icons @agentscope-ai/design --save
```
## 🔨 使用
从 @agentscope-ai/design 导出的所有同名组件在 API 方面都与 antd 的对应组件兼容，这意味着您无需学习如何使用它们。如果您想充分利用 Alibaba Cloud Spark Design 的新功能，可以尝试使用这些组件而不是 antd 的组件。
```tsx
import {
Button,
Image,
ConfigProvider,
purpleDarkTheme,
purpleTheme,
} from '@agentscope-ai/design';
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
import { Flex } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { useState } from 'react';
const App = () => {
const [colorMode, setColorMode] = useState('light');
const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
const prefix = 'sps';
return (
Hello Spark Design!
);
};
export default App;
```
如果您想继续使用 antd 的组件，那也没问题。您只需要将 antd 的 ConfigProvider 替换为 @agentscope-ai/design 的即可。
```tsx
import {
ConfigProvider,
purpleDarkTheme,
purpleTheme,
} from '@agentscope-ai/design';
import { Button, Image, Flex } from 'antd';
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
import zhCN from 'antd/locale/zh_CN';
import { useState } from 'react';
const App = () => {
const [colorMode, setColorMode] = useState('light');
const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
const prefix = 'sps';
return (
Hello Spark Design!
);
};
export default App;
```