Skip to content

Commit a86e3cd

Browse files
liweijie0812github-actions[bot]anlyyao
authored
feat(icon): upgrade icon 0.6.x (#785)
* feat(icon): upgrade icon 0.4.x * chore: update snapshot * fix(site): repair document rendering failed * feat(Icon): update demo --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: anlyyao <[email protected]>
1 parent fd8ee86 commit a86e3cd

File tree

8 files changed

+14475
-3674
lines changed

8 files changed

+14475
-3674
lines changed

‎package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,6 @@
154154
"rollup-plugin-styles": "^3.14.1",
155155
"rollup-plugin-terser": "^7.0.2",
156156
"rollup-plugin-typescript2": "^0.31.2",
157-
"tdesign-icons-view": "^0.3.7",
158157
"@tdesign/site-components": "^0.17.0",
159158
"tdesign-theme-generator": "^1.1.8",
160159
"typescript": "^5.8.3",
@@ -175,7 +174,7 @@
175174
"lodash-es": "^4.17.21",
176175
"react-transition-group": "^4.4.2",
177176
"smoothscroll-polyfill": "^0.4.4",
178-
"tdesign-icons-react": "^0.5.1",
177+
"tdesign-icons-react": "^0.6.1",
179178
"tinycolor2": "^1.6.0",
180179
"validator": "^13.15.15"
181180
},

‎site/web/main.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import '@tdesign/site-components/lib/styles/prism-theme-dark.less';
66
import '@tdesign/site-components/lib/styles/prism-theme.less';
77
import '@tdesign/site-components/lib/styles/style.css';
88

9-
import 'tdesign-icons-view';
109
import 'tdesign-theme-generator';
1110

1211
import App from './App';

‎src/icon/_example/single.tsx‎

