diff --git a/package.json b/package.json index 1185a79a..248f3c82 100644 --- a/package.json +++ b/package.json @@ -134,6 +134,7 @@ "mockdate": "^3.0.5", "npm-run-all": "^4.1.5", "postcss": "^8.4.5", + "prettier": "^3.3.3", "prismjs": "^1.25.0", "react": "^17.0.2", "react-dom": "^17.0.2", @@ -149,8 +150,8 @@ "rollup-plugin-styles": "^3.14.1", "rollup-plugin-terser": "^7.0.2", "rollup-plugin-typescript2": "^0.31.2", - "tdesign-icons-view": "^0.1.0", - "tdesign-site-components": "^0.13.10", + "tdesign-icons-view": "^0.2.7", + "tdesign-site-components": "^0.15.4", "typescript": "^4.5.3", "vite": "^2.7.0", "vite-plugin-pwa": "^0.11.11", @@ -168,7 +169,7 @@ "react-spring": "9.6.1", "react-transition-group": "^4.4.2", "smoothscroll-polyfill": "^0.4.4", - "tdesign-icons-react": "^0.1.1" + "tdesign-icons-react": "^0.3.4" }, "config": { "commitizen": { diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js index d4a2e331..b02c6b3c 100644 --- a/site/mobile/mobile.config.js +++ b/site/mobile/mobile.config.js @@ -13,7 +13,7 @@ export default { { title: 'Icon 图标', name: 'icon', - component: () => import('tdesign-mobile-react/icon/_example/index.jsx'), + component: () => import('tdesign-mobile-react/icon/_example/index.tsx'), }, { title: 'Tabs 选项卡', diff --git a/src/_common b/src/_common index dffea051..762c4d5d 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit dffea05179951cf8ddd8efa33b492e446bfa6c33 +Subproject commit 762c4d5d576db1262a4c26d03b133077422749ca diff --git a/src/icon/_example/base.tsx b/src/icon/_example/base.tsx new file mode 100644 index 00000000..39ce569b --- /dev/null +++ b/src/icon/_example/base.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { IconFont } from 'tdesign-icons-react'; + +export default function BaseIcon() { + return ( +
+
+

How do you feel today?

+ + + + + +
+
+
+

What is your favourite food?

+ + + + + +
+
+
+

How much icons does TDesign Icon includes?

+ + + + +
+
+ ); +} diff --git a/src/icon/_example/enhanced.tsx b/src/icon/_example/enhanced.tsx new file mode 100644 index 00000000..12fc5c91 --- /dev/null +++ b/src/icon/_example/enhanced.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Icon } from 'tdesign-icons-react'; +import type { IconProps } from 'tdesign-icons-react'; + +const CustomUrlIcon = ({ name, size, style }: Partial>) => ( + +); + +export default function EnhancedIcon() { + return ( +
+
+ + + + +
+
+
+ + + + +
+
+ ); +} diff --git a/src/icon/_example/iconfont-enhanced.tsx b/src/icon/_example/iconfont-enhanced.tsx new file mode 100644 index 00000000..a105551f --- /dev/null +++ b/src/icon/_example/iconfont-enhanced.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { IconFont } from 'tdesign-icons-react'; +import type { IconProps } from 'tdesign-icons-react'; + +const CustomUrlIconFont = ({ name, size, style }: Partial>) => ( + +); + +export default function FontEnhancedIcon() { + return ( +
+
+ + + + + +
+
+
+ + + + +
+
+ ); +} diff --git a/src/icon/_example/iconfont.tsx b/src/icon/_example/iconfont.tsx new file mode 100644 index 00000000..96421b79 --- /dev/null +++ b/src/icon/_example/iconfont.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { IconFont } from 'tdesign-icons-react'; + +export default function IconfontIcon() { + return ( +
+
+

How do you feel today?

+ + + + + +
+
+
+

What is your favourite food?

+ + + + + +
+
+
+

How much icons does TDesign Icon includes?

+ + + + +
+
+ ); +} diff --git a/src/icon/_example/index.jsx b/src/icon/_example/index.jsx deleted file mode 100644 index d9b44e1f..00000000 --- a/src/icon/_example/index.jsx +++ /dev/null @@ -1,3 +0,0 @@ -import React from 'react'; - -export default () => <>test; diff --git a/src/icon/_example/index.tsx b/src/icon/_example/index.tsx new file mode 100644 index 00000000..08281929 --- /dev/null +++ b/src/icon/_example/index.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import TDemoBlock from '../../../site/mobile/components/DemoBlock'; +import TDemoHeader from '../../../site/mobile/components/DemoHeader'; + +import BaseIcon from './base'; +import EnhancedIcon from './enhanced'; +import IconfontEnhancedIcon from './iconfont-enhanced'; +import IconfontIcon from './iconfont'; +import SingleIcon from './single'; + +import './style/index.less'; + +export default function IconDemo() { + return ( +
+ + + + + + + + + + + + + + + + +
+ ); +} diff --git a/src/icon/_example/single.tsx b/src/icon/_example/single.tsx new file mode 100644 index 00000000..0d3febf8 --- /dev/null +++ b/src/icon/_example/single.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { + LettersTIcon, + LettersDIcon, + LettersSIcon, + LettersEIcon, + LettersIIcon, + LettersNIcon, + LettersGIcon, + ComponentCheckboxIcon, + ComponentInputIcon, + ComponentSwitchIcon, + ComponentBreadcrumbIcon, + ComponentDropdownIcon, + ComponentRadioIcon, + ComponentStepsIcon, +} from 'tdesign-icons-react'; + +export default function SingleIcon() { + return ( +
+
+ + + + + + + +
+
+
+ + + + + + + +
+
+ ); +} diff --git a/src/icon/_example/style/index.less b/src/icon/_example/style/index.less new file mode 100644 index 00000000..4c4be3c2 --- /dev/null +++ b/src/icon/_example/style/index.less @@ -0,0 +1,6 @@ +.t-demo-iconfont { + .t-icon, + .cps-icon { + margin-right: 24px; + } +} diff --git a/src/icon/icon.en-US.md b/src/icon/icon.en-US.md new file mode 100644 index 00000000..e13cfe43 --- /dev/null +++ b/src/icon/icon.en-US.md @@ -0,0 +1,104 @@ +:: BASE_DOC :: + +### Install tdesign-icons-react + +Icons are published and managed as a separate npm package. If you want to use it directly in your project, please install `tdesign-icons-react`. + +### Import on-demand + +SVG icons can be imported on demand. When using the Icon component in component development, SVG icons are imported on demand. + +`import { CloseIcon } from 'tdesign-icons-react';` + +{{ single }} + +### Full import + +The icon size supports multiple units, such as 'small', 'medium', 'large', '35px', '3em', etc. +The icon color is controlled by CSS, for example, using style="color: red" or style="fill: red". +Click on the 「All Icons」 navigation on the right to view all icons in the component library. + +{{ base }} + +### Advanced usage of SVG + +New svg icons can be added by passing in the URL. + +The component will import default svg icons. If you want to disable the loading of default svg icons, set `loadDefaultIcons` to `false`. + +{{ enhanced }} + +### Iconfont + +{{ iconfont }} + +### Advanced usage of iconfont + +New iconfont icons can be added by passing in the URL. + +The component will import default iconfont icons. If you want to disable the loading of default iconfont icons, set `loadDefaultIcons` to `false`. + + +{{ iconfont-enhanced }} + + +### FAQ + +#### How to get all the names of icons？ + +You can get all the name of icon by import manifest from the bundle `import { manifest } from 'tdesign-icons-react'` + +#### the usage of full import needs network. What if my project is in a no-network scenario? + +if your project is in a no-network scenario, please use on-demand loading of icons. For example,`` should be changed to `` + +### All Icons + +
+ + + +

Most icons were added to the icon library after version 0.3.0. If you find that the icon cannot be displayed normally after being imported, please check the version of tdesign-icons-react you have installed

+
+ + + + +## API + +### IconSVG Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +loadDefaultIcons | Boolean | true | \- | N +name | String | - | required | Y +size | String | undefined | \- | N +style | String | - | html attribute | N +url | String / Array | - | Typescript：`string \| Array` | N +onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N + + +### Iconfont Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +loadDefaultIcons | Boolean | true | \- | N +name | String | - | required | Y +size | String | undefined | \- | N +style | String | - | html attribute | N +tag | String | i | \- | N +url | String / Array | - | Typescript：`string \| Array` | N +onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N diff --git a/src/icon/icon.md b/src/icon/icon.md index f7787103..14224542 100644 --- a/src/icon/icon.md +++ b/src/icon/icon.md @@ -1,15 +1,118 @@ ---- -title: Icon 图标 ---- +:: BASE_DOC :: -## 安装独立 Icon 包 -图标相对其他基础组件较为独立，所以作为一个独立的 npm 包做发布管理。如果项目中直接使用，请安装 [tdesign-icons-react](/react/components/icon) +### 安装独立 Icon 包 -``` -npm i tdesign-icons-react -``` +图标相对其他基础组件较为独立，所以作为一个独立的 `npm` 包做发布管理。如果项目中直接使用，请安装 `tdesign-icons-react`。 +图标库中共包含超过 **25** 类，**1200+** 个图标，推荐您按需引用图标，减少产物的体积。 + +### 按需引入使用图标 + +图标可以按需引入单个 SVG 图标。组件开发内部使用到 Icon 时，均按需引入 SVG 图标。 + +`import { CloseIcon } from 'tdesign-icons-react';` + +{{ single }} + +### 全量引入使用图标 + +图标尺寸单位支持多种， 'small', 'medium', 'large', '35px', '3em' 等。 +图标颜色使用 CSS 控制，如：style="color: red"，或者 style="fill: red"。 +点击右侧导航「全部图标」即可查看组件库全部图标。 + +{{ base }} + +### iconfont 图标 + +TDesign 支持通过使用 Iconfont 图标，使用时需要单独引入 Iconfont 图标组件。 + +`import { IconFont } from 'tdesign-icons-react';` + +{{ iconfont }} + +### SVG 高级用法 + +可以传入 url 加入新的 SVG 图标。 + +引入新的图标 Url 之后，图标名称必须写全称，以作区分，如：`"name='home'"` 需要写成 `"name='t-icon-home'"`。 + +组件会引入默认的 SVG 图标，如果希望禁止组件加载默认的 SVG 图标，将 `loadDefaultIcons` 置为 false 即可。 + +{{ enhanced }} + + +### iconfont 高级用法 + +可以传入 url 加入新的 iconfont 图标。 + +引入新的图标 Url 之后，图标名称必须写全称，以作区分，如：`"name='home'"` 需要写成 `"name='t-icon-home'"`。 + +组件会引入默认的 iconfont 图标，如果希望禁止组件加载默认的 iconfont 图标，将 `loadDefaultIcons` 置为 false 即可。 + +{{ iconfont-enhanced }} + + +### FAQ + +#### 如何获取全部图标的名称列表？ + +可以通过`import { manifest } from 'tdesign-icons-react'` 获取全部图标的名称列表。 + +### t-icon、iconfont和icon使用时都会发起网络请求，我的项目是无网络场景，如何使用？ + +首先明确`t-icon`、`iconfont`和`icon`三者的关系。如上面的示例所示，`iconfont`和`icon`都是从icon独立包中引入，而`t-icon`只是为了方便用户习惯，对`icon`的一个简单封装。 + +`iconfont`需要加载图标的字体资源，而`icon`需要加载图标的svgsprite资源，这些资源都是相对来说比较大的，所以没有直接放在包里（当然不排除未来会做改动），所以会发起网络请求。 + +所以如果你的项目是无网络场景，请使用按需加载的图标，如``请改为``。 ### 全部图标 - \ No newline at end of file +
+ + + +

大部分图标在 0.3.0 版本后的图标库新增，如果发现图标引入后无法正常展示，请检查安装的图标库`tdesign-icons-react`的版本。

+
+ + + + +## API + +### IconSVG Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +loadDefaultIcons | Boolean | true | 是否加载组件库内置图标 | N +name | String | - | 必需。图标名称 | Y +size | String | undefined | 图标尺寸，支持 'small', 'medium', 'large'，'35px', '3em' 等 | N +style | String | - | HTML 原生属性。可用于设置图标颜色，如：style=\"color: red\" | N +url | String / Array | - | 图标地址，地址内容参考[组件内部默认加载图标](https://tdesign.gtimg.com/icon/web/index.js)。TS 类型：`string \| Array` | N +onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击时触发 | N + + +### Iconfont Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +loadDefaultIcons | Boolean | true | 是否加载组件库内置图标 | N +name | String | - | 必需。图标名称 | Y +size | String | undefined | 图标尺寸，支持 'small', 'medium', 'large'，'35px', '3em' 等 | N +style | String | - | HTML 原生属性。可用于设置图标颜色，如：style=\"color: red\" | N +tag | String | i | 图标 DOM 元素，可选值：i/span/div/... | N +url | String / Array | - | 图标地址，地址内容参考[组件内部默认加载图标](https://tdesign.gtimg.com/icon/web/index.css)。也可以在 index.html 中引入图标地址。TS 类型：`string \| Array` | N +onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击时触发 | N diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index de46cfb4..e582b2bf 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -356,13 +356,12 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -394,13 +393,12 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -440,13 +438,12 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -504,13 +501,12 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -529,18 +525,14 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` class="t-icon t-icon-lock-on" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > - @@ -560,13 +552,12 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -628,13 +619,12 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -671,13 +661,12 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -722,13 +711,12 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -796,13 +784,12 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -821,18 +808,14 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` class="t-icon t-icon-lock-on" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > - @@ -857,13 +840,12 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -946,13 +928,12 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1022,18 +1003,14 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` class="t-icon t-icon-lock-on" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > - @@ -1053,13 +1030,12 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1078,13 +1054,12 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` class="t-icon t-icon-service" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1104,13 +1079,12 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1129,13 +1103,12 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` class="t-icon t-icon-internet" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1155,13 +1128,12 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1195,18 +1167,14 @@ exports[`csr snapshot test > csr test src/cell/_example/group.tsx 1`] = ` class="t-icon t-icon-lock-on" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > - @@ -1226,13 +1194,12 @@ exports[`csr snapshot test > csr test src/cell/_example/group.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1251,13 +1218,12 @@ exports[`csr snapshot test > csr test src/cell/_example/group.tsx 1`] = ` class="t-icon t-icon-service" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1277,13 +1243,12 @@ exports[`csr snapshot test > csr test src/cell/_example/group.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1302,13 +1267,12 @@ exports[`csr snapshot test > csr test src/cell/_example/group.tsx 1`] = ` class="t-icon t-icon-internet" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1328,13 +1292,12 @@ exports[`csr snapshot test > csr test src/cell/_example/group.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1378,13 +1341,12 @@ exports[`csr snapshot test > csr test src/cell/_example/multiple.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1421,13 +1383,12 @@ exports[`csr snapshot test > csr test src/cell/_example/multiple.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1472,13 +1433,12 @@ exports[`csr snapshot test > csr test src/cell/_example/multiple.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1546,13 +1506,12 @@ exports[`csr snapshot test > csr test src/cell/_example/multiple.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1571,18 +1530,14 @@ exports[`csr snapshot test > csr test src/cell/_example/multiple.tsx 1`] = ` class="t-icon t-icon-lock-on" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > - @@ -1607,13 +1562,12 @@ exports[`csr snapshot test > csr test src/cell/_example/multiple.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1696,13 +1650,12 @@ exports[`csr snapshot test > csr test src/cell/_example/multiple.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1766,13 +1719,12 @@ exports[`csr snapshot test > csr test src/cell/_example/single.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1804,13 +1756,12 @@ exports[`csr snapshot test > csr test src/cell/_example/single.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1850,13 +1801,12 @@ exports[`csr snapshot test > csr test src/cell/_example/single.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1914,13 +1864,12 @@ exports[`csr snapshot test > csr test src/cell/_example/single.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -1939,18 +1888,14 @@ exports[`csr snapshot test > csr test src/cell/_example/single.tsx 1`] = ` class="t-icon t-icon-lock-on" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > - @@ -1970,13 +1915,12 @@ exports[`csr snapshot test > csr test src/cell/_example/single.tsx 1`] = ` class="t-icon t-icon-chevron-right" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -2355,108 +2299,1141 @@ exports[`csr snapshot test > csr test src/grid/_example/badge.tsx 1`] = ` style="flex-basis: 25%; flex-direction: column; padding-left: 0px; padding-right: 0px; align-items: center; justify-content: center; text-align: center;" >
+
+ 8 +
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ new +
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ ··· +
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/icon/_example/base.tsx 1`] = ` +
+
+
+

+ How do you feel today? +

+ + + + + +
+
+
+

+ What is your favourite food? +

+ + + + + +
+
+
+

+ How much icons does TDesign Icon includes? +

+ + + + +
+
+
+`; + +exports[`csr snapshot test > csr test src/icon/_example/enhanced.tsx 1`] = ` +
+
+
+ + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + +
+
+
+`; + +exports[`csr snapshot test > csr test src/icon/_example/iconfont.tsx 1`] = ` +
+
+
+

+ How do you feel today? +

+ + + + + +
+
+
+

+ What is your favourite food? +

+ + + + + +
+
+
+

+ How much icons does TDesign Icon includes? +

+ + + + +
+
+
+`; + +exports[`csr snapshot test > csr test src/icon/_example/iconfont-enhanced.tsx 1`] = ` +
+
+
+ + + + + +
+
+
+ + + + +
+
+
+`; + +exports[`csr snapshot test > csr test src/icon/_example/index.tsx 1`] = ` +
+
+
+

+ Icon 图标 +

+

+ Icon 作为UI构成中重要的元素，一定程度上影响UI界面整体呈现出的风格。 +

+
+
+
+

+ SVG 全量引入 +

+
+
+
+
+

+ How do you feel today? +

+ + + + + +
+
+
+

+ What is your favourite food? +

+ + + + + +
+
+
+

+ How much icons does TDesign Icon includes? +

+ + + + +
+
+
+
+
+
+

+ SVG 按需引入 +

+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+

+ SVG 高级用法 +

+
+
+
+
+ + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + +
+
+
+
+
+
-
- 8 -
- + iconfont 图标 +
- 标题文字 +

+ How do you feel today? +

+ + + + + +
+
+
+

+ What is your favourite food? +

+ + + + + +
+
+
+

+ How much icons does TDesign Icon includes? +

+ + + +
-
-
- new -
- + iconfont 高级用法 +

-
- 标题文字 +
+ + + + + +
+
+
+ + + +
-
+
+
+`; + +exports[`csr snapshot test > csr test src/icon/_example/single.tsx 1`] = ` +
+
-
-
- ··· -
- -
-
+ -
-
- 标题文字 -
-
-
-
+ + + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + +
@@ -3880,13 +4857,12 @@ exports[`csr snapshot test > csr test src/progress/_example/circle.tsx 1`] = ` class="t-icon t-icon-error t-progress__icon" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" >
@@ -3934,13 +4910,12 @@ exports[`csr snapshot test > csr test src/progress/_example/circle.tsx 1`] = ` class="t-icon t-icon-close t-progress__icon" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" >
@@ -3988,13 +4963,12 @@ exports[`csr snapshot test > csr test src/progress/_example/circle.tsx 1`] = ` class="t-icon t-icon-check t-progress__icon" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" >
@@ -4440,13 +5414,12 @@ exports[`csr snapshot test > csr test src/progress/_example/index.tsx 1`] = ` class="t-icon t-icon-error-circle-filled t-progress__icon" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" >
@@ -4477,13 +5450,12 @@ exports[`csr snapshot test > csr test src/progress/_example/index.tsx 1`] = ` class="t-icon t-icon-close-circle-filled t-progress__icon" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -4514,13 +5486,12 @@ exports[`csr snapshot test > csr test src/progress/_example/index.tsx 1`] = ` class="t-icon t-icon-check-circle-filled t-progress__icon" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -4714,13 +5685,12 @@ exports[`csr snapshot test > csr test src/progress/_example/index.tsx 1`] = ` class="t-icon t-icon-error t-progress__icon" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -4768,13 +5738,12 @@ exports[`csr snapshot test > csr test src/progress/_example/index.tsx 1`] = ` class="t-icon t-icon-close t-progress__icon" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -4822,13 +5791,12 @@ exports[`csr snapshot test > csr test src/progress/_example/index.tsx 1`] = ` class="t-icon t-icon-check t-progress__icon" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -4922,13 +5890,12 @@ exports[`csr snapshot test > csr test src/progress/_example/line.tsx 1`] = ` class="t-icon t-icon-error-circle-filled t-progress__icon" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -4959,13 +5926,12 @@ exports[`csr snapshot test > csr test src/progress/_example/line.tsx 1`] = ` class="t-icon t-icon-close-circle-filled t-progress__icon" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -4996,13 +5962,12 @@ exports[`csr snapshot test > csr test src/progress/_example/line.tsx 1`] = ` class="t-icon t-icon-check-circle-filled t-progress__icon" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -5187,13 +6152,12 @@ exports[`csr snapshot test > csr test src/result/_example/custom.tsx 1`] = ` class="t-icon t-icon-ellipsis" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -5268,18 +6232,12 @@ exports[`csr snapshot test > csr test src/result/_example/index.tsx 1`] = ` class="t-icon t-icon-check-circle t-result__icon" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > - @@ -5304,18 +6262,12 @@ exports[`csr snapshot test > csr test src/result/_example/index.tsx 1`] = ` class="t-icon t-icon-close-circle t-result__icon" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > - @@ -5340,18 +6292,12 @@ exports[`csr snapshot test > csr test src/result/_example/index.tsx 1`] = ` class="t-icon t-icon-info-circle t-result__icon" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > - @@ -5376,18 +6322,12 @@ exports[`csr snapshot test > csr test src/result/_example/index.tsx 1`] = ` class="t-icon t-icon-info-circle t-result__icon" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > - @@ -5437,13 +6377,12 @@ exports[`csr snapshot test > csr test src/result/_example/index.tsx 1`] = ` class="t-icon t-icon-ellipsis" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > @@ -5517,18 +6456,12 @@ exports[`csr snapshot test > csr test src/result/_example/theme.tsx 1`] = ` class="t-icon t-icon-check-circle t-result__icon" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > - @@ -5553,18 +6486,12 @@ exports[`csr snapshot test > csr test src/result/_example/theme.tsx 1`] = ` class="t-icon t-icon-close-circle t-result__icon" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > - @@ -5589,18 +6516,12 @@ exports[`csr snapshot test > csr test src/result/_example/theme.tsx 1`] = ` class="t-icon t-icon-info-circle t-result__icon" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > - @@ -5625,18 +6546,12 @@ exports[`csr snapshot test > csr test src/result/_example/theme.tsx 1`] = ` class="t-icon t-icon-info-circle t-result__icon" fill="none" height="1em" - viewBox="0 0 16 16" + viewBox="0 0 24 24" width="1em" > - @@ -7459,13 +8374,13 @@ exports[`ssr snapshot test > ssr test src/back-top/_example/base.tsx 1`] = `" ssr test src/back-top/_example/index.tsx 1`] = `"

BackTop 返回顶部

当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部

形状

"`; -exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; exports[`ssr snapshot test > ssr test src/divider/_example/base.tsx 1`] = `"
水平分割线
带文字水平分割线
垂直分割线
文字信息文字信息文字信息
"`; @@ -7475,6 +8390,18 @@ exports[`ssr snapshot test > ssr test src/divider/_example/theme.tsx 1`] = `" ssr test src/grid/_example/badge.tsx 1`] = `"
标题文字
8
标题文字
new
标题文字
···
标题文字
"`; +exports[`ssr snapshot test > ssr test src/icon/_example/base.tsx 1`] = `"

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

"`; + +exports[`ssr snapshot test > ssr test src/icon/_example/enhanced.tsx 1`] = `"

"`; + +exports[`ssr snapshot test > ssr test src/icon/_example/iconfont.tsx 1`] = `"

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

"`; + +exports[`ssr snapshot test > ssr test src/icon/_example/iconfont-enhanced.tsx 1`] = `"

"`; + +exports[`ssr snapshot test > ssr test src/icon/_example/index.tsx 1`] = `"

Icon 图标

Icon 作为UI构成中重要的元素，一定程度上影响UI界面整体呈现出的风格。

SVG 全量引入

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

SVG 按需引入


SVG 高级用法


iconfont 图标

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

iconfont 高级用法


"`; + +exports[`ssr snapshot test > ssr test src/icon/_example/single.tsx 1`] = `"

"`; + exports[`ssr snapshot test > ssr test src/loading/_example/attach.tsx 1`] = `"
Hello, I\`'m Alice. I\`'m going to be a front-end developer.
"`; exports[`ssr snapshot test > ssr test src/loading/_example/base.tsx 1`] = `"
"`; @@ -7503,23 +8430,23 @@ exports[`ssr snapshot test > ssr test src/overlay/_example/index.tsx 1`] = `" ssr test src/progress/_example/base.tsx 1`] = `"
80%
80%
30%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/circle.tsx 1`] = `"
80%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/circle.tsx 1`] = `"
80%
"`; exports[`ssr snapshot test > ssr test src/progress/_example/custom.tsx 1`] = `"
88%
88%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/index.tsx 1`] = `"

Progress 进度条

展示操作的当前进度

01 类型

基础进度条

80%
80%
30%

过渡样式

88%

自定义颜色/圆角

88%
88%

02 组件状态

线性进度条

80%

百分比内显进度条

80%
88%
88%
88%

环形进度条

80%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/index.tsx 1`] = `"

Progress 进度条

展示操作的当前进度

01 类型

基础进度条

80%
80%
30%

过渡样式

88%

自定义颜色/圆角

88%
88%

02 组件状态

线性进度条

80%

百分比内显进度条

80%
88%
88%
88%

环形进度条

80%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/line.tsx 1`] = `"
80%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/line.tsx 1`] = `"
80%
"`; exports[`ssr snapshot test > ssr test src/progress/_example/plump.tsx 1`] = `"
80%
88%
88%
88%
"`; exports[`ssr snapshot test > ssr test src/progress/_example/transition.tsx 1`] = `"
88%
"`; -exports[`ssr snapshot test > ssr test src/result/_example/custom.tsx 1`] = `"
自定义结果
描述文字
"`; +exports[`ssr snapshot test > ssr test src/result/_example/custom.tsx 1`] = `"
自定义结果
描述文字
"`; -exports[`ssr snapshot test > ssr test src/result/_example/index.tsx 1`] = `"

Result 结果

结果反馈

01类型

不同结果反馈

成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字

自定义结果

自定义结果
描述文字

页面位置展示

"`; +exports[`ssr snapshot test > ssr test src/result/_example/index.tsx 1`] = `"

Result 结果

结果反馈

01类型

不同结果反馈

成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字

自定义结果

自定义结果
描述文字

页面位置展示

"`; -exports[`ssr snapshot test > ssr test src/result/_example/theme.tsx 1`] = `"
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
"`; +exports[`ssr snapshot test > ssr test src/result/_example/theme.tsx 1`] = `"
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
"`; exports[`ssr snapshot test > ssr test src/sticky/_example/base.tsx 1`] = `"
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 4d13abf9..19259eb2 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -4,13 +4,13 @@ exports[`ssr snapshot test > ssr test src/back-top/_example/base.tsx 1`] = `" ssr test src/back-top/_example/index.tsx 1`] = `"

