feat(Icon): update version to 0.3.4 (#456)

* feat(Icon): update version to 0.3.4 * chore: update snapshot * chore: update common * chore: update common * chore: update snapshot --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Tencent · Aug 16, 2024 · e7e6744 · e7e6744
1 parent cb0c4bc
commit e7e6744
Show file tree

Hide file tree

Showing 15 changed files with 1,706 additions and 356 deletions.
diff --git 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
@@ -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
diff --git a/src/icon/_example/base.tsx 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 (
+    <div className="t-demo-iconfont">
+      <div className="t-demo-row">
+        <p>How do you feel today?</p>
+        <IconFont name="sneer" />
+        <IconFont name="unhappy" />
+        <IconFont name="excited" />
+        <IconFont name="surprised" />
+        <IconFont name="giggle" />
+      </div>
+      <br />
+      <div className="t-demo-row">
+        <p>What is your favourite food?</p>
+        <IconFont name="tangerinr" style={{ color: 'orange' }} />
+        <IconFont name="bamboo-shoot" style={{ color: 'green' }} />
+        <IconFont name="apple" style={{ color: 'red' }} />
+        <IconFont name="milk" style={{ color: '#0052D9' }} />
+        <IconFont name="peach" style={{ color: 'pink' }} />
+      </div>
+      <br />
+      <div className="t-demo-row">
+        <p>How much icons does TDesign Icon includes?</p>
+        <IconFont name="numbers-1" style={{ color: 'red' }} />
+        <IconFont name="numbers-2" style={{ color: 'green' }} />
+        <IconFont name="numbers-0" style={{ color: 'orange' }} />
+        <IconFont name="numbers-3" style={{ color: '#0052d9' }} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/icon/_example/enhanced.tsx 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<Pick<IconProps, 'name' | 'size' | 'style'>>) => (
+  <Icon name={name} size={size} style={style} url="https://tdesign.gtimg.com/icon/default-demo/index.js" />
+);
+
+export default function EnhancedIcon() {
+  return (
+    <div className="t-demo-iconfont">
+      <div>
+        <CustomUrlIcon name="cps-icon-home-sheep" style={{ marginRight: '8px' }} />
+        <CustomUrlIcon name="cps-icon-home-sheep" size="medium" style={{ marginRight: '8px' }} />
+        <CustomUrlIcon name="cps-icon-home-sheep" size="large" style={{ marginRight: '8px' }} />
+        <CustomUrlIcon name="cps-icon-home-sheep" size="25px" />
+      </div>
+      <br />
+      <div>
+        <CustomUrlIcon name="cps-icon-home-sheep" style={{ color: 'red' }} />
+        <CustomUrlIcon name="cps-icon-home-sheep" style={{ color: 'green' }} />
+        <CustomUrlIcon name="cps-icon-home-sheep" style={{ color: 'orange' }} />
+        <CustomUrlIcon name="t-icon-home" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/icon/_example/iconfont-enhanced.tsx 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<Pick<IconProps, 'name' | 'size' | 'style'>>) => (
+  <IconFont name={name} size={size} style={style} url="https://tdesign.gtimg.com/icon/default-demo/index.css" />
+);
+
+export default function FontEnhancedIcon() {
+  return (
+    <div className="t-demo-iconfont">
+      <div>
+        <CustomUrlIconFont name="cps-icon cps-icon-home-sheep" />
+        <CustomUrlIconFont name="cps-icon cps-icon-home-sheep" size="medium" />
+        <CustomUrlIconFont name="cps-icon cps-icon-home-sheep" size="large" />
+        <CustomUrlIconFont name="cps-icon cps-icon-home-sheep" size="25px" />
+        <CustomUrlIconFont name="cps-icon cps-icon-home-sheep" size="2em" />
+      </div>
+      <br />
+      <div>
+        <CustomUrlIconFont name="cps-icon cps-icon-home-sheep" style={{ color: 'red' }} />
+        <CustomUrlIconFont name="cps-icon cps-icon-home-sheep" style={{ color: 'green' }} />
+        <CustomUrlIconFont name="cps-icon cps-icon-home-sheep" style={{ color: 'orange' }} />
+        <CustomUrlIconFont name="t-icon-home" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/icon/_example/iconfont.tsx 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 (
+    <div className="t-demo-iconfont">
+      <div className="t-demo-row">
+        <p>How do you feel today?</p>
+        <IconFont name="sneer" />
+        <IconFont name="unhappy" />
+        <IconFont name="excited" />
+        <IconFont name="surprised" />
+        <IconFont name="giggle" />
+      </div>
+      <br />
+      <div className="t-demo-row">
+        <p>What is your favourite food?</p>
+        <IconFont name="tangerinr" style={{ color: 'orange' }} />
+        <IconFont name="bamboo-shoot" style={{ color: 'green' }} />
+        <IconFont name="apple" style={{ color: 'red' }} />
+        <IconFont name="milk" style={{ color: '#0052D9' }} />
+        <IconFont name="peach" style={{ color: 'pink' }} />
+      </div>
+      <br />
+      <div className="t-demo-row">
+        <p>How much icons does TDesign Icon includes?</p>
+        <IconFont name="numbers-1" style={{ color: 'red' }} />
+        <IconFont name="numbers-2" style={{ color: 'green' }} />
+        <IconFont name="numbers-0" style={{ color: 'orange' }} />
+        <IconFont name="numbers-3" style={{ color: '#0052d9' }} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/icon/_example/index.jsx b/src/icon/_example/index.jsx
diff --git a/src/icon/_example/index.tsx 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 (
+    <div className="tdesign-mobile-demo">
+      <TDemoHeader title="Icon 图标" summary="Icon 作为UI构成中重要的元素，一定程度上影响UI界面整体呈现出的风格。" />
+      <TDemoBlock title="SVG 全量引入" padding={true}>
+        <BaseIcon />
+      </TDemoBlock>
+      <TDemoBlock summary="SVG 按需引入" padding={true}>
+        <SingleIcon />
+      </TDemoBlock>
+      <TDemoBlock summary="SVG 高级用法" padding={true}>
+        <EnhancedIcon />
+      </TDemoBlock>
+      <TDemoBlock title="iconfont 图标" padding={true}>
+        <IconfontIcon />
+      </TDemoBlock>
+      <TDemoBlock summary="iconfont 高级用法" padding={true}>
+        <IconfontEnhancedIcon />
+      </TDemoBlock>
+    </div>
+  );
+}
diff --git a/src/icon/_example/single.tsx 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 (
+    <div className="t-demo-iconfont">
+      <div className="t-demo-row">
+        <LettersTIcon />
+        <LettersDIcon />
+        <LettersEIcon />
+        <LettersSIcon />
+        <LettersIIcon />
+        <LettersGIcon />
+        <LettersNIcon />
+      </div>
+      <br />
+      <div className="t-demo-row">
+        <ComponentCheckboxIcon />
+        <ComponentBreadcrumbIcon />
+        <ComponentInputIcon />
+        <ComponentSwitchIcon />
+        <ComponentDropdownIcon />
+        <ComponentRadioIcon />
+        <ComponentStepsIcon />
+      </div>
+    </div>
+  );
+}
diff --git a/src/icon/_example/style/index.less 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
@@ -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,`<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>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>
+  </div>
+
+<td-icons-view />
+
+
+## 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<string>` | N
+onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | 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<string>` | N
+onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N