first commit

uni_modules/tdesign-uniapp/components/icon/README.en-US.md

@@ -0,0 +1,32 @@
+:: BASE_DOC ::
+
+## API
+
+### Icon Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+color | String | - | \- | N
+name | String | - | required | Y
+prefix | String | - | \- | N
+size | String / Number | '' | \- | N
+
+### Icon Events
+
+name | params | description
+-- | -- | --
+click | \- | \-
+
+### Icon External Classes
+
+className | Description
+-- | --
+t-class | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+ant: norma | ant: norma | -

uni_modules/tdesign-uniapp/components/icon/README.md

@@ -0,0 +1,109 @@
+---
+title: Icon 图标
+description: 图标。
+spline: base
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TIcon from '@tdesign/uniapp/icon/icon.vue';
+```
+
+## 常见问题
+
+<details>
+  <summary>
+    控制台告警：Failed to load font
+    <span class="icon">👇</span>
+  </summary>
+  <p style="margin-top: 10px; color: rgba(0, 0, 0, .6)">
+    告警属于开发者工具的 bug，可以忽略，具体可以看 <a href="https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html" target="_blank">官网文档</a>
+  </p>
+</details>
+
+
+### 基础组件图标
+
+{{ base }}
+
+### 自定义组件图标
+
+{{ custom }}
+
+自定义图标用法，下面以 `iconfont` 为例
+
+#### 准备图标文件
+
+文件后缀应为`.wxss`，如下方代码块所示：
+
+```css
+@font-face {
+  font-family: 'icon';  // 使用自定义的字体名称
+  ···
+}
+
+.icon {
+  font-family: 'icon' !important;  // 字体名称
+  ···
+}
+
+.icon-a-0:before {  // icon 图标。注意 FontClass 前缀与 font-family 保持一致
+  content: '\e64d';
+}
+```
+- 添加所需图标，下载图标。图标库一般会提供 **在线链接** 或者 **下载至本地** 等使用方式。**在线链接** 方式会指向一个 `.css` 文件，可以下载或复制其内容，将其修改成后缀名为 `.wxss` 的文件
+- 将 `.wxss` 文件中的 `FontClass/Symbol前缀` 与 `Font Family` 两项内容保持一致，如: `FontClass/Symbol` 前缀为 `icon-`，则 `Font Family` 为 `icon`。
+
+> 注：若是采用 `下载至本地` 方式，需关注 `.css` 和 `.ttf` 文件。由于微信小程序不支持处理 `ttf、woff、eot` 等文件，但支持 `base64`，所以需要将 `.ttf` 文件转换为 `base64`  (可借助转换工具，如 [transfonter.org](https://transfonter.org/)，会得到一个 `stylesheet.css` 文件)，然后将 `.css` 文件中的 `@font-face {}` 内容替换为 `stylesheet.css` 中的 `base64` 内容，最后将 `.css` 文件修改后缀为 `.wxss`
+
+#### 引入自定义图标
+
+- 全局引入：在项目 `app.wxss`，使用 `@import` 引入上述的 `.wxss` 文件
+- 局部引入：在 `page` 对应的 `.wxss` 中，使用 `@import` 引入上述的 `.wxss` 文件
+
+#### 自定义图标的使用
+
+ `<t-icon>` 组件中的 `prefix` 属性值与前面设置的 `Font Family` 保持一致，即 `prefix="icon"`，`name` 属性值为自定义图标名称，如图标的 `className` 为 `icon-a-1h`，则 `name="a-1h"`。
+
+### 图片链接
+
+{{ iconImage }}
+
+<td-icons-view framework-content/>
+
+## API
+
+### Icon Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+color | String | - | 图标颜色 | N
+name | String | - | 必需。图标名称或图片链接 | Y
+prefix | String | - | 自定义图标前缀 | N
+size | String / Number | '' | 图标大小, 如 `20`, `20px`, `48rpx`, 默认单位是 `px` | N
+
+### Icon Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | \- | 点击图标时触发
+
+### Icon External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+| 名称 | 默认值 | 描述 |
+| -- | -- | -- | 
+| ant: norma | ant: norma | - |

uni_modules/tdesign-uniapp/components/icon/icon.vue

@@ -0,0 +1,121 @@
+<template>
+  <view
+    :class="[tClass, prefix || 't-icon']"
+    :style="tools._style([iconStyle, customStyle])"
+    :aria-hidden="ariaHidden"
+    :aria-label="ariaLabel"
+    :aria-role="ariaRole"
+    @click="onTap"
+  >
+    <view
+      v-if="isImage"
+      :class="classPrefix + '--image'"
+    >
+      <image
+        :src="name"
+        mode="aspectFit"
+        :class="classPrefix + '__image'"
+      />
+    </view>
+    <div
+      v-if="tools.isValidIconName(name) && !isImage"
+      :class="(prefix ? prefix : classPrefix) + '-' + name + ' ' + classPrefix + '-base'"
+    />
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { styles, addUnit, getRect } from '../common/utils';
+import tools from '../common/utils.wxs';
+
+
+const name = `${prefix}-icon`;
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [`${prefix}-class`],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      componentPrefix: prefix,
+      classPrefix: name,
+      isImage: false,
+      iconStyle: undefined,
+      tools,
+    };
+  },
+  watch: {
+    name: {
+      handler() {
+        this.setIconStyle();
+      },
+      immediate: true,
+    },
+    color: {
+      handler() {
+        this.setIconStyle();
+      },
+      immediate: true,
+    },
+    size: {
+      handler() {
+        this.setIconStyle();
+      },
+      immediate: true,
+    },
+    style: {
+      handler() {
+        this.setIconStyle();
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    onTap(t) {
+      this.$emit('click', t);
+    },
+    setIconStyle() {
+      const {
+        name,
+        color,
+        size,
+        classPrefix,
+      } = this;
+      const isImage = name.indexOf('/') !== -1;
+      const sizeValue = addUnit(size);
+      const colorStyle = color ? {
+        color,
+      } : {};
+      const fontStyle = size ? {
+        'font-size': sizeValue,
+      } : {};
+      const iconStyle = { ...colorStyle, ...fontStyle };
+      this.isImage = isImage;
+
+      if (isImage) {
+        let iconSize = sizeValue;
+        if (!iconSize) {
+          getRect(this, `.${classPrefix}`)
+            .then((res) => {
+              iconSize = addUnit(res?.height);
+            })
+            .catch(() => {});
+        }
+
+        iconStyle.width = iconSize;
+        iconStyle.height = iconSize;
+      }
+      this.iconStyle = `${styles(iconStyle)}`;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './icon.css';
+</style>

uni_modules/tdesign-uniapp/components/icon/props.ts

@@ -0,0 +1,35 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdIconProps } from './type';
+export default {
+  /** 图标颜色 */
+  color: {
+    type: String,
+    default: '',
+  },
+  /** 图标名称或图片链接 */
+  name: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  /** 自定义图标前缀 */
+  prefix: {
+    type: String,
+    default: '',
+  },
+  /** 图标大小, 如 `20`, `20px`, `48rpx`, 默认单位是 `px` */
+  size: {
+    type: [String, Number],
+    default: '' as TdIconProps['size'],
+  },
+  /** 点击图标时触发 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};

uni_modules/tdesign-uniapp/components/icon/type.ts

@@ -0,0 +1,32 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdIconProps {
+  /**
+   * 图标颜色
+   * @default ''
+   */
+  color?: string;
+  /**
+   * 图标名称或图片链接
+   * @default ''
+   */
+  name: string;
+  /**
+   * 自定义图标前缀
+   * @default ''
+   */
+  prefix?: string;
+  /**
+   * 图标大小, 如 `20`, `20px`, `48rpx`, 默认单位是 `px`
+   * @default ''
+   */
+  size?: string | number;
+  /**
+   * 点击图标时触发
+   */
+  onClick?: () => void;
+}