# 基于Iconfont (opens new window) 封装的开箱即用的SVG实现方案
# 功能描述
将Iconfont 的Symbol使用方式下载到本地,将其中的iconfont.js引入到全局
1
# 目录结构
|-- src
|-- |-- assets
|-- |-- | |-- fonts
|-- |-- | |-- |-- iconfont.js
|-- |-- components
|-- |-- | |-- IconFont
|-- |-- | |-- |-- index.vue
|-- |-- main.js
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 使用
<template>
<IconFont
class="header-icon"
:icon-class="'icon_clear'"
/>s
</template>
1
2
3
4
5
6
2
3
4
5
6
# 实现 (opens new window)
// main.js
import '@/assets/fonts'
1
2
2
// IconFont/index.vue
<template>
<svg
class="icon"
aria-hidden="true"
:class="getClassName"
@click="handleClick()"
>
<filter
id="drop-shadow"
xmlns="http://www.w3.org/2000/svg"
>
<feGaussianBlur
in="SourceAlpha"
stdDeviation="2"
/>
<feOffset
dx="1"
dy="1"
result="offsetblur"
/>
<feComponentTransfer>
<feFuncA
type="linear"
slope="0.2"
/>
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<g
v-bind="getAttrs()"
>
<use :xlink:href="'#' + iconClass" />
</g>
</svg>
</template>
<script>
export default {
name: 'IconFont',
props: {
iconClass: {
type: String,
default: ''
},
shadow: {
type: Boolean,
default: false
},
verticalCenter: {
type: Boolean,
default: false
}
},
computed: {
getClassName () {
const className = []
if (this.verticalCenter) {
className.push('middle')
}
return className
}
},
methods: {
handleClick () {
this.$emit('click')
},
getAttrs () {
const attrs = {}
this.shadow &&
(attrs.filter = 'url(#drop-shadow)')
return attrs
}
}
}
</script>
<style lang="scss" scoped>
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
&.middle {
vertical-align: middle;
}
}
</style>
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
拖拽实现 →