Skip to content

Commit 117866e

Browse files
wangdicoderwangdicoder
committed
docs: add README files for icons, react, and tokens packages
1 parent 6edb70d commit 117866e

3 files changed

Lines changed: 250 additions & 0 deletions

File tree

‎packages/icons/README.md‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
# @tiny-design/icons
2+
3+
SVG icon components for React, part of the Tiny Design system. Includes 242 icons auto-generated from the icon font.
4+
5+
## Install
6+
7+
```bash
8+
npm install @tiny-design/icons
9+
# or
10+
pnpm add @tiny-design/icons
11+
```
12+
13+
**Peer dependency:** `react >= 18.0.0`
14+
15+
## Usage
16+
17+
```tsx
18+
import { IconHeart, IconStar, IconClose } from '@tiny-design/icons';
19+
20+
function App() {
21+
return (
22+
<div>
23+
<IconHeart size={24} color="red" />
24+
<IconStar size="2em" />
25+
<IconClose />
26+
</div>
27+
);
28+
}
29+
```
30+
31+
### Props
32+
33+
All icons accept the following props (plus any standard SVG attributes):
34+
35+
| Prop | Type | Default | Description |
36+
| --- | --- | --- | --- |
37+
| `size` | `string \| number` | `'1em'` | Width and height of the icon |
38+
| `color` | `string` | `'currentColor'` | Fill color |
39+
40+
### Spinning Icons
41+
42+
Use the `withSpin` HOC to create spinning variants (useful for loaders):
43+
44+
```tsx
45+
import { IconLoader, withSpin } from '@tiny-design/icons';
46+
47+
const SpinningLoader = withSpin(IconLoader);
48+
49+
function Loading() {
50+
return <SpinningLoader size={24} />;
51+
}
52+
```
53+
54+
## Available Icons
55+
56+
**Navigation:** IconArrowUp, IconArrowDown, IconArrowLeft, IconArrowRight, IconChevronUp, IconChevronDown, IconChevronLeft, IconChevronRight, ...
57+
58+
**Actions:** IconPlus, IconMinus, IconClose, IconCheck, IconSearch, IconEdit, IconDelete, IconRefresh, ...
59+
60+
**Status:** IconInfo, IconWarning, IconSuccess, IconError, ...
61+
62+
**Files:** IconDocument, IconFile, IconImageFile, IconAudioFile, IconVideoFile, IconXls, IconWord, IconPsd, ...
63+
64+
**Social:** IconGithub, IconTwitter, IconFacebook, IconLinkedin, IconSlack, IconWeibo, IconWechat, ...
65+
66+
**Users:** IconUser, IconTeam, IconOrganization, IconManager, ...
67+
68+
And 200+ more. See the [source](./src) for the full list.
69+
70+
## License
71+
72+
MIT

