blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-21 22:09:16 +08:00
Code Issues Projects Releases Wiki Activity

docs(Icon): remove legacy local icon usage (#8655)

Browse Source
This commit is contained in:
neverland 2021-05-03 16:56:00 +08:00 committed by GitHub
parent a126f1c6e4
commit 02f0de8351
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/icon/README.md
View File

@ -24,6 +24,13 @@ Use `name` prop to set icon name or icon URL.
```html
<van-icon name="chat-o" />
```
### Using URL
You can directly passing an image URL to the `name` props.
```html
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
```
@ -53,19 +60,12 @@ Use `color` prop to set icon color.
Use `size` prop to set icon size.
```html
<van-icon name="chat-o" size="40" /> <van-icon name="chat-o" size="3rem" />
<!-- Using px unit by default -->
<van-icon name="chat-o" size="40" />
<!-- Using rem unit -->
<van-icon name="chat-o" size="3rem" />
```
### 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

30
src/icon/README.zh-CN.md
View File

@ -20,10 +20,17 @@ app.use(Icon);
### 基础用法
`Icon` 的 `name` 属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例。
通过 `name` 属性来指定需要使用的图标，Vant 内置了一套图标库（见右侧示例），可以直接传入对应的名称来使用。
```html
<van-icon name="chat-o" />
```
### 使用图片 URL
你也可以直接在 `name` 属性中传入一个图片 URL 来作为图标。
```html
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
```
@ -39,7 +46,7 @@ app.use(Icon);
### 图标颜色
`Icon` 的 `color` 属性用来设置图标的颜色。
通过 `color` 属性来设置图标的颜色。
```html
<van-icon name="cart-o" color="#1989fa" />
@ -48,22 +55,15 @@ app.use(Icon);
### 图标大小
`Icon` 的 `size` 属性用来设置图标的尺寸大小，默认单位为 `px`。
通过 `size` 属性来设置图标的尺寸大小，可以指定任意 CSS 单位。
```html
<van-icon name="chat-o" size="40" /> <van-icon name="chat-o" size="3rem" />
<!-- 不指定单位，默认使用 px -->
<van-icon name="chat-o" size="40" />
<!-- 指定使用 rem 单位 -->
<van-icon name="chat-o" size="3rem" />
```
### 使用本地字体文件
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