alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[improvement] rename packages dir to src (#3659)

Browse Source
This commit is contained in:
neverland
2019-06-27 11:25:57 +08:00
committed by GitHub
parent 8489918dca
commit 75c79b7044
619 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/icon/demo/index.vue
+110
View File
@@ -0,0 +1,110 @@
<template>
<demo-section>
<van-tabs
v-model="tab"
sticky
:color="BLUE"
>
<van-tab title="基础图标">
<van-col
v-for="icon in icons.basic"
:key="icon"
span="6"
>
<van-icon :name="icon" />
<span>{{ icon }}</span>
</van-col>
</van-tab>
<van-tab title="线框风格">
<van-col
v-for="icon in icons.outline"
:key="icon"
span="6"
>
<van-icon :name="icon" />
<span>{{ icon }}</span>
</van-col>
</van-tab>
<van-tab title="实底风格">
<van-col
v-for="icon in icons.filled"
:key="icon"
span="6"
>
<van-icon :name="icon" />
<span>{{ icon }}</span>
</van-col>
</van-tab>
</van-tabs>
</demo-section>
</template>
<script>
import icons from '@vant/icons';
import { BLUE } from '../../utils/color';
export default {
i18n: {
'zh-CN': {
title: '图标列表',
info: '显示徽标',
basic: '基础图标'
},
'en-US': {
title: 'Icon List',
info: 'Show Info',
basic: 'Basic Icon'
}
},
data() {
this.BLUE = BLUE;
this.icons = icons;
return {
tab: 0
};
}
};
</script>
<style lang="less">
@import '../../style/var';
.demo-icon {
font-size: 0;
&-list {
box-sizing: border-box;
min-height: calc(100vh - 65px);
padding-top: 10px;
}
.van-col {
display: inline-block;
float: none;
height: 100px;
text-align: center;
vertical-align: middle;
span {
display: block;
padding: 0 5px;
color: @gray-darker;
font-size: 12px;
line-height: 18px;
}
}
.van-icon {
margin: 20px 0 10px;
color: @text-color;
font-size: 32px;
}
.van-tab__pane {
width: auto;
margin: 20px;
background-color: #fff;
}
}
</style>
src/icon/en-US.md
+75
View File
@@ -0,0 +1,75 @@
# Icon
### Install
``` javascript
import { Icon } from 'vant';
Vue.use(Icon);
```
## Usage
### Basic Usage
Use `name` prop to set icon name or icon URL
```html
<van-icon name="close" />
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
```
### Show Info
```html
<van-icon name="chat" info="9" />
<van-icon name="chat" info="99+" />
```
### 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';
```
### Add custom iconfont
```css
@font-face {
font-family: 'my-icon';
src: url('./my-icon.ttf') format('truetype');
}
.my-icon {
font-family: 'my-icon';
}
.my-icon-extra::before {
content: '\e626';
}
```
```html
<van-icon class-prefix="my-icon" name="extra" />
```
## API
### Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| name | Icon name or URL | `String` | `''` |
| info | Info message | `String | Number` | `''` |
| color | Icon color | `String` | `inherit` |
| size | Icon size | `String | Number` | `inherit` |
| class-prefix | ClassName prefix | `String` | `van-icon` |
| tag | HTML Tag | `String` | `i` |
### Events
| Event | Description | Arguments |
|------|------|------|
| click | Triggered when click icon | - |
src/icon/index.less
+9
View File
@@ -0,0 +1,9 @@
@import '../style/var';
@import '@vant/icons/src/index.less';
.van-icon {
&__image {
width: 1em;
height: 1em;
}
}
src/icon/index.tsx
+68
View File
@@ -0,0 +1,68 @@
import { createNamespace, suffixPx } from '../utils';
import { inherit } from '../utils/functional';
import Info from '../info';
import Image from '../image';
// Types
import { CreateElement, RenderContext } from 'vue/types';
import { DefaultSlots } from '../utils/types';
export type IconProps = {
tag: keyof HTMLElementTagNameMap | string;
name: string;
size?: string | number;
color?: string;
info?: string | number;
classPrefix: string;
};
export type IconEvents = {
onClick?(event: Event): void;
};
const [createComponent, bem] = createNamespace('icon');
function isImage(name?: string): boolean {
return name ? name.indexOf('/') !== -1 : false;
}
function Icon(
h: CreateElement,
props: IconProps,
slots: DefaultSlots,
ctx: RenderContext<IconProps>
) {
const imageIcon = isImage(props.name);
return (
<props.tag
class={[props.classPrefix, imageIcon ? '' : `${props.classPrefix}-${props.name}`]}
style={{
color: props.color,
fontSize: suffixPx(props.size)
}}
{...inherit(ctx, true)}
>
{slots.default && slots.default()}
{imageIcon && <Image class={bem('image')} src={props.name} />}
<Info info={props.info} />
</props.tag>
);
}
Icon.props = {
name: String,
size: [String, Number],
color: String,
info: [String, Number],
tag: {
type: String,
default: 'i'
},
classPrefix: {
type: String,
default: bem()
}
};
export default createComponent<IconProps, IconEvents>(Icon);
src/icon/local.less
+1
View File
@@ -0,0 +1 @@
@import '@vant/icons/src/encode.less';
src/icon/test/__snapshots__/index.spec.js.snap
+42
View File
@@ -0,0 +1,42 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`render icon default slot 1`] = `
<i class="van-icon van-icon-success">Default slot
<!----></i>
`;
exports[`render icon with builtin icon name 1`] = `
<i class="van-icon van-icon-success">
<!----></i>
`;
exports[`render icon with local image 1`] = `
<i class="van-icon">
<div class="van-image van-icon__image"><img src="/assets/icon.jpg" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
<!---->
</i>
`;
exports[`render icon with url name 1`] = `
<i class="van-icon">
<div class="van-image van-icon__image"><img src="https://img.yzcdn.com/icon.jpg" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
<!---->
</i>
`;
exports[`size without unit 1`] = `
<i class="van-icon van-icon-undefined" style="font-size: 20px;">
<!----></i>
`;
exports[`tag prop 1`] = `
<div class="van-icon van-icon-undefined">
<!---->
</div>
`;
src/icon/test/index.spec.js
+56
View File
@@ -0,0 +1,56 @@
import Icon from '..';
import { mount } from '../../../test/utils';
test('render icon with builtin icon name', () => {
const wrapper = mount(Icon, {
propsData: {
name: 'success'
}
});
expect(wrapper).toMatchSnapshot();
});
test('render icon with url name', () => {
const wrapper = mount(Icon, {
propsData: {
name: 'https://img.yzcdn.com/icon.jpg'
}
});
expect(wrapper).toMatchSnapshot();
});
test('render icon with local image', () => {
const wrapper = mount(Icon, {
propsData: {
name: '/assets/icon.jpg'
}
});
expect(wrapper).toMatchSnapshot();
});
test('render icon default slot', () => {
const wrapper = mount({
render(h) {
return h(Icon, { props: { name: 'success' } }, ['Default slot']);
}
});
expect(wrapper).toMatchSnapshot();
});
test('tag prop', () => {
const wrapper = mount(Icon, {
propsData: {
tag: 'div'
}
});
expect(wrapper).toMatchSnapshot();
});
test('size without unit', () => {
const wrapper = mount(Icon, {
propsData: {
size: 20
}
});
expect(wrapper).toMatchSnapshot();
});
src/icon/zh-CN.md
+77
View File
@@ -0,0 +1,77 @@
# Icon 图标
### 引入
``` javascript
import { Icon } from 'vant';
Vue.use(Icon);
```
## 代码演示
### 基础用法
`Icon`的`name`属性支持传入图标名称或图片链接
```html
<van-icon name="close" />
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
```
### 显示徽标
```html
<van-icon name="chat" info="9" />
<van-icon name="chat" info="99+" />
```
### 使用本地字体文件
Icon 组件默认引用 `yzcdn.cn` 域名下的字体文件，如果想要使用本地字体文件，请引入下面的 css 文件
```js
import 'vant/lib/icon/local.css';
```
### 自定义图标
如果需要在现有 Icon 的基础上使用更多图标，可以引入你需要的 iconfont 对应的 ttf 文件和样式，之后就可以在 Icon 组件中直接使用
```css
@font-face {
font-family: 'my-icon';
src: url('./my-icon.ttf') format('truetype');
}
.my-icon {
font-family: 'my-icon';
}
.my-icon-extra::before {
content: '\e626';
}
```
```html
<van-icon class-prefix="my-icon" name="extra" />
```
## API
### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| name | 图标名称或图片链接 | `String` | - | - |
| info | 图标右上角文字提示 | `String | Number` | - | - |
| color | 图标颜色 | `String` | `inherit` | 1.1.3 |
| size | 图标大小，如 `20px` `2em`，默认单位为`px` | `String | Number` | `inherit` | 2.0.0 |
| class-prefix | 类名前缀 | `String` | `van-icon` | 1.2.1 |
| tag | HTML 标签 | `String` | `i` | 1.6.10 |
### Events
| 事件名 | 说明 | 回调参数 |
|------|------|------|
| click | 点击图标时触发 | - |