‎packages/react/README.md‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
# @tiny-design/react
2+
3+
A friendly UI component library for React with 80+ components, theming, and i18n support.
4+
5+
## Install
6+
7+
```bash
8+
npm install @tiny-design/react @tiny-design/tokens
9+
# or
10+
pnpm add @tiny-design/react @tiny-design/tokens
11+
```
12+
13+
**Peer dependencies:** `react >= 18.0.0`, `react-dom >= 18.0.0`
14+
15+
## Quick Start
16+
17+
```tsx
18+
import '@tiny-design/tokens';
19+
import { Button, ConfigProvider } from '@tiny-design/react';
20+
21+
function App() {
22+
return (
23+
<ConfigProvider theme="light">
24+
<Button btnType="primary">Hello Tiny</Button>
25+
</ConfigProvider>
26+
);
27+
}
28+
```
29+
30+
## Components
31+
32+
### Layout
33+
Flex, Layout, Row, Col, Space, Divider, AspectRatio
34+
35+
### Navigation
36+
Anchor, Breadcrumb, Menu, Link, Pagination, Steps, Tabs
37+
38+
### Forms & Input
39+
Input, InputNumber, InputPassword, Textarea, Button, Checkbox, Radio, Select, NativeSelect, AutoComplete, Cascader, DatePicker, TimePicker, ColorPicker, Slider, Switch, Rate, Segmented, Upload, Transfer, Form
40+
41+
### Data Display
42+
Avatar, Badge, Card, Descriptions, Empty, Image, List, Table, Tag, Timeline, Tree, Typography, Progress, Statistic, Skeleton, Carousel
43+
44+
### Feedback
45+
Modal, Drawer, Alert, Tooltip, Popover, PopConfirm, Notification, Message, Result, Loader, LoadingBar
46+
47+
### Other
48+
Dropdown, SplitButton, Overlay, Countdown, CopyToClipboard, Flip, BackTop, Sticky, SpeedDial, Split, ScrollIndicator, StrengthIndicator, Transition
49+
50+
## Configuration
51+
52+
Use `ConfigProvider` to set global defaults:
53+
54+
```tsx
55+
import { ConfigProvider } from '@tiny-design/react';
56+
57+
<ConfigProvider
58+
theme="dark"
59+
componentSize="lg"
60+
locale={zh_CN}
61+
>
62+
<App />
63+
</ConfigProvider>
64+
```
65+
66+
| Prop | Type | Default | Description |
67+
| --- | --- | --- | --- |
68+
| `theme` | `'light' \| 'dark' \| 'system'` | `'light'` | Color theme |
69+
| `componentSize` | `'sm' \| 'md' \| 'lg'` | `'md'` | Global component size |
70+
| `locale` | `Locale` | `en_US` | Locale for i18n |
71+
| `prefixCls` | `string` | `'ty'` | CSS class prefix |
72+
73+
## Theming
74+
75+
Toggle themes programmatically with the `useTheme` hook:
76+
77+
```tsx
78+
import { useTheme } from '@tiny-design/react';
79+
80+
function ThemeToggle() {
81+
const { theme, setTheme } = useTheme();
82+
return (
83+
<button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
84+
Current: {theme}
85+
</button>
86+
);
87+
}
88+
```
89+
90+
Theme preference is persisted to `localStorage` and the `system` option follows `prefers-color-scheme`.
91+
92+
## Localization
93+
94+
Built-in locales: `en_US`, `zh_CN`.
95+
96+
```tsx
97+
import { ConfigProvider, IntlProvider } from '@tiny-design/react';
98+
import zh_CN from '@tiny-design/react/es/locale/zh_CN';
99+
100+
<ConfigProvider locale={zh_CN}>
101+
<App />
102+
</ConfigProvider>
103+
```
104+
105+
## License
106+
107+
MIT

‎packages/tokens/README.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# @tiny-design/tokens
2+
3+
Design tokens, themes, and foundational styles for Tiny Design.
4+
5+
## Install
6+
7+
```bash
8+
npm install @tiny-design/tokens
9+
# or
10+
pnpm add @tiny-design/tokens
11+
```
12+
13+
## Usage
14+
15+
### CSS (recommended)
16+
17+
Import the compiled CSS to get all tokens, normalization, animations, and icon fonts:
18+
19+
```js
20+
import '@tiny-design/tokens';
21+
// or explicitly
22+
import '@tiny-design/tokens/css/base.css';
23+
```
24+
25+
### SCSS
26+
27+
Import individual SCSS modules for custom builds:
28+
29+
```scss
30+
@use '@tiny-design/tokens/scss/variables';
31+
@use '@tiny-design/tokens/scss/tokens';
32+
@use '@tiny-design/tokens/scss/animation';
33+
@use '@tiny-design/tokens/scss/mixins';
34+
```
35+
36+
## What's Included
37+
38+
| Module | Description |
39+
| --- | --- |
40+
| `_variables.scss` | Core variables — colors, typography, spacing, breakpoints, component dimensions |
41+
| `_tokens.scss` | CSS custom property wrappers (`--ty-*` prefix) |
42+
| `_theme.scss` | Theme generation (light/dark via `data-tiny-theme` attribute) |
43+
| `_normalise.scss` | HTML normalization (based on Normalize.css) |
44+
| `_animation.scss` | Keyframe animations (`ty-rotate`, `ty-rotate-reverse`, `ty-processing`) |
45+
| `_font.scss` | Icon font definitions (300+ `.ty--*` icon classes) |
46+
| `_mixins.scss` | Helper mixins (e.g. `loader()`) |
47+
48+
## Theming
49+
50+
Tokens supports light and dark themes via the `data-tiny-theme` attribute on the document root:
51+
52+
```html
53+
<html data-tiny-theme="dark">
54+
```
55+
56+
Three modes are available: `light`, `dark`, and `system` (follows `prefers-color-scheme`).
57+
58+
## Breakpoints
59+
60+
| Name | Width |
61+
| --- | --- |
62+
| `xs` | 480px |
63+
| `sm` | 600px |
64+
| `md` | 840px |
65+
| `lg` | 960px |
66+
| `xl` | 1280px |
67+
| `xxl` | 1440px |
68+
69+
## License
70+
71+
MIT

0 commit comments

Comments
 (0)