From 02f0de8351cd3c44b402943fab8aade38366346a Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 3 May 2021 16:56:00 +0800 Subject: [PATCH] docs(Icon): remove legacy local icon usage (#8655) --- src/icon/README.md | 40 ++++++++++++++++++++-------------------- src/icon/README.zh-CN.md | 30 +++++++++++++++--------------- 2 files changed, 35 insertions(+), 35 deletions(-) diff --git a/src/icon/README.md b/src/icon/README.md index bf47e3bb5..8525b224c 100644 --- a/src/icon/README.md +++ b/src/icon/README.md @@ -24,6 +24,13 @@ Use `name` prop to set icon name or icon URL. ```html +``` + +### Using URL + +You can directly passing an image URL to the `name` props. + +```html ``` @@ -53,19 +60,12 @@ Use `color` prop to set icon color. Use `size` prop to set icon size. ```html - + + + + ``` -### Use local font file - -Icon uses font file in `yzcdn.cn` by default，if you want to use the local font file，please import the following css file. - -```js -import 'vant/lib/icon/local.css'; -``` - -> Tips: Starting from version 2.10.13, Vant will use local font files in woff2 format by default - ### Add custom iconfont ```css @@ -91,15 +91,15 @@ import 'vant/lib/icon/local.css'; ### Props -| Attribute | Description | Type | Default | -| ------------ | ----------------------- | ------------------ | ---------- | -| name | Icon name or URL | _string_ | `''` | -| dot | Whether to show red dot | _boolean_ | `false` | -| badge | Content of the badge | _number \| string_ | `''` | -| color | Icon color | _string_ | `inherit` | -| size | Icon size | _number \| string_ | `inherit` | -| class-prefix | ClassName prefix | _string_ | `van-icon` | -| tag | HTML Tag | _string_ | `i` | +| Attribute | Description | Type | Default | +| ------------ | ------------------------ | ------------------ | ---------- | +| name | Icon name or URL | _string_ | `''` | +| dot | Whether to show red dot | _boolean_ | `false` | +| badge | Content of the badge | _number \| string_ | `''` | +| color | Icon color | _string_ | `inherit` | +| size | Icon size | _number \| string_ | `inherit` | +| class-prefix | ClassName prefix | _string_ | `van-icon` | +| tag | HTML Tag of root element | _string_ | `i` | ### Events diff --git a/src/icon/README.zh-CN.md b/src/icon/README.zh-CN.md index a9e65d848..c7ba5f406 100644 --- a/src/icon/README.zh-CN.md +++ b/src/icon/README.zh-CN.md @@ -20,10 +20,17 @@ app.use(Icon); ### 基础用法 -`Icon` 的 `name` 属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例。 +通过 `name` 属性来指定需要使用的图标，Vant 内置了一套图标库（见右侧示例），可以直接传入对应的名称来使用。 ```html +``` + +### 使用图片 URL + +你也可以直接在 `name` 属性中传入一个图片 URL 来作为图标。 + +```html ``` @@ -39,7 +46,7 @@ app.use(Icon); ### 图标颜色 -`Icon` 的 `color` 属性用来设置图标的颜色。 +通过 `color` 属性来设置图标的颜色。 ```html @@ -48,22 +55,15 @@ app.use(Icon); ### 图标大小 -`Icon` 的 `size` 属性用来设置图标的尺寸大小，默认单位为 `px`。 +通过 `size` 属性来设置图标的尺寸大小，可以指定任意 CSS 单位。 ```html - + + + + ``` -### 使用本地字体文件 - -Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载。如果需要在项目中使用本地字体文件，请引入下面的 CSS 文件，并在项目中配置 `url-loader`。 - -```js -import 'vant/lib/icon/local.css'; -``` - -> Tips: Vant 默认使用 woff2 格式的本地字体文件，只有在不支持 woff2 字体的低端浏览器上才会加载有赞 CDN 的网络图标。 - ### 自定义图标 如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。 @@ -101,7 +101,7 @@ import 'vant/lib/icon/local.css'; | color | 图标颜色 | _string_ | `inherit` | | size | 图标大小，如 `20px` `2em`，默认单位为 `px` | _number \| string_ | `inherit` | | class-prefix | 类名前缀，用于使用自定义图标 | _string_ | `van-icon` | -| tag | HTML 标签 | _string_ | `i` | +| tag | 根节点对应的 HTML 标签名 | _string_ | `i` | ### Events