feat(icons): new version of tdesign icons

packages/components/avatar/__tests__/__snapshots__/vitest-avatar.test.jsx.snap

@@ -105,14 +105,40 @@ exports[`AvatarGroup Component > props.collapseAvatar works fine 1`] = `
                 class="t-icon t-icon-image"
                 fill="none"
                 height="1em"
-                style="font-size: 24px;"
+                style="fill: none; font-size: 24px;"
                 viewBox="0 0 24 24"
                 width="1em"
               >
-                <path
-                  d="M2 2H22V22H2V2ZM4 20H17.5858L9 11.4142L4 16.4142V20ZM20 19.5858V4H4V13.5858L9 8.58579L20 19.5858ZM15.5469 7C14.9946 7 14.5469 7.44772 14.5469 8C14.5469 8.55228 14.9946 9 15.5469 9C16.0992 9 16.5469 8.55228 16.5469 8C16.5469 7.44772 16.0992 7 15.5469 7ZM12.5469 8C12.5469 6.34315 13.89 5 15.5469 5C17.2037 5 18.5469 6.34315 18.5469 8C18.5469 9.65685 17.2037 11 15.5469 11C13.89 11 12.5469 9.65685 12.5469 8Z"
-                  fill="currentColor"
-                />
+                <g
+                  id="image"
+                >
+                  <path
+                    d="M3 21H20L9 10L3 16V21Z"
+                    fill="transparent"
+                    id="fill1"
+                  />
+                  <circle
+                    cx="15.75"
+                    cy="8.25"
+                    fill="transparent"
+                    id="fill2"
+                    r="2"
+                  />
+                  <path
+                    d="M3 16V3H21V21H20M3 16V21H20M3 16L9 10L20 21"
+                    id="stroke1"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  />
+                  <circle
+                    cx="15.75"
+                    cy="8.25"
+                    id="stroke2"
+                    r="2"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  />
+                </g>
               </svg>
             </div>
             <div

packages/components/back-top/__tests__/__snapshots__/vitest-back-top.test.jsx.snap

@@ -59,14 +59,21 @@ exports[`BackTop Component > props.shape is equal to circle 1`] = `
       class="t-icon t-icon-backtop t-back-top__icon"
       fill="none"
       height="1em"
-      style="font-size: 24px;"
+      style="fill: none; font-size: 24px;"
       viewBox="0 0 24 24"
       width="1em"
     >
-      <path
-        d="M4 4H20V6H4V4ZM12 7.58579L18.9142 14.5L17.5 15.9142L13 11.4142V21H11V11.4142L6.5 15.9142L5.08579 14.5L12 7.58579Z"
-        fill="currentColor"
-      />
+      <g
+        id="backtop"
+      >
+        <path
+          d="M17.5 14.5L12 9L6.5 14.5M5 5H19M12 10.25V20"
+          id="stroke1"
+          stroke="currentColor"
+          stroke-linecap="square"
+          stroke-width="2"
+        />
+      </g>
     </svg>
     <span
       class="t-back-top__text"
