mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
refactor: icon component
This commit is contained in:
chenjiahan
parent
425ffb87eb
commit
3bc6495b04
99
src-next/icon/README.md
Normal file
99
src-next/icon/README.md
Normal file
@ -0,0 +1,99 @@
|
||||
# Icon
|
||||
|
||||
### Install
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Icon } from 'vant';
|
||||
|
||||
Vue.use(Icon);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
Use `name` prop to set icon name or icon URL
|
||||
|
||||
```html
|
||||
<van-icon name="chat-o" />
|
||||
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
|
||||
```
|
||||
|
||||
### Show Badge
|
||||
|
||||
Use `dot` prop, a small red dot will be displayed in the upper right corner of the icon.
|
||||
|
||||
Use `badge` prop, the badge will be displayed in the upper right corner of the icon.
|
||||
|
||||
```html
|
||||
<van-icon name="chat-o" dot />
|
||||
<van-icon name="chat-o" badge="9" />
|
||||
<van-icon name="chat-o" badge="99+" />
|
||||
```
|
||||
|
||||
### Icon Color
|
||||
|
||||
Use `color` prop to set icon color
|
||||
|
||||
```html
|
||||
<van-icon name="chat-o" color="#1989fa" />
|
||||
<van-icon name="chat-o" color="#07c160" />
|
||||
```
|
||||
|
||||
### Icon Size
|
||||
|
||||
Use `size` prop to set icon size
|
||||
|
||||
```html
|
||||
<van-icon name="chat-o" size="40" /> <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';
|
||||
```
|
||||
|
||||
### 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_ | `''` |
|
||||
| dot `v2.2.1` | Whether to show red dot | _boolean_ | `false` |
|
||||
| badge `v2.5.6` | 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` |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
| ----- | ------------------------- | -------------- |
|
||||
| click | Triggered when click icon | _event: Event_ |
|
||||
106
src-next/icon/README.zh-CN.md
Normal file
106
src-next/icon/README.zh-CN.md
Normal file
@ -0,0 +1,106 @@
|
||||
# Icon 图标
|
||||
|
||||
### 介绍
|
||||
|
||||
基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过`icon`属性引用
|
||||
|
||||
### 引入
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Icon } from 'vant';
|
||||
|
||||
Vue.use(Icon);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
`Icon`的`name`属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例
|
||||
|
||||
```html
|
||||
<van-icon name="chat-o" />
|
||||
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
|
||||
```
|
||||
|
||||
### 徽标提示
|
||||
|
||||
设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
|
||||
|
||||
```html
|
||||
<van-icon name="chat-o" dot />
|
||||
<van-icon name="chat-o" badge="9" />
|
||||
<van-icon name="chat-o" badge="99+" />
|
||||
```
|
||||
|
||||
### 图标颜色
|
||||
|
||||
`Icon`的`color`属性用来设置图标的颜色
|
||||
|
||||
```html
|
||||
<van-icon name="chat-o" color="#1989fa" />
|
||||
<van-icon name="chat-o" color="#07c160" />
|
||||
```
|
||||
|
||||
### 图标大小
|
||||
|
||||
`Icon`的`size`属性用来设置图标的尺寸大小，默认单位为`px`
|
||||
|
||||
```html
|
||||
<van-icon name="chat-o" size="40" /> <van-icon name="chat-o" size="3rem" />
|
||||
```
|
||||
|
||||
### 使用本地字体文件
|
||||
|
||||
Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载。如果需要在项目中使用本地字体文件，请引入下面的 CSS 文件，并在项目中配置`url-loader`
|
||||
|
||||
```js
|
||||
import 'vant/lib/icon/local.css';
|
||||
```
|
||||
|
||||
### 自定义图标
|
||||
|
||||
如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 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
|
||||
<!-- 通过 class-prefix 指定类名为 my-icon -->
|
||||
<van-icon class-prefix="my-icon" name="extra" />
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 图标名称或图片链接 | _string_ | - |
|
||||
| dot `v2.2.1` | 是否显示图标右上角小红点 | _boolean_ | `false` |
|
||||
| badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
|
||||
| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
|
||||
| color | 图标颜色 | _string_ | `inherit` |
|
||||
| size | 图标大小，如 `20px` `2em`，默认单位为`px` | _number \| string_ | `inherit` |
|
||||
| class-prefix | 类名前缀，用于使用自定义图标 | _string_ | `van-icon` |
|
||||
| tag | HTML 标签 | _string_ | `i` |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | -------------- | -------------- |
|
||||
| click | 点击图标时触发 | _event: Event_ |
|
||||
229
src-next/icon/demo/index.vue
Normal file
229
src-next/icon/demo/index.vue
Normal file
@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<van-tabs v-model="tab" sticky :color="BLUE">
|
||||
<van-tab :title="t('demo')">
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-col span="6" @click="copy(demoIcon)">
|
||||
<van-icon :name="demoIcon" />
|
||||
</van-col>
|
||||
<van-col span="6" @click="copy(demoImage)">
|
||||
<van-icon :name="demoImage" />
|
||||
</van-col>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('badge')">
|
||||
<van-col span="6" @click="copy(demoIcon, { dot: true })">
|
||||
<van-icon :name="demoIcon" dot />
|
||||
</van-col>
|
||||
<van-col span="6" @click="copy(demoIcon, { badge: '9' })">
|
||||
<van-icon :name="demoIcon" badge="9" />
|
||||
</van-col>
|
||||
<van-col span="6" @click="copy(demoIcon, { badge: '99+' })">
|
||||
<van-icon :name="demoIcon" badge="99+" />
|
||||
</van-col>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('color')">
|
||||
<van-col span="6" @click="copy(demoIcon, { color: BLUE })">
|
||||
<van-icon :name="demoIcon" :color="BLUE" />
|
||||
</van-col>
|
||||
<van-col span="6" @click="copy(demoIcon, { color: GREEN })">
|
||||
<van-icon :name="demoIcon" :color="GREEN" />
|
||||
</van-col>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('size')">
|
||||
<van-col span="6" @click="copy(demoIcon, { size: '40' })">
|
||||
<van-icon :name="demoIcon" size="40" />
|
||||
</van-col>
|
||||
<van-col span="6" @click="copy(demoIcon, { size: '3rem' })">
|
||||
<van-icon :name="demoIcon" size="3rem" />
|
||||
</van-col>
|
||||
</demo-block>
|
||||
</van-tab>
|
||||
|
||||
<van-tab :title="t('basic')">
|
||||
<van-col
|
||||
v-for="icon in icons.basic"
|
||||
:key="icon"
|
||||
span="6"
|
||||
@click="copy(icon)"
|
||||
>
|
||||
<van-icon :name="icon" />
|
||||
<span>{{ icon }}</span>
|
||||
</van-col>
|
||||
</van-tab>
|
||||
|
||||
<van-tab :title="t('outline')">
|
||||
<van-col
|
||||
v-for="icon in icons.outline"
|
||||
:key="icon"
|
||||
span="6"
|
||||
@click="copy(icon)"
|
||||
>
|
||||
<van-icon :name="icon" />
|
||||
<span>{{ icon }}</span>
|
||||
</van-col>
|
||||
</van-tab>
|
||||
|
||||
<van-tab :title="t('filled')">
|
||||
<van-col
|
||||
v-for="icon in icons.filled"
|
||||
:key="icon"
|
||||
span="6"
|
||||
@click="copy(icon)"
|
||||
>
|
||||
<van-icon :name="icon" />
|
||||
<span>{{ icon }}</span>
|
||||
</van-col>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icons from '@vant/icons';
|
||||
import { BLUE, GREEN } from '../../../src/utils/constant';
|
||||
|
||||
// from https://30secondsofcode.org
|
||||
function copyToClipboard(str) {
|
||||
const el = document.createElement('textarea');
|
||||
el.value = str;
|
||||
el.setAttribute('readonly', '');
|
||||
el.style.position = 'absolute';
|
||||
el.style.left = '-9999px';
|
||||
document.body.appendChild(el);
|
||||
|
||||
const selected =
|
||||
document.getSelection().rangeCount > 0
|
||||
? document.getSelection().getRangeAt(0)
|
||||
: false;
|
||||
|
||||
el.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(el);
|
||||
|
||||
if (selected) {
|
||||
document.getSelection().removeAllRanges();
|
||||
document.getSelection().addRange(selected);
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title: '图标列表',
|
||||
badge: '徽标提示',
|
||||
basic: '基础图标',
|
||||
copied: '复制成功',
|
||||
outline: '线框风格',
|
||||
filled: '实底风格',
|
||||
demo: '用法示例',
|
||||
color: '图标颜色',
|
||||
size: '图标大小',
|
||||
},
|
||||
'en-US': {
|
||||
title: 'Icon List',
|
||||
badge: 'Show Badge',
|
||||
basic: 'Basic',
|
||||
copied: 'Copied',
|
||||
outline: 'Outline',
|
||||
filled: 'Filled',
|
||||
demo: 'Demo',
|
||||
color: 'Icon Color',
|
||||
size: 'Icon Size',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
this.BLUE = BLUE;
|
||||
this.GREEN = GREEN;
|
||||
this.icons = icons;
|
||||
return {
|
||||
tab: 0,
|
||||
demoIcon: 'chat-o',
|
||||
demoImage: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
copy(icon, option = {}) {
|
||||
let tag = `<van-icon name="${icon}"`;
|
||||
if ('dot' in option) {
|
||||
tag = `${tag} ${option.dot ? 'dot' : ''}`;
|
||||
}
|
||||
if ('badge' in option) {
|
||||
tag = `${tag} badge="${option.badge}"`;
|
||||
}
|
||||
if ('color' in option) {
|
||||
tag = `${tag} color="${option.color}"`;
|
||||
}
|
||||
if ('size' in option) {
|
||||
tag = `${tag} size="${option.size}"`;
|
||||
}
|
||||
tag = `${tag} />`;
|
||||
copyToClipboard(tag);
|
||||
|
||||
this.$notify({
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
className: 'demo-icon-notify',
|
||||
message: `${this.t('copied')}：${tag}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</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;
|
||||
}
|
||||
|
||||
&-notify {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.van-col {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
height: 36px;
|
||||
margin: -4px 0 4px;
|
||||
padding: 0 5px;
|
||||
color: @gray-7;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: @active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
margin: 16px 0 16px;
|
||||
color: @text-color;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.van-tab__pane {
|
||||
width: auto;
|
||||
margin: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
55
src-next/icon/index.js
Normal file
55
src-next/icon/index.js
Normal file
@ -0,0 +1,55 @@
|
||||
// Utils
|
||||
import { addUnit, isDef } from '../../src/utils';
|
||||
import { createNamespace } from '../utils/create';
|
||||
|
||||
// Components
|
||||
import Info from '../info';
|
||||
|
||||
const [createComponent, bem] = createNamespace('icon');
|
||||
|
||||
function isImage(name) {
|
||||
return name ? name.indexOf('/') !== -1 : false;
|
||||
}
|
||||
|
||||
export default createComponent({
|
||||
props: {
|
||||
dot: Boolean,
|
||||
name: String,
|
||||
size: [Number, String],
|
||||
badge: [Number, String],
|
||||
color: String,
|
||||
tag: {
|
||||
type: String,
|
||||
default: 'i',
|
||||
},
|
||||
classPrefix: {
|
||||
type: String,
|
||||
default: bem(),
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const { name } = this;
|
||||
const imageIcon = isImage(name);
|
||||
|
||||
return (
|
||||
<this.tag
|
||||
class={[
|
||||
this.classPrefix,
|
||||
imageIcon ? '' : `${this.classPrefix}-${name}`,
|
||||
]}
|
||||
style={{
|
||||
color: this.color,
|
||||
fontSize: addUnit(this.size),
|
||||
}}
|
||||
>
|
||||
{/* {slots.default && slots.default()} */}
|
||||
{imageIcon && <img class={bem('image')} src={name} />}
|
||||
<Info
|
||||
dot={this.dot}
|
||||
info={this.badge}
|
||||
/>
|
||||
</this.tag>
|
||||
);
|
||||
}
|
||||
});
|
||||
10
src-next/icon/index.less
Normal file
10
src-next/icon/index.less
Normal file
@ -0,0 +1,10 @@
|
||||
@import '../style/var';
|
||||
@import '~@vant/icons/src/index.less';
|
||||
|
||||
.van-icon {
|
||||
&__image {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
1
src-next/icon/local.less
Normal file
1
src-next/icon/local.less
Normal file
@ -0,0 +1 @@
|
||||
@import '~@vant/icons/src/encode.less';
|
||||
38
src-next/icon/test/__snapshots__/index.spec.js.snap
Normal file
38
src-next/icon/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,38 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`dot prop 1`] = `
|
||||
<i class="van-icon van-icon-undefined">
|
||||
<div class="van-info van-info--dot"></div>
|
||||
</i>
|
||||
`;
|
||||
|
||||
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"><img src="/assets/icon.jpg" class="van-icon__image">
|
||||
<!----></i>
|
||||
`;
|
||||
|
||||
exports[`render icon with url name 1`] = `
|
||||
<i class="van-icon"><img src="https://img.yzcdn.com/icon.jpg" class="van-icon__image">
|
||||
<!----></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>
|
||||
`;
|
||||
65
src-next/icon/test/index.spec.js
Normal file
65
src-next/icon/test/index.spec.js
Normal file
@ -0,0 +1,65 @@
|
||||
import Icon from '..';
|
||||
import { mount } from '../../../test';
|
||||
|
||||
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('dot prop', () => {
|
||||
const wrapper = mount(Icon, {
|
||||
propsData: {
|
||||
dot: true,
|
||||
},
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('size without unit', () => {
|
||||
const wrapper = mount(Icon, {
|
||||
propsData: {
|
||||
size: 20,
|
||||
},
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
@ -86,10 +86,10 @@ module.exports = {
|
||||
// path: 'cell',
|
||||
// title: 'Cell 单元格',
|
||||
// },
|
||||
// {
|
||||
// path: 'icon',
|
||||
// title: 'Icon 图标',
|
||||
// },
|
||||
{
|
||||
path: 'icon',
|
||||
title: 'Icon 图标',
|
||||
},
|
||||
// {
|
||||
// path: 'image',
|
||||
// title: 'Image 图片',
|
||||
@ -433,10 +433,10 @@ module.exports = {
|
||||
// path: 'cell',
|
||||
// title: 'Cell',
|
||||
// },
|
||||
// {
|
||||
// path: 'icon',
|
||||
// title: 'Icon',
|
||||
// },
|
||||
{
|
||||
path: 'icon',
|
||||
title: 'Icon',
|
||||
},
|
||||
// {
|
||||
// path: 'image',
|
||||
// title: 'Image',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user