blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(Icon): update document (#4312)

Browse Source
This commit is contained in:
neverland 2019-08-31 18:06:54 +08:00 committed by GitHub
parent 995f0250a0
commit c0d84c8afb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/cell/README.zh-CN.md
View File

@ -13,7 +13,7 @@ Vue.use(Cell).use(CellGroup);
### 基础用法
`Cell`可以单独使用，也可以与`CellGroup`搭配使用。`CellGroup`可以为`Cell`提供上下外边框。
`Cell`可以单独使用，也可以与`CellGroup`搭配使用。`CellGroup`可以为`Cell`提供上下外边框
```html
<van-cell-group>

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

@ -1,5 +1,9 @@
# Icon 图标
### 介绍
基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过`icon`属性引用
### 引入
``` javascript
@ -13,7 +17,7 @@ Vue.use(Icon);
### 基础用法
`Icon`的`name`属性支持传入图标名称或图片链接
`Icon`的`name`属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例
```html
<van-icon name="close" />
@ -22,6 +26,8 @@ Vue.use(Icon);
### 显示徽标
设置`info`属性后，会在图标的右上角显示红色的徽标
```html
<van-icon name="chat" info="9" />
<van-icon name="chat" info="99+" />
@ -29,7 +35,7 @@ Vue.use(Icon);
### 使用本地字体文件
Icon 组件默认引用 `yzcdn.cn` 域名下的字体文件，如果想要使用本地字体文件，请引入下面的 css 文件
Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载。如果需要在项目中使用本地字体文件，请引入下面的 CSS 文件，并在项目中配置`url-loader`
```js
import 'vant/lib/icon/local.css';
@ -37,9 +43,10 @@ import 'vant/lib/icon/local.css';
### 自定义图标
如果需要在现有 Icon 的基础上使用更多图标，可以引入你需要的 iconfont 对应的 ttf 文件和样式，之后就可以在 Icon 组件中直接使用
如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用
```css
/* 引入第三方或自定义的字体图标样式 */
@font-face {
font-family: 'my-icon';
src: url('./my-icon.ttf') format('truetype');
@ -55,6 +62,7 @@ import 'vant/lib/icon/local.css';
```
```html
<!-- 通过 class-prefix 指定类名为 my-icon -->
<van-icon class-prefix="my-icon" name="extra" />
```