fix(web components): fix icon center position and duplicated class (#102

) * feat(web-components): web components icon complete🎉 * feat(web-components): web components icon complete🎉 * feat(icon): add tdesign-icons-web-components * feat(icon): add tdesign-icons-web-components * feat(icon): add tdesign-icons-web-components * chore: fix typo * feat(icon): add tdesign-icons-web-components * feat(web-components): fix README.md * fix(web-components): 修复svg fill-rule 属性问题 * fix(web components): 修复icon显示不居中和class重复设置问题 --------- Co-authored-by: wū yāng <[email protected]>
Tencent · Aug 14, 2024 · c4fc1db · c4fc1db
1 parent 4fc18cd
commit c4fc1db
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 24 deletions.
diff --git a/packages/web-components/gulp/index.ts b/packages/web-components/gulp/index.ts
@@ -1,19 +1,15 @@
 import { parallel, series } from 'gulp';
 
-import path from 'path';
 import { generateEntry } from '../../../gulp/generate-entry';
 import { generateManifest } from '../../../gulp/generate-manifest';
 import { generateTypeMap } from '../../../gulp/generate-type-map';
 
 import { generateIcons } from '../../../gulp/generate-icons';
 import { clearDir } from '../../../gulp/clean-dir';
-import { generateIconFontJson } from '../../../gulp/generate-icon-font';
 
 import { wcGetIconFileContent } from './wc-use-template';
 import { generateIconsJson } from './generate-icons-json';
 
-const targetDir = path.resolve(__dirname, '../src/iconfont/');
-
 export function wcTask(source: string[]) {
   return series(
     clearDir(['packages/web-components/src/components']),

diff --git a/packages/web-components/src/icon.tsx b/packages/web-components/src/icon.tsx
@@ -7,7 +7,10 @@ import { getStylesheet } from './util/check-url-and-load';
 
 export interface IconProps extends OmiDOMAttributes {
   style?: CSSStyleDeclaration;
-  className?: string;
+  /**
+   * 类名，叫cls是为了和className区分
+   */
+  cls?: string;
   size?: 'small' | 'medium' | 'large' | string | number;
 }
 
@@ -48,19 +51,27 @@ export class IconBase extends Component<IconProps> {
   static icon: VNode | null = null;
 
   static propTypes = {
-    className: String,
+    cls: String,
     size: String,
     style: Object,
   }
 
   render(props) {
     const {
-      id, className, size, style, ...restProps
+      id,
+      cls,
+      size,
+      style,
+      ...restProps
     } = props;
+
+    delete restProps.cls;
+    delete (restProps as any)?.className;
+
     const { className: sizeClassName, style: sizeStyle } = getSizeProps(size);
-    const cls = classname('t-icon', `t-icon-${id}`, className, sizeClassName);
+    const combinCls = classname('t-icon', `t-icon-${id}`, cls, sizeClassName);
     return render((this.constructor as typeof IconBase).icon as VNode, `${id}`, {
-      className: cls,
+      className: combinCls,
       style: { ...style, ...sizeStyle },
       ...restProps,
     });

diff --git a/packages/web-components/src/iconfont/index.tsx b/packages/web-components/src/iconfont/index.tsx
@@ -75,7 +75,7 @@ export default class IconFont extends Component<IconFontProps> {
     name: String,
     url: [String, Array],
     loadDefaultIcons: Boolean,
-    className: String,
+    cls: String,
     size: String,
     style: Object,
   }
@@ -84,13 +84,13 @@ export default class IconFont extends Component<IconFontProps> {
     return this.props.url && /^t-icon-(\w|-)+$/.test(this.props.name || '');
   }
 
-  get cls() {
+  get class() {
     const { className: sizeClassName } = getSizeProps(this.props.size);
     return classNames({
       [this.props.name || '']: this.props.url,
       [`${this.classPrefix}-icon`]: !this.props.url || this.isBuiltInIcon,
       [`${this.classPrefix}-icon-${this.props.name}`]: !this.props.url,
-    }, sizeClassName, this.props.className);
+    }, sizeClassName, this.props.cls);
   }
 
   render(props: OmiProps<IconFontProps, any>) {
@@ -103,6 +103,7 @@ export default class IconFont extends Component<IconFontProps> {
 
     delete htmlProps.loadDefaultIcons;
     delete htmlProps.url;
+    delete htmlProps.cls;
     delete htmlProps.className;
     delete htmlProps.name;
 
@@ -112,7 +113,7 @@ export default class IconFont extends Component<IconFontProps> {
     return <>
       <style>{`.t-icon-${this.props.name}:before {content: "${fontCode}";}`}</style>
       <Tag
-        class={this.cls}
+        class={this.class}
         style={{ ...customStyle, ...sizeStyle }}
         part='t-icon'
         {...htmlProps}

diff --git a/packages/web-components/src/svg-sprite/index.tsx b/packages/web-components/src/svg-sprite/index.tsx
@@ -29,11 +29,6 @@ export interface SpriteIconProps extends IconProps {
    * @default true
    */
   loadDefaultIcons?: boolean;
-
-  /**
-   * 类名
-   */
-  className?: string;
 }
 
 /**
@@ -66,7 +61,7 @@ export class Icon extends Component<SpriteIconProps> {
     name: String,
     url: [String, Array],
     loadDefaultIcons: Boolean,
-    className: String,
+    cls: String,
     size: String,
     style: Object,
   }
@@ -75,9 +70,9 @@ export class Icon extends Component<SpriteIconProps> {
 
   svgIconJson = iconJson;
 
-  get cls() {
+  get class() {
     const {
-      url, name, size, className: customClassName,
+      url, name, size, cls: customClassName,
     } = this.props;
     const iconName = url ? name : `${this.classPrefix}-icon-${name}`;
     const { className: sizeClassName } = getSizeProps(size);
@@ -104,15 +99,16 @@ export class Icon extends Component<SpriteIconProps> {
     } = props;
 
     delete restProps.loadDefaultIcons;
-    delete restProps.className;
+    delete restProps.cls;
+    delete (restProps as any)?.className;
     delete restProps.url;
 
     const { style: sizeStyle } = getSizeProps(size);
 
     try {
       const node = JSON.parse(this.svgIconJson?.[name] || '{}');
       return render(node, `${name}`, {
-        className: this.cls,
+        className: this.class,
         style: { ...style, ...sizeStyle },
         ...restProps,
         part: 't-icon',

diff --git a/packages/web-components/src/util/check-url-and-load.ts b/packages/web-components/src/util/check-url-and-load.ts
@@ -37,7 +37,12 @@ function loadLink(url: string, className: string, callback) {
 }
 
 function getStylesheet() {
-  const iconStyleString = `@keyframes t-spin {
+  const iconStyleString = `
+  :host {
+    display: inline-flex;
+  }
+
+  @keyframes t-spin {
     from {
       transform: rotate(0deg);
     }