# Icon
图标
案例
import { defineComponent } from "vue";
import { Icon, Typography } from "sl-vue2-template";
import { type IconName } from "sl-vue2-template/lib/cjs/types/Icon/Icon";
import "./styles.scss";
const { Text } = Typography;
export default defineComponent({
data() {
return {
show: false,
};
},
methods: {
onClose() {
this.show = !this.show;
},
},
render() {
return (
<div>
<ul>
{List.map((item) => {
return (
<li>
<Icon name={item} />
<Text>{item}</Text>
</li>
);
})}
</ul>
</div>
);
},
});
const List: IconName[] = [
"Prompt",
"Prompt Filling",
"Refresh",
"Picture",
"Search",
"Share",
"Scanning",
"Security",
"Sign Out",
"Select",
"Select Circle",
"Select Bold",
"Select Filling",
"Select Filling Circle",
"Select Square",
"Stop",
"Setting",
"Survey",
"Task",
"Clock",
"Phone",
"Unlock",
"User",
"Upload",
"Work",
"Warning",
"Zoom In",
"Zoom Out",
"Add Bold",
"Arrow Left Bold",
"Arrow Up Bold",
"Close Bold",
"Arrow Down Bold",
"Minus Bold",
"Arrow Right Bold",
"Arrow Up Filling",
"Arrow Down Filling",
"Arrow Left Filling",
"Arrow Right Filling",
"Caps Lock Filling",
"Comment Filling",
"Clock Filling",
"Close Filling",
"Minus Filling",
"Favorite",
"Favorite Filling",
"Help Filling",
"History Filling",
"Email Filling",
"Edit Filling",
"Notification Filling",
"User Filling",
"Setting Filling",
"Work Filling",
"Warning Filling",
"Folder Filling",
"Map Filling",
"Sort",
"Add",
"Add Circle",
"Arrow Up Circle",
"Arrow Right Circle",
"Delete",
"Arrow Down",
"Arrow Right",
"Browse",
"Browse Close",
"Bottom",
"Back",
"Bad",
"Arrow Double Left",
"Arrow Left Circle",
"Arrow Double Right",
"Caps Lock",
"Camera",
"Chart Bar",
"Attachment",
"Code",
"Close",
"Calendar",
"Comment",
"Complete",
"Customer Service",
"Direction Down",
"Direction Down Circle",
"Direction Right",
"Direction Up",
"Direction Left",
"Download",
"Export",
"Edit",
"Email",
"Close Circle",
"File Delete",
"File Add",
"Fabulous",
"File",
"Folder",
"Good",
"Home",
"History",
"Folder Open",
"Forward",
"Import",
"Link",
"Lock",
"Map",
"Menu",
"Loading",
"Help",
"Minus Circle",
"Modular",
"Notification",
"More",
"Play",
"Print",
"Minus",
"PDF",
];
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
# 属性
| 成员 | 说明 | 类型 | 必须 | 默认值 | 版本 |
|---|---|---|---|---|---|
| name | 图标名 | icon 名 | 是 | -- | -- |
| size | 图标大小 | '10' | '12' | '14' | '16' | '18' | '20' | '22' | '24' | '28' | '32' | '36' | '40' | '48' | '56' | '64' | 否 | '32' | -- |
| color | 图标颜色 | 颜色名 | 否 | -- | -- |
| className | 自定义 class 名 | String | 否 | -- | -- |
# 事件
| 事件名称 | 说明 | 回调参数 | 必须 | 版本 |
|---|---|---|---|---|
| handlerClick | 点击的回调 | () => void | 否 | -- |