@@ -88,14 +95,21 @@ exports[`BackTop Component > props.shape is equal to square 1`] = `
       class="t-icon t-icon-backtop t-back-top__icon"
       fill="none"
       height="1em"
-      style="font-size: 24px;"
+      style="fill: none; font-size: 24px;"
       viewBox="0 0 24 24"
       width="1em"
     >
-      <path
-        d="M4 4H20V6H4V4ZM12 7.58579L18.9142 14.5L17.5 15.9142L13 11.4142V21H11V11.4142L6.5 15.9142L5.08579 14.5L12 7.58579Z"
-        fill="currentColor"
-      />
+      <g
+        id="backtop"
+      >
+        <path
+          d="M17.5 14.5L12 9L6.5 14.5M5 5H19M12 10.25V20"
+          id="stroke1"
+          stroke="currentColor"
+          stroke-linecap="square"
+          stroke-width="2"
+        />
+      </g>
     </svg>
     <span
       class="t-back-top__text"

packages/components/icon/_example/IconExample.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   LettersTIcon,
   LettersDIcon,
@@ -15,28 +15,61 @@ import {
   ComponentRadioIcon,
   ComponentStepsIcon,
 } from 'tdesign-icons-react';
-import { Space } from 'tdesign-react';
+import { Space, Slider } from 'tdesign-react';
 
 export default function IconExample() {
+  const [strokeWidth, setStrokeWidth] = useState(2);
+  const handleClick = () => {
+    console.log('icon is clicked');
+  };
   return (
     <Space direction="vertical">
+      <Slider value={strokeWidth} onChange={(v) => setStrokeWidth(Number(v))} min={0.5} max={2.5} step={0.5} />
       <Space breakLine style={{ color: `var(--td-brand-color)` }}>
-        <LettersTIcon />
-        <LettersDIcon />
-        <LettersEIcon />
-        <LettersSIcon />
-        <LettersIIcon />
-        <LettersGIcon />
-        <LettersNIcon />
+        <LettersTIcon strokeWidth={strokeWidth} onClick={handleClick} />
+        <LettersDIcon strokeWidth={strokeWidth} />
+        <LettersEIcon strokeWidth={strokeWidth} />
+        <LettersSIcon strokeWidth={strokeWidth} />
+        <LettersIIcon strokeWidth={strokeWidth} />
+        <LettersGIcon strokeWidth={strokeWidth} />
+        <LettersNIcon strokeWidth={strokeWidth} />
       </Space>
       <Space breakLine>
-        <ComponentCheckboxIcon />
-        <ComponentBreadcrumbIcon />
-        <ComponentInputIcon />
-        <ComponentSwitchIcon />
-        <ComponentDropdownIcon />
-        <ComponentRadioIcon />
-        <ComponentStepsIcon />
+        <ComponentCheckboxIcon
+          strokeWidth={strokeWidth}
+          strokeColor={['currentColor', '#0052d9']}
+          fillColor={['#bbd3fb', '#f78d94']}
+        />
+        <ComponentBreadcrumbIcon
+          strokeWidth={strokeWidth}
+          strokeColor={['currentColor', '#0052d9']}
+          fillColor={['#bbd3fb', '#f78d94']}
+        />
+        <ComponentInputIcon
+          strokeWidth={strokeWidth}
+          strokeColor={['currentColor', '#0052d9']}
+          fillColor={['#bbd3fb', '#f78d94']}
+        />
+        <ComponentSwitchIcon
+          strokeWidth={strokeWidth}
+          strokeColor={['currentColor', '#0052d9']}
+          fillColor={['#bbd3fb', '#f78d94']}
+        />
+        <ComponentDropdownIcon
+          strokeWidth={strokeWidth}
+          strokeColor={['currentColor', '#0052d9']}
+          fillColor={['#bbd3fb', '#f78d94']}
+        />
+        <ComponentRadioIcon
+          strokeWidth={strokeWidth}
+          strokeColor={['currentColor', '#0052d9']}
+          fillColor={['#bbd3fb', '#f78d94']}
+        />
+        <ComponentStepsIcon
+          strokeWidth={strokeWidth}
+          strokeColor={['currentColor', '#0052d9']}
+          fillColor={['#bbd3fb', '#f78d94']}
+        />
       </Space>
     </Space>
   );

packages/components/icon/icon.en-US.md

@@ -3,6 +3,14 @@
 ### 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`. 
+
+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.
+
+<div  style={{ background: '#ecf2fe',display: 'flex',alignItems: 'center',lineHeight: '20px',padding: '14px 24px',borderRadius: '3px',color: '#555a65',margin:'16px 0'}}>
+  Open <a style={{ margin: '0 4px'}} href='/icons-en'> TDesign Icons </a>  to view and experience all supported icons.
+</div>
+
+
 ### Import on-demand
 
 SVG icons can be imported on demand. When using the Icon component in component development, SVG icons are imported on demand.