BackTop 返回顶部

当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部

形状

"`; -exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; exports[`ssr snapshot test > ssr test src/divider/_example/base.tsx 1`] = `"
水平分割线
带文字水平分割线
垂直分割线
文字信息文字信息文字信息
"`; @@ -20,6 +20,18 @@ exports[`ssr snapshot test > ssr test src/divider/_example/theme.tsx 1`] = `" ssr test src/grid/_example/badge.tsx 1`] = `"
标题文字
8
标题文字
new
标题文字
···
标题文字
"`; +exports[`ssr snapshot test > ssr test src/icon/_example/base.tsx 1`] = `"

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

"`; + +exports[`ssr snapshot test > ssr test src/icon/_example/enhanced.tsx 1`] = `"

"`; + +exports[`ssr snapshot test > ssr test src/icon/_example/iconfont.tsx 1`] = `"

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

"`; + +exports[`ssr snapshot test > ssr test src/icon/_example/iconfont-enhanced.tsx 1`] = `"

"`; + +exports[`ssr snapshot test > ssr test src/icon/_example/index.tsx 1`] = `"

Icon 图标

Icon 作为UI构成中重要的元素，一定程度上影响UI界面整体呈现出的风格。

SVG 全量引入

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

SVG 按需引入


SVG 高级用法