Lines changed: 53 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
2+
import { Slider } from 'tdesign-mobile-react';
23
import {
34
LettersTIcon,
45
LettersDIcon,
@@ -17,26 +18,63 @@ import {
1718
} from 'tdesign-icons-react';
1819

1920
export default function SingleIcon() {
21+
const [strokeWidth, setStrokeWidth] = useState(2);
22+
const handleClick = () => {
23+
console.log('icon is clicked');
24+
};
25+
2026
return (
2127
<div className="t-demo-iconfont">
2228
<div className="t-demo-row">
23-
<LettersTIcon />
24-
<LettersDIcon />
25-
<LettersEIcon />
26-
<LettersSIcon />
27-
<LettersIIcon />
28-
<LettersGIcon />
29-
<LettersNIcon />
29+
<div className="t-demo-row__slider">
30+
<Slider value={strokeWidth} onChange={(v) => setStrokeWidth(Number(v))} min={0.5} max={2.5} step={0.5} />
31+
</div>
32+
33+
<LettersTIcon strokeWidth={strokeWidth} onClick={handleClick} />
34+
<LettersDIcon strokeWidth={strokeWidth} />
35+
<LettersEIcon strokeWidth={strokeWidth} />
36+
<LettersSIcon strokeWidth={strokeWidth} />
37+
<LettersIIcon strokeWidth={strokeWidth} />
38+
<LettersGIcon strokeWidth={strokeWidth} />
39+
<LettersNIcon strokeWidth={strokeWidth} />
3040
</div>
3141
<br />
3242
<div className="t-demo-row">
33-
<ComponentCheckboxIcon />
34-
<ComponentBreadcrumbIcon />
35-
<ComponentInputIcon />
36-
<ComponentSwitchIcon />
37-
<ComponentDropdownIcon />
38-
<ComponentRadioIcon />
39-
<ComponentStepsIcon />
43+
<ComponentCheckboxIcon
44+
strokeWidth={strokeWidth}
45+
strokeColor={['currentColor', '#0052d9']}
46+
fillColor={['#bbd3fb', '#f78d94']}
47+
/>
48+
<ComponentBreadcrumbIcon
49+
strokeWidth={strokeWidth}
50+
strokeColor={['currentColor', '#0052d9']}
51+
fillColor={['#bbd3fb', '#f78d94']}
52+
/>
53+
<ComponentInputIcon
54+
strokeWidth={strokeWidth}
55+
strokeColor={['currentColor', '#0052d9']}
56+
fillColor={['#bbd3fb', '#f78d94']}
57+
/>
58+
<ComponentSwitchIcon
59+
strokeWidth={strokeWidth}
60+
strokeColor={['currentColor', '#0052d9']}
61+
fillColor={['#bbd3fb', '#f78d94']}
62+
/>
63+
<ComponentDropdownIcon
64+
strokeWidth={strokeWidth}
65+
strokeColor={['currentColor', '#0052d9']}
66+
fillColor={['#bbd3fb', '#f78d94']}
67+
/>
68+
<ComponentRadioIcon
69+
strokeWidth={strokeWidth}
70+
strokeColor={['currentColor', '#0052d9']}
71+
fillColor={['#bbd3fb', '#f78d94']}
72+
/>
73+
<ComponentStepsIcon
74+
strokeWidth={strokeWidth}
75+
strokeColor={['currentColor', '#0052d9']}
76+
fillColor={['#bbd3fb', '#f78d94']}
77+
/>
4078
</div>
4179
</div>
4280
);

‎src/icon/_example/style/index.less‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,12 @@
88
.cps-icon {
99
margin-right: 24px;
1010
}
11+
12+
.t-demo-row {
13+
&__slider {
14+
.t-slider__bar {
15+
margin: 16px 0;
16+
}
17+
}
18+
}
1119
}

‎src/icon/icon.en-US.md‎

Lines changed: 6 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@
44

55
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`.
66

7+
On-demand icon importing is recommended to reduce the output size. Additionally, icons imported on-demand support arbitrary weight adjustments and up to four color fills, providing a better user experience.
8+
9+
<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65;margin:16px 0">
10+
Visit <a style="margin: 0 4px" href='/icons-en'> TDesign Icons </a> to view and experience all supported icons.
11+
</div>
12+
713
### Import on-demand
814

915
SVG icons can be imported on demand. When using the Icon component in component development, SVG icons are imported on demand.
@@ -52,27 +58,6 @@ You can get all the name of icon by import manifest from the bundle `import { ma
5258

5359
if your project is in a no-network scenario, please use on-demand loading of icons. For example,`<t-icon name="add" />` should be changed to `<AddIcon />`
5460

55-
### All Icons
56-
57-
<div style={{
58-
background: '#ecf2fe',
59-
display: 'flex',
60-
alignItems: 'center',
61-
lineHeight: '20px',
62-
padding: '14px 24px',
63-
borderRadius: '3px',
64-
color: '#555a65',
65-
margin: '16px 0'
66-
}}>
67-
<svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style={{ marginRight: '5px'}}>
68-
<path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
69-
</svg>
70-
<p>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</p>
71-
</div>
72-
73-
<td-icons-view />
74-
75-
7661
## API
7762

7863
### IconSVG Props

‎src/icon/icon.md‎

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@
66
图标相对其他基础组件较为独立，所以作为一个独立的 `npm` 包做发布管理。如果项目中直接使用，请安装 `tdesign-icons-react`。
77
图标库中共包含超过 **25** 类，**1200+** 个图标，推荐您按需引用图标，减少产物的体积。
88

9+
推荐按需引用图标，减少产物的体积。同时，按需引入的图标还支持`任意的粗细调整`和`最多四种颜色填充`功能，具有更好的使用体验。
10+
11+
<div style={{ background: '#ecf2fe',display: 'flex',alignItems: 'center',lineHeight: '20px',padding: '14px 24px',borderRadius: '3px',color: '#555a65',margin:'16px 0'}}>
12+
打开 <a style={{ margin: '0 4px'}} href='/icons'> TDesign 图标独立站点 </a> 查看全部支持的图标。
13+
</div>
14+
915
### 按需引入使用图标
1016

1117
图标可以按需引入单个 SVG 图标。组件开发内部使用到 Icon 时，均按需引入 SVG 图标。
@@ -14,14 +20,14 @@
1420

1521
{{ single }}
1622

23+
1724
### 全量引入使用图标
1825

1926
图标尺寸单位支持多种， 'small', 'medium', 'large', '35px', '3em' 等。
2027
图标颜色使用 CSS 控制，如：style="color: red"，或者 style="fill: red"。
2128
点击右侧导航「全部图标」即可查看组件库全部图标。
2229

2330
{{ base }}
24-
2531
### iconfont 图标
2632

2733
TDesign 支持通过使用 Iconfont 图标，使用时需要单独引入 Iconfont 图标组件。
@@ -66,27 +72,6 @@ TDesign 支持通过使用 Iconfont 图标，使用时需要单独引入 Iconfon
6672

6773
所以如果你的项目是无网络场景，请使用按需加载的图标，如`<t-icon name="add" />`请改为`<AddIcon />`。
6874

69-
### 全部图标
70-
71-
<div style={{
72-
background: '#ecf2fe',
73-
display: 'flex',
74-
alignItems: 'center',
75-
lineHeight: '20px',
76-
padding: '14px 24px',
77-
borderRadius: '3px',
78-
color: '#555a65',
79-
margin: '16px 0'
80-
}}>
81-
<svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style={{ marginRight: '5px'}}>
82-
<path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
83-
</svg>
84-
<p>大部分图标在 0.3.0 版本后的图标库新增，如果发现图标引入后无法正常展示，请检查安装的图标库`tdesign-icons-react`的版本。</p>
85-
</div>
86-
87-
88-
<td-icons-view />
89-
9075
## API
9176

9277
### IconSVG Props

0 commit comments

Comments
 (0)