@@ -55,31 +63,33 @@ You can get all the name of icon by import manifest from the bundle `import { ma
 #### 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,`<t-icon name="add" />` should be changed to `<AddIcon />`
-### All Icons
-
-<div style={{ 
-  background: '#ecf2fe', 
-  display: 'flex', 
-  alignItems: 'center', 
-  lineHeight: '20px',
-  padding: '14px 24px',
-  borderRadius: '3px',
-  color: '#555a65',
-  margin: '16px 0'
-  }}>
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style={{ marginRight: '5px'}}>
-    <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>
-  </svg>
-  <p style={{ 
-    flex:'1'}}>Most icons were added to the icon library after version 0.4.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. Supports Chinese and English search. If you think other keyword prompts can be added, feel free to submit a Pull Request to <a href="https://github.com/Tencent/tdesign-icons/blob/develop/packages/view/src/manifest.js"> the Icon Repository</a> to help us complete it together.
-  </p>
-</div>
 
 
-<td-icons-view />
+## API
 
+### Icon Props
 
-## API
+name | type | default | description | required
+-- | -- | -- | -- | --
+size | String | undefined | size of icon | N
+onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
+strokeWidth | Number | 2| width of icon stroke，default is 2
+strokeColor | String / Array | currentColor | stroke color of the outlined icon, default value is `currentColor`, supporting up to two stroke colors at most
+fillColor | String / Array | | fill color for outlined icons and the fill color for filled icons. For outlined icons, the default is transparent, while for filled icons, the default is currentColor, supporting up to two fill colors at most
+
+
+### IconSVG Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，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<string>` | N
+onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 
 ### IconSVG Props
 

packages/components/icon/icon.md

@@ -3,7 +3,14 @@
 ### 安装独立 Icon 包
 
 图标相对其他基础组件较为独立，所以作为一个独立的 `npm` 包做发布管理。如果项目中直接使用，请安装 `tdesign-icons-react`。
-图标库中共包含超过 **25** 类，**2100+** 个图标，推荐您按需引用图标，减少产物的体积。
+图标库中共包含超过 **25** 类，**2100+** 个图标。
+
+推荐按需引用图标，减少产物的体积。同时，按需引入的图标还支持 `任意的粗细调整` 和 `最多四种颜色填充` 功能，具有更好的使用体验。
+
+<div style={{ background: '#ecf2fe',display: 'flex',alignItems: 'center',lineHeight: '20px',padding: '14px 24px',borderRadius: '3px',color: '#555a65',margin:'16px 0'}}>
+  打开 <a style={{ margin: '0 4px'}} href='/icons'> TDesign 图标独立站点 </a>  查看全部支持的图标。
+</div>
+
 
 ### 按需引入图标
 
@@ -68,29 +75,20 @@
 
 所以如果你的项目是无网络场景，请使用按需加载的图标，如`<AddIcon />`。
 
-### 全部图标
-
-<div style={{ 
-  background: '#ecf2fe', 
-  display: 'flex', 
-  alignItems: 'center', 
-  lineHeight: '20px',
-  padding: '14px 24px',
-  borderRadius: '3px',
-  color: '#555a65',
-  margin: '16px 0'
-  }}>
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style={{ marginRight: '5px'}}>
-    <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>
-  </svg>
-  <p style={{
-    flex: '1'}}>大部分图标在 0.4.0 版本后的图标库新增，如果发现图标引入后无法正常展示，请检查安装的图标库`tdesign-icons-react`的版本。支持中文英文搜索，如果觉得可以再增加其他关键词提示，欢迎到 <a href="https://github.com/Tencent/tdesign-icons/blob/develop/packages/view/src/manifest.js"> 图标仓库</a> 提交PR，帮我们一起补充。
-  </p>
-</div>
-
-<td-icons-view />
 
 ## API
+
+### Icon Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+size | String | undefined | 图标尺寸，支持 'small', 'medium', 'large'，'35px', '3em' 等 | N
+onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击时触发 | N
+strokeWidth | Number | 2 | 图标的粗细，默认为 2
+strokeColor | String / Array | currentColor |描边图标的描边颜色，默认为`currentColor`，最多支持两种描边颜色
+fillColor | String / Array | - | 描边图标的填充颜色和填充图标的填充色，描边图标默认为 `transparent`，填充图标默认为`currentColor`, 最多支持两种颜色的填充
+
+
 ### IconSVG Props
 
 名称 | 类型 | 默认值 | 说明 | 必传