From 407ac0b6802c2cfa90ef1018801750b8b252441a Mon Sep 17 00:00:00 2001 From: Y Date: Mon, 22 May 2023 11:03:50 +0800 Subject: [PATCH] feat(Icon): support TIcon (#681) --- package.json | 2 +- src/_common | 2 +- src/components.ts | 1 + src/icon/demos/enhanced.vue | 20 +++++------ src/icon/demos/mobile.vue | 38 ++++++++++++++++++++ src/icon/icon-svg-props.ts | 33 +++++++++++++++++ src/icon/icon.en-US.md | 37 ++++++++++++++++++++ src/icon/icon.md | 70 ++++++++++++++++++++++++++++++------- src/icon/iconfont-props.ts | 38 ++++++++++++++++++++ src/icon/index.ts | 5 +++ src/icon/type.ts | 60 +++++++++++++++++++++++++++++++ src/shared/component.ts | 4 +-- 12 files changed, 283 insertions(+), 27 deletions(-) create mode 100644 src/icon/demos/mobile.vue create mode 100644 src/icon/icon-svg-props.ts create mode 100644 src/icon/icon.en-US.md create mode 100644 src/icon/iconfont-props.ts create mode 100644 src/icon/index.ts create mode 100644 src/icon/type.ts diff --git a/package.json b/package.json index fd2b7348b..6c4a0c878 100644 --- a/package.json +++ b/package.json @@ -86,7 +86,7 @@ "@vueuse/core": "^8.2.5", "dayjs": "^1.10.7", "lodash": "^4.17.21", - "tdesign-icons-vue-next": "^0.1.8", + "tdesign-icons-vue-next": "^0.1.11", "validator": "^13.5.1" }, "peerDependencies": { diff --git a/src/_common b/src/_common index ba6c01c0d..f2fb14581 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit ba6c01c0d05fd710b4c566caaae2b613ff34edf0 +Subproject commit f2fb145814c90ae98ca4459c833edc2c228cbbfa diff --git a/src/components.ts b/src/components.ts index 152e1f8c3..29b216d54 100644 --- a/src/components.ts +++ b/src/components.ts @@ -52,3 +52,4 @@ export { default as Footer } from './footer'; export { default as Empty } from './empty'; export { default as Link } from './link'; export { Form, FormItem } from './form'; +export { default as Icon } from './icon'; diff --git a/src/icon/demos/enhanced.vue b/src/icon/demos/enhanced.vue index 10d3a4c83..af1b371a5 100644 --- a/src/icon/demos/enhanced.vue +++ b/src/icon/demos/enhanced.vue @@ -1,25 +1,23 @@ diff --git a/src/icon/demos/mobile.vue b/src/icon/demos/mobile.vue new file mode 100644 index 000000000..d33e648a3 --- /dev/null +++ b/src/icon/demos/mobile.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/src/icon/icon-svg-props.ts b/src/icon/icon-svg-props.ts new file mode 100644 index 000000000..139fb8dc2 --- /dev/null +++ b/src/icon/icon-svg-props.ts @@ -0,0 +1,33 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdIconSVGProps } from '../icon/type'; +import { PropType } from 'vue'; + +export default { + /** 是否加载组件库内置图标 */ + loadDefaultIcons: { + type: Boolean, + default: true, + }, + /** 图标名称 */ + name: { + type: String, + default: '', + required: true, + }, + /** 图标尺寸，支持 'small', 'medium', 'large'，'35px', '3em' 等 */ + size: { + type: String, + default: undefined, + }, + /** 图标地址，地址内容参考[组件内部默认加载图标](https://tdesign.gtimg.com/icon/web/index.js) */ + url: { + type: [String, Array] as PropType, + }, + /** 点击时触发 */ + onClick: Function as PropType, +}; diff --git a/src/icon/icon.en-US.md b/src/icon/icon.en-US.md new file mode 100644 index 000000000..337c91789 --- /dev/null +++ b/src/icon/icon.en-US.md @@ -0,0 +1,37 @@ +:: BASE_DOC :: + +## API +### IconSVG Props + +name | type | default | description | required +-- | -- | -- | -- | -- +loadDefaultIcons | Boolean | true | \- | N +name | String | - | required | Y +size | String | undefined | \- | N +style | String | - | html attribute | N +url | String / Array | - | Typescript：`string \| Array` | N +onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N + +### IconSVG Events + +name | params | description +-- | -- | -- +click | `(context: { e: MouseEvent })` | \- + +### Iconfont Props + +name | type | default | description | required +-- | -- | -- | -- | -- +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` | N +onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N + +### Iconfont Events + +name | params | description +-- | -- | -- +click | `(context: { e: MouseEvent })` | \- diff --git a/src/icon/icon.md b/src/icon/icon.md index 6fc7a37b7..36d49be88 100644 --- a/src/icon/icon.md +++ b/src/icon/icon.md @@ -2,7 +2,7 @@ ### 安装独立 Icon 包 -图标相对其他基础组件较为独立，所以作为一个独立的 `npm` 包做发布管理。如果项目中直接使用，请安装 `tdesign-icons-vue-next`。 +图标相对其他基础组件较为独立，所以作为一个独立的 `npm` 包做发布管理。如果项目中直接使用，请安装 `tdesign-icons-vue-next`。 同时 `tdesign-mobile-vue` 也内置了 `icon`, 支持直接通过 `t-icon` 来使用。 ### SVG 全量引入 @@ -10,15 +10,13 @@ 图标颜色使用 CSS 控制，如：style="color: red"，或者 style="fill: red"。 点击右侧导航「全部图标」即可查看组件库全部图标。 -::: demo demos/base -::: +{{ base }} ### SVG 按需引入 图标可以按需引入单个 SVG 图标。组件开发内部使用到 Icon 时，均按需引入 SVG 图标。 -::: demo demos/single -::: +{{ single }} ### SVG 高级用法 @@ -28,15 +26,13 @@ 组件会引入默认的 SVG 图标，如果希望禁止组件加载默认的 SVG 图标，将 `loadDefaultIcons` 置为 false 即可。 -::: demo demos/enhanced -::: +{{ enhanced }} ### iconfont 图标 -使用 Iconfont 图标需要单独引入 Iconfont 图标组件 +使用 Iconfont 图标需要单独引入 Iconfont 图标组件。 -::: demo demos/iconfont -::: +{{ iconfont }} ### iconfont 高级用法 @@ -46,9 +42,59 @@ 组件会引入默认的 iconfont 图标，如果希望禁止组件加载默认的 iconfont 图标，将 `loadDefaultIcons` 置为 false 即可。 -::: demo demos/iconfont-enhanced -::: +{{ iconfont-enhanced }} + + +### FAQ + +#### 如何获取全部图标的名称列表？ + +可以通过`import { manifest } from 'tdesign-icons-vue-next'` 获取全部图标的名称列表。 + +### t-icon、iconfont和icon使用时都会发起网络请求，我的项目是无网络场景，如何使用？ + +首先明确`t-icon`、`iconfont`和`icon`三者的关系。如上面的示例所示，`iconfont`和`icon`都是从icon独立包中引入，而`t-icon`只是为了方便用户习惯，对`icon`的一个简单封装。 + +`iconfont`需要加载图标的字体资源，而`icon`需要加载图标的svgsprite资源，这些资源都是相对来说比较大的，所以没有直接放在包里（当然不排除未来会做改动），所以会发起网络请求。 + +所以如果你的项目是无网络场景，请使用按需加载的图标，如``请改为``。 ### 全部图标 + +## API +### IconSVG Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +loadDefaultIcons | Boolean | true | 是否加载组件库内置图标 | N +name | String | - | 必需。图标名称 | Y +size | String | undefined | 图标尺寸，支持 'small', 'medium', 'large'，'35px', '3em' 等 | N +style | String | - | HTML 原生属性。可用于设置图标颜色，如：style=\"color: red\" | N +url | String / Array | - | 图标地址，地址内容参考[组件内部默认加载图标](https://tdesign.gtimg.com/icon/web/index.js)。TS 类型：`string \| Array` | N +onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击时触发 | N + +### IconSVG Events + +名称 | 参数 | 描述 +-- | -- | -- +click | `(context: { e: MouseEvent })` | 点击时触发 + +### Iconfont Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +loadDefaultIcons | Boolean | true | 是否加载组件库内置图标 | N +name | String | - | 必需。图标名称 | Y +size | String | undefined | 图标尺寸，支持 'small', 'medium', 'large'，'35px', '3em' 等 | N +style | String | - | HTML 原生属性。可用于设置图标颜色，如：style=\"color: red\" | N +tag | String | i | 图标 DOM 元素，可选值：i/span/div/... | N +url | String / Array | - | 图标地址，地址内容参考[组件内部默认加载图标](https://tdesign.gtimg.com/icon/web/index.css)。也可以在 index.html 中引入图标地址。TS 类型：`string \| Array` | N +onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击时触发 | N + +### Iconfont Events + +名称 | 参数 | 描述 +-- | -- | -- +click | `(context: { e: MouseEvent })` | 点击时触发 diff --git a/src/icon/iconfont-props.ts b/src/icon/iconfont-props.ts new file mode 100644 index 000000000..523553b09 --- /dev/null +++ b/src/icon/iconfont-props.ts @@ -0,0 +1,38 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdIconfontProps } from '../icon/type'; +import { PropType } from 'vue'; + +export default { + /** 是否加载组件库内置图标 */ + loadDefaultIcons: { + type: Boolean, + default: true, + }, + /** 图标名称 */ + name: { + type: String, + default: '', + required: true, + }, + /** 图标尺寸，支持 'small', 'medium', 'large'，'35px', '3em' 等 */ + size: { + type: String, + default: undefined, + }, + /** 图标 DOM 元素，可选值：i/span/div/... */ + tag: { + type: String, + default: 'i', + }, + /** 图标地址，地址内容参考[组件内部默认加载图标](https://tdesign.gtimg.com/icon/web/index.css)。也可以在 index.html 中引入图标地址 */ + url: { + type: [String, Array] as PropType, + }, + /** 点击时触发 */ + onClick: Function as PropType, +}; diff --git a/src/icon/index.ts b/src/icon/index.ts new file mode 100644 index 000000000..e440015be --- /dev/null +++ b/src/icon/index.ts @@ -0,0 +1,5 @@ +import { Icon as _Icon } from 'tdesign-icons-vue-next'; +import { withInstall, WithInstallType } from '../shared'; + +export const Icon: WithInstallType = withInstall(_Icon, 'TIcon'); +export default Icon; diff --git a/src/icon/type.ts b/src/icon/type.ts new file mode 100644 index 000000000..cb95da2e8 --- /dev/null +++ b/src/icon/type.ts @@ -0,0 +1,60 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +export interface TdIconfontProps { + /** + * 是否加载组件库内置图标 + * @default true + */ + loadDefaultIcons?: boolean; + /** + * 图标名称 + * @default '' + */ + name: string; + /** + * 图标尺寸，支持 'small', 'medium', 'large'，'35px', '3em' 等 + */ + size?: string; + /** + * 图标 DOM 元素，可选值：i/span/div/... + * @default i + */ + tag?: string; + /** + * 图标地址，地址内容参考[组件内部默认加载图标](https://tdesign.gtimg.com/icon/web/index.css)。也可以在 index.html 中引入图标地址 + */ + url?: string | Array; + /** + * 点击时触发 + */ + onClick?: (context: { e: MouseEvent }) => void; +} + +export interface TdIconSVGProps { + /** + * 是否加载组件库内置图标 + * @default true + */ + loadDefaultIcons?: boolean; + /** + * 图标名称 + * @default '' + */ + name: string; + /** + * 图标尺寸，支持 'small', 'medium', 'large'，'35px', '3em' 等 + */ + size?: string; + /** + * 图标地址，地址内容参考[组件内部默认加载图标](https://tdesign.gtimg.com/icon/web/index.js) + */ + url?: string | Array; + /** + * 点击时触发 + */ + onClick?: (context: { e: MouseEvent }) => void; +} diff --git a/src/shared/component.ts b/src/shared/component.ts index d5f4a339c..e22483b76 100644 --- a/src/shared/component.ts +++ b/src/shared/component.ts @@ -1,12 +1,12 @@ import { App, Plugin, getCurrentInstance } from 'vue'; export type WithInstallType = T & Plugin; -export const withInstall = (comp: T): T & Plugin => { +export const withInstall = (comp: T, alias?: string): T & Plugin => { const c = comp as any; c.install = (app: App, name?: string) => { const defaultName = c.name; - app.component(name || defaultName, comp); + app.component(alias || name || defaultName, comp); }; return c as T & Plugin;