xdesign-component-center

XDesign React component library. The package boundary is kept separate from the documentation application so components can be consumed by any React app.

All current components share an XDesign Less-based visual layer while keeping their existing Ant Design behavior and public APIs.

Usage

Business apps only install this package. Ant Design, @ant-design/icons, and dayjs are bundled as dependencies — do not install them in the app, and do not import from antd.

npm install xdesign-component-center

import { Button, ConfigProvider } from 'xdesign-component-center';
import 'xdesign-component-center/style.css';
import zhCN from 'xdesign-component-center/locale/zh_CN';
import { SearchOutlined } from 'xdesign-component-center/icons';

export function Example() {
  return (
    <ConfigProvider locale={zhCN}>
      <Button type="primary" icon={<SearchOutlined />}>
        保存
      </Button>
    </ConfigProvider>
  );
}

XDesign Button keeps Ant Design props and adds type="secondary", type="outline", size="mini", size="default", status="success | warning | danger", and long.

Project SVG icons maintained in the local component center are exported from the same path:

import { AgentRecommendationStrategy } from 'xdesign-component-center/icons';

<AgentRecommendationStrategy style={{ fontSize: 24 }} rotate={90} />

Uploaded icons use the Ant Design icon props (style, className, spin, rotate, onClick, ref, and accessibility attributes). Fixed SVG colors are preserved; paths using currentColor inherit style.color. twoToneColor continues to work for the built-in Ant Design two-tone icons; ordinary uploaded SVGs are not automatically converted into two-tone definitions.

Upload and deletion update src/custom-icons/catalog.json and the generated named exports in src/custom-icons/generated.tsx. Build and publish a new library version, then update the consuming application's dependency to use newly added icons. Removing an icon also removes its export from the next build.

React and react-dom remain peer dependencies (>=18). Date helpers can be imported from xdesign-component-center/dayjs if needed.

Structure

packages/xdesign-react/
├── src/index.ts
├── src/icons.ts
├── src/components/index.ts      # Ant Design exports plus explicit XDesign overrides
├── src/components/<name>/       # component adapter and Less source
├── src/style/index.less         # shared Less source entry
└── src/design-system/           # reserved for later token sync