iconfont 图标

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

iconfont 高级用法


"`; + +exports[`ssr snapshot test > ssr test src/icon/_example/single.tsx 1`] = `"

"`; + exports[`ssr snapshot test > ssr test src/loading/_example/attach.tsx 1`] = `"
Hello, I\`'m Alice. I\`'m going to be a front-end developer.
"`; exports[`ssr snapshot test > ssr test src/loading/_example/base.tsx 1`] = `"
"`; @@ -48,23 +60,23 @@ exports[`ssr snapshot test > ssr test src/overlay/_example/index.tsx 1`] = `" ssr test src/progress/_example/base.tsx 1`] = `"
80%
80%
30%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/circle.tsx 1`] = `"
80%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/circle.tsx 1`] = `"
80%
"`; exports[`ssr snapshot test > ssr test src/progress/_example/custom.tsx 1`] = `"
88%
88%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/index.tsx 1`] = `"

Progress 进度条

展示操作的当前进度

01 类型

基础进度条

80%
80%
30%

过渡样式

88%

自定义颜色/圆角

88%
88%

02 组件状态

线性进度条

80%

百分比内显进度条

80%
88%
88%
88%

环形进度条

80%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/index.tsx 1`] = `"

Progress 进度条

展示操作的当前进度

01 类型

基础进度条

80%
80%
30%

过渡样式

88%

自定义颜色/圆角

88%
88%

02 组件状态

线性进度条

80%

百分比内显进度条

80%
88%
88%
88%

环形进度条

80%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/line.tsx 1`] = `"
80%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/line.tsx 1`] = `"
80%
"`; exports[`ssr snapshot test > ssr test src/progress/_example/plump.tsx 1`] = `"
80%
88%
88%
88%
"`; exports[`ssr snapshot test > ssr test src/progress/_example/transition.tsx 1`] = `"
88%
"`; -exports[`ssr snapshot test > ssr test src/result/_example/custom.tsx 1`] = `"
自定义结果
描述文字
"`; +exports[`ssr snapshot test > ssr test src/result/_example/custom.tsx 1`] = `"
自定义结果
描述文字
"`; -exports[`ssr snapshot test > ssr test src/result/_example/index.tsx 1`] = `"

Result 结果

结果反馈

01类型

不同结果反馈

成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字

自定义结果

自定义结果
描述文字

页面位置展示

"`; +exports[`ssr snapshot test > ssr test src/result/_example/index.tsx 1`] = `"

Result 结果

结果反馈

01类型

不同结果反馈

成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字

自定义结果

自定义结果
描述文字

页面位置展示

"`; -exports[`ssr snapshot test > ssr test src/result/_example/theme.tsx 1`] = `"
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
"`; +exports[`ssr snapshot test > ssr test src/result/_example/theme.tsx 1`] = `"
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
"`; exports[`ssr snapshot test > ssr test src/sticky/_example/base.tsx 1`] = `"
"`;