index.vue
1.68 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<script>
import MIX_EVENT from '../mixins/event';
export default {
name: 'Icon',
mixins: [MIX_EVENT],
render(createElement) {
if (this.src) {
return createElement('img', { class: 'zui-icon__img', attrs: { src: this.src }, style: this.svgStyleRender });
}
if (this.svg) {
return createElement('svg', { class: 'zui-icon__svg', attrs: { 'aria-hidden': true }, style: this.svgStyleRender }, [
createElement('use', { attrs: { 'xlink:href': `#${this.classPrefix}${this.name}` } }),
]);
}
return createElement('i', { class: { 'zui-icon': true, ...this.classRender }, style: this.styleRender, on: this.bindEvents });
},
props: {
name: {
type: String,
default: '',
},
fontFamily: {
type: String,
default: 'iconfont',
},
classPrefix: {
type: String,
default: 'icon-',
},
size: [Number, String],
unit: {
type: String,
default: 'rem',
},
color: String,
svg: Boolean,
src: String,
},
computed: {
fontSize() {
return Number(this.size);
},
classRender() {
const fontFamily = this.fontFamily || '';
const iconClass = `${this.classPrefix}${this.name}`;
return {
[fontFamily]: true,
[iconClass]: true,
};
},
svgStyleRender() {
return {
height: `${this.fontSize}${this.unit}`,
width: `${this.fontSize}${this.unit}`,
'vertical-align': `${-this.fontSize * 0.14}${this.unit}`,
};
},
styleRender() {
return {
fontSize: `${this.fontSize}${this.unit}`,
color: this.color,
};
},
},
};
</script>
<style lang="scss">
@import './index.scss';
</style>