sun-form-v3 1.0.70 → 1.0.72

Sign up to get free protection for your applications and to get access to all the features.
Files changed (157) hide show
  1. package/dist/abap-DfvySaIJ.js +1404 -0
  2. package/dist/apex-B__0irD3.js +332 -0
  3. package/dist/assets/css.worker-OK053IOu.js +84 -0
  4. package/dist/assets/editor.worker-D9iUZyMP.js +11 -0
  5. package/dist/assets/html.worker-CL40hqKM.js +458 -0
  6. package/dist/assets/json.worker-6f9bhSHY.js +42 -0
  7. package/dist/assets/ts.worker-B6g3wjaE.js +37021 -0
  8. package/dist/azcli-CDMGhRmx.js +74 -0
  9. package/dist/bat-0Mk8aqzx.js +106 -0
  10. package/dist/bicep-BBi_I06Z.js +108 -0
  11. package/dist/cameligo-D0G_Zm6X.js +180 -0
  12. package/dist/clojure-o2ZKLeMp.js +767 -0
  13. package/dist/coffee-DOQff5VC.js +238 -0
  14. package/dist/cpp-CQGJnWhD.js +395 -0
  15. package/dist/csharp-C1jLsHl8.js +332 -0
  16. package/dist/csp-C_ttMQaW.js +59 -0
  17. package/dist/css-BC202kVV.js +193 -0
  18. package/dist/cssMode-D3INtz5D.js +1541 -0
  19. package/dist/cypher-DwtEH7Fi.js +269 -0
  20. package/dist/dart-D9XknsP2.js +287 -0
  21. package/dist/dockerfile-DgsNjqqa.js +136 -0
  22. package/dist/ecl-BAMCHBl6.js +462 -0
  23. package/dist/elixir-CegIttP8.js +575 -0
  24. package/dist/favicon.ico +0 -0
  25. package/dist/flow9-9608t7UV.js +148 -0
  26. package/dist/freemarker2-hasIzj0A.js +995 -0
  27. package/dist/fsharp-CCtt9-1_.js +223 -0
  28. package/dist/go-CGUIPbct.js +224 -0
  29. package/dist/graphql-BNRIFFIn.js +157 -0
  30. package/dist/handlebars-Cqza9dif.js +425 -0
  31. package/dist/hcl-C__KLIXe.js +189 -0
  32. package/dist/html-QpDlLWtS.js +314 -0
  33. package/dist/htmlMode-3p93KT8l.js +1551 -0
  34. package/dist/index2-jkDcibEo.js +120443 -0
  35. package/dist/ini-CeKYn_zA.js +77 -0
  36. package/dist/java-Dm24deQl.js +238 -0
  37. package/dist/javascript-CSPB5Brm.js +76 -0
  38. package/dist/jsonMode-qA6pURD0.js +1957 -0
  39. package/dist/julia-BImNW7VE.js +517 -0
  40. package/dist/kotlin-BfE79GEb.js +259 -0
  41. package/dist/less-DglNOcaC.js +168 -0
  42. package/dist/lexon-BA0dRz9Q.js +163 -0
  43. package/dist/liquid-BWuASSim.js +246 -0
  44. package/dist/lua-DMkWzJcm.js +168 -0
  45. package/dist/m3-sA-5shO8.js +216 -0
  46. package/dist/markdown-OYRB1igA.js +235 -0
  47. package/dist/mdx-CnHJXO9F.js +171 -0
  48. package/dist/mips-rRzkJ_7G.js +204 -0
  49. package/dist/msdax-DoVJdUhd.js +381 -0
  50. package/dist/mysql-Ty44IHXo.js +884 -0
  51. package/dist/objective-c-VUfyhYrA.js +189 -0
  52. package/dist/pascal-DkASiYyw.js +257 -0
  53. package/dist/pascaligo-p-ELPlVO.js +170 -0
  54. package/dist/perl-Cjl1FxLZ.js +632 -0
  55. package/dist/pgsql-DjVenF7s.js +857 -0
  56. package/dist/php-CwvGzZOO.js +506 -0
  57. package/dist/pla-Br1iaBIV.js +143 -0
  58. package/dist/postiats-BaeP8zZY.js +913 -0
  59. package/dist/powerquery-CLCshuo8.js +896 -0
  60. package/dist/powershell-CZV50w5N.js +245 -0
  61. package/dist/protobuf-MV3XTewJ.js +426 -0
  62. package/dist/pug-DkDg4c4l.js +408 -0
  63. package/dist/python-CRYsEVap.js +282 -0
  64. package/dist/qsharp-BAtiKA97.js +291 -0
  65. package/dist/r-8ocrd-h-.js +249 -0
  66. package/dist/razor-DyEtGntt.js +556 -0
  67. package/dist/redis-9sZiddxc.js +308 -0
  68. package/dist/redshift-DQfTOGC0.js +815 -0
  69. package/dist/restructuredtext-DXU-vkgr.js +180 -0
  70. package/dist/ruby-DotfqwMf.js +517 -0
  71. package/dist/rust-BIauJ5KN.js +349 -0
  72. package/dist/sb-CmWMvDEV.js +121 -0
  73. package/dist/scala-C81brEbk.js +376 -0
  74. package/dist/scheme-D0pcFz2x.js +114 -0
  75. package/dist/scss-BOdN2fGG.js +268 -0
  76. package/dist/shell-6E09eAkU.js +227 -0
  77. package/dist/solidity-CWStzA1K.js +1373 -0
  78. package/dist/sophia-76Sb6CWe.js +205 -0
  79. package/dist/sparql-BmZTkOWT.js +207 -0
  80. package/dist/sql-Cs9TBAW5.js +859 -0
  81. package/dist/st-B-rqE1Bu.js +422 -0
  82. package/dist/style.css +1 -0
  83. package/dist/sun-form-v3.es.js +4 -0
  84. package/dist/sun-form-v3.umd.js +1902 -0
  85. package/dist/swift-Btsj6YxQ.js +318 -0
  86. package/dist/systemverilog-B3RHBRa2.js +582 -0
  87. package/dist/tcl-Dpj776pn.js +238 -0
  88. package/dist/tsMode-BrlIPEQw.js +885 -0
  89. package/dist/twig-Bb9JmBsE.js +398 -0
  90. package/dist/typescript-CYTudnTM.js +349 -0
  91. package/dist/typespec-CDWeg3SU.js +123 -0
  92. package/dist/vb-DEXnYwEI.js +378 -0
  93. package/dist/wgsl-D602c1lx.js +445 -0
  94. package/dist/xml-B-x5164u.js +101 -0
  95. package/dist/yaml-Buq2hM65.js +212 -0
  96. package/package.json +5 -8
  97. package/src/App.vue +0 -9
  98. package/src/assets/font/YouSheBiaoTiHei-2.ttf +0 -0
  99. package/src/assets/font/demo.css +0 -539
  100. package/src/assets/font/demo_index.html +0 -1200
  101. package/src/assets/font/iconfont.css +0 -191
  102. package/src/assets/font/iconfont.js +0 -1
  103. package/src/assets/font/iconfont.json +0 -317
  104. package/src/assets/font/iconfont.ttf +0 -0
  105. package/src/assets/font/iconfont.woff +0 -0
  106. package/src/assets/font/iconfont.woff2 +0 -0
  107. package/src/assets/img/bg_footer.png +0 -0
  108. package/src/assets/img/bg_title.png +0 -0
  109. package/src/assets/img/file.png +0 -0
  110. package/src/assets/img/logo.png +0 -0
  111. package/src/assets/img/logo2.png +0 -0
  112. package/src/assets/img/logo22.png +0 -0
  113. package/src/assets/img/logo23.png +0 -0
  114. package/src/assets/img/logo3.png +0 -0
  115. package/src/assets/img//347/237/251/345/275/242@2x.png +0 -0
  116. package/src/assets/logo.svg +0 -1
  117. package/src/assets/styles/element/index.scss +0 -15
  118. package/src/assets/styles/index.css +0 -3
  119. package/src/components/a.js +0 -14
  120. package/src/components/aDesigner/config.vue +0 -127
  121. package/src/components/aDesigner/design.vue +0 -20
  122. package/src/components/aDesigner/designer.js +0 -342
  123. package/src/components/aDesigner/http.js +0 -292
  124. package/src/components/aDesigner/index.vue +0 -144
  125. package/src/components/aDesigner/panel.vue +0 -144
  126. package/src/components/aDesigner/show.vue +0 -24
  127. package/src/components/widgetCommonComps/commonApiConfig/index.vue +0 -194
  128. package/src/components/widgetCommonComps/commonCard/index.vue +0 -36
  129. package/src/components/widgetCommonComps/commonCodeEditor/editor.vue +0 -219
  130. package/src/components/widgetCommonComps/commonCodeEditor/modalEditor.vue +0 -68
  131. package/src/components/widgetCommonComps/commonCollapseCard/index.vue +0 -10
  132. package/src/components/widgetCommonComps/commonContainer/index.vue +0 -95
  133. package/src/components/widgetCommonComps/commonJsonInput/index.vue +0 -59
  134. package/src/components/widgetCommonComps/commonLabelContainer/index.vue +0 -39
  135. package/src/components/widgetCommonComps/commonSidetree/index.vue +0 -61
  136. package/src/components/widgetCommonComps/commonTypeInput/index.vue +0 -75
  137. package/src/components/widgetCommonComps/commonWidgetLabelContainer/index.vue +0 -55
  138. package/src/components/widgetCommonComps/index copy.js +0 -17
  139. package/src/components/widgetCommonComps/index.js +0 -17
  140. package/src/components/widgetConfigComps/config-input/index.vue +0 -60
  141. package/src/components/widgetConfigComps/index copy.js +0 -13
  142. package/src/components/widgetConfigComps/index.js +0 -17
  143. package/src/components/widgetShowComps/index.js +0 -29
  144. package/src/components/widgetShowComps/widget-form/index.vue +0 -43
  145. package/src/components/widgetShowComps/widget-homepage/index.vue +0 -41
  146. package/src/components/widgetShowComps/widget-input/index.vue +0 -85
  147. package/src/components/widgetShowComps/widget-select/index.vue +0 -31
  148. package/src/designer.js +0 -342
  149. package/src/http.js +0 -293
  150. package/src/index.js +0 -24
  151. package/src/index2.js +0 -23
  152. package/src/main.js +0 -19
  153. package/src/remark.js +0 -708
  154. package/src/testBtn.vue +0 -11
  155. package/src/testInput.vue +0 -12
  156. package/src/util/jsformat.js +0 -568
  157. package/src/widgetConfig.js +0 -1112
@@ -1,1200 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8"/>
5
- <title>iconfont Demo</title>
6
- <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
7
- <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
8
- <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
9
- <link rel="stylesheet" href="demo.css">
10
- <link rel="stylesheet" href="iconfont.css">
11
- <script src="iconfont.js"></script>
12
- <!-- jQuery -->
13
- <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
14
- <!-- 代码高亮 -->
15
- <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
16
- <style>
17
- .main .logo {
18
- margin-top: 0;
19
- height: auto;
20
- }
21
-
22
- .main .logo a {
23
- display: flex;
24
- align-items: center;
25
- }
26
-
27
- .main .logo .sub-title {
28
- margin-left: 0.5em;
29
- font-size: 22px;
30
- color: #fff;
31
- background: linear-gradient(-45deg, #3967FF, #B500FE);
32
- -webkit-background-clip: text;
33
- -webkit-text-fill-color: transparent;
34
- }
35
- </style>
36
- </head>
37
- <body>
38
- <div class="main">
39
- <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
40
- <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
41
-
42
- </a></h1>
43
- <div class="nav-tabs">
44
- <ul id="tabs" class="dib-box">
45
- <li class="dib active"><span>Unicode</span></li>
46
- <li class="dib"><span>Font class</span></li>
47
- <li class="dib"><span>Symbol</span></li>
48
- </ul>
49
-
50
- <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3876170" target="_blank" class="nav-more">查看项目</a>
51
-
52
- </div>
53
- <div class="tab-container">
54
- <div class="content unicode" style="display: block;">
55
- <ul class="icon_lists dib-box">
56
-
57
- <li class="dib">
58
- <span class="icon iconfont">&#xe600;</span>
59
- <div class="name">撤销</div>
60
- <div class="code-name">&amp;#xe600;</div>
61
- </li>
62
-
63
- <li class="dib">
64
- <span class="icon iconfont">&#xe602;</span>
65
- <div class="name">重做</div>
66
- <div class="code-name">&amp;#xe602;</div>
67
- </li>
68
-
69
- <li class="dib">
70
- <span class="icon iconfont">&#xe66f;</span>
71
- <div class="name">D-component3</div>
72
- <div class="code-name">&amp;#xe66f;</div>
73
- </li>
74
-
75
- <li class="dib">
76
- <span class="icon iconfont">&#xe601;</span>
77
- <div class="name">大纲</div>
78
- <div class="code-name">&amp;#xe601;</div>
79
- </li>
80
-
81
- <li class="dib">
82
- <span class="icon iconfont">&#xe7d4;</span>
83
- <div class="name">软件源码</div>
84
- <div class="code-name">&amp;#xe7d4;</div>
85
- </li>
86
-
87
- <li class="dib">
88
- <span class="icon iconfont">&#xe60e;</span>
89
- <div class="name">form</div>
90
- <div class="code-name">&amp;#xe60e;</div>
91
- </li>
92
-
93
- <li class="dib">
94
- <span class="icon iconfont">&#xe83f;</span>
95
- <div class="name">验证码</div>
96
- <div class="code-name">&amp;#xe83f;</div>
97
- </li>
98
-
99
- <li class="dib">
100
- <span class="icon iconfont">&#xe67f;</span>
101
- <div class="name">图片</div>
102
- <div class="code-name">&amp;#xe67f;</div>
103
- </li>
104
-
105
- <li class="dib">
106
- <span class="icon iconfont">&#xec72;</span>
107
- <div class="name">告警实心</div>
108
- <div class="code-name">&amp;#xec72;</div>
109
- </li>
110
-
111
- <li class="dib">
112
- <span class="icon iconfont">&#xe60d;</span>
113
- <div class="name">容器</div>
114
- <div class="code-name">&amp;#xe60d;</div>
115
- </li>
116
-
117
- <li class="dib">
118
- <span class="icon iconfont">&#xe74e;</span>
119
- <div class="name">html5</div>
120
- <div class="code-name">&amp;#xe74e;</div>
121
- </li>
122
-
123
- <li class="dib">
124
- <span class="icon iconfont">&#xe891;</span>
125
- <div class="name">transfer</div>
126
- <div class="code-name">&amp;#xe891;</div>
127
- </li>
128
-
129
- <li class="dib">
130
- <span class="icon iconfont">&#xe73b;</span>
131
- <div class="name">line-file word(word文档)-02</div>
132
- <div class="code-name">&amp;#xe73b;</div>
133
- </li>
134
-
135
- <li class="dib">
136
- <span class="icon iconfont">&#xe648;</span>
137
- <div class="name">地图</div>
138
- <div class="code-name">&amp;#xe648;</div>
139
- </li>
140
-
141
- <li class="dib">
142
- <span class="icon iconfont">&#xe629;</span>
143
- <div class="name">tree-table</div>
144
- <div class="code-name">&amp;#xe629;</div>
145
- </li>
146
-
147
- <li class="dib">
148
- <span class="icon iconfont">&#xe70f;</span>
149
- <div class="name">Timeline-1</div>
150
- <div class="code-name">&amp;#xe70f;</div>
151
- </li>
152
-
153
- <li class="dib">
154
- <span class="icon iconfont">&#xe746;</span>
155
- <div class="name">find-in-page</div>
156
- <div class="code-name">&amp;#xe746;</div>
157
- </li>
158
-
159
- <li class="dib">
160
- <span class="icon iconfont">&#xe62c;</span>
161
- <div class="name">星星</div>
162
- <div class="code-name">&amp;#xe62c;</div>
163
- </li>
164
-
165
- <li class="dib">
166
- <span class="icon iconfont">&#xe76d;</span>
167
- <div class="name">card</div>
168
- <div class="code-name">&amp;#xe76d;</div>
169
- </li>
170
-
171
- <li class="dib">
172
- <span class="icon iconfont">&#xe81c;</span>
173
- <div class="name">radio-checked</div>
174
- <div class="code-name">&amp;#xe81c;</div>
175
- </li>
176
-
177
- <li class="dib">
178
- <span class="icon iconfont">&#xe7b3;</span>
179
- <div class="name">radio-checked</div>
180
- <div class="code-name">&amp;#xe7b3;</div>
181
- </li>
182
-
183
- <li class="dib">
184
- <span class="icon iconfont">&#xe642;</span>
185
- <div class="name">select</div>
186
- <div class="code-name">&amp;#xe642;</div>
187
- </li>
188
-
189
- <li class="dib">
190
- <span class="icon iconfont">&#xe63b;</span>
191
- <div class="name">institue_time</div>
192
- <div class="code-name">&amp;#xe63b;</div>
193
- </li>
194
-
195
- <li class="dib">
196
- <span class="icon iconfont">&#xe619;</span>
197
- <div class="name">时钟</div>
198
- <div class="code-name">&amp;#xe619;</div>
199
- </li>
200
-
201
- <li class="dib">
202
- <span class="icon iconfont">&#xe6df;</span>
203
- <div class="name">tab</div>
204
- <div class="code-name">&amp;#xe6df;</div>
205
- </li>
206
-
207
- <li class="dib">
208
- <span class="icon iconfont">&#xe628;</span>
209
- <div class="name">开关</div>
210
- <div class="code-name">&amp;#xe628;</div>
211
- </li>
212
-
213
- <li class="dib">
214
- <span class="icon iconfont">&#xe615;</span>
215
- <div class="name">checkbox-f</div>
216
- <div class="code-name">&amp;#xe615;</div>
217
- </li>
218
-
219
- <li class="dib">
220
- <span class="icon iconfont">&#xea04;</span>
221
- <div class="name">地图,手指,点击,触摸</div>
222
- <div class="code-name">&amp;#xea04;</div>
223
- </li>
224
-
225
- <li class="dib">
226
- <span class="icon iconfont">&#xe609;</span>
227
- <div class="name">daterange-outlined</div>
228
- <div class="code-name">&amp;#xe609;</div>
229
- </li>
230
-
231
- <li class="dib">
232
- <span class="icon iconfont">&#xe62b;</span>
233
- <div class="name">标题</div>
234
- <div class="code-name">&amp;#xe62b;</div>
235
- </li>
236
-
237
- <li class="dib">
238
- <span class="icon iconfont">&#xe671;</span>
239
- <div class="name">符号-日期区间</div>
240
- <div class="code-name">&amp;#xe671;</div>
241
- </li>
242
-
243
- <li class="dib">
244
- <span class="icon iconfont">&#xe74a;</span>
245
- <div class="name">接口</div>
246
- <div class="code-name">&amp;#xe74a;</div>
247
- </li>
248
-
249
- <li class="dib">
250
- <span class="icon iconfont">&#xe6e4;</span>
251
- <div class="name">大标题</div>
252
- <div class="code-name">&amp;#xe6e4;</div>
253
- </li>
254
-
255
- <li class="dib">
256
- <span class="icon iconfont">&#xe61e;</span>
257
- <div class="name">上传</div>
258
- <div class="code-name">&amp;#xe61e;</div>
259
- </li>
260
-
261
- <li class="dib">
262
- <span class="icon iconfont">&#xe6a6;</span>
263
- <div class="name">综测表单设置</div>
264
- <div class="code-name">&amp;#xe6a6;</div>
265
- </li>
266
-
267
- <li class="dib">
268
- <span class="icon iconfont">&#xe638;</span>
269
- <div class="name">分割线</div>
270
- <div class="code-name">&amp;#xe638;</div>
271
- </li>
272
-
273
- <li class="dib">
274
- <span class="icon iconfont">&#xe61c;</span>
275
- <div class="name">单行文本</div>
276
- <div class="code-name">&amp;#xe61c;</div>
277
- </li>
278
-
279
- <li class="dib">
280
- <span class="icon iconfont">&#xe61d;</span>
281
- <div class="name">多选框</div>
282
- <div class="code-name">&amp;#xe61d;</div>
283
- </li>
284
-
285
- <li class="dib">
286
- <span class="icon iconfont">&#xe620;</span>
287
- <div class="name">多行文本</div>
288
- <div class="code-name">&amp;#xe620;</div>
289
- </li>
290
-
291
- <li class="dib">
292
- <span class="icon iconfont">&#xe639;</span>
293
- <div class="name">表格</div>
294
- <div class="code-name">&amp;#xe639;</div>
295
- </li>
296
-
297
- <li class="dib">
298
- <span class="icon iconfont">&#xe63c;</span>
299
- <div class="name">弹窗</div>
300
- <div class="code-name">&amp;#xe63c;</div>
301
- </li>
302
-
303
- <li class="dib">
304
- <span class="icon iconfont">&#xe64e;</span>
305
- <div class="name">date</div>
306
- <div class="code-name">&amp;#xe64e;</div>
307
- </li>
308
-
309
- <li class="dib">
310
- <span class="icon iconfont">&#xe655;</span>
311
- <div class="name">富文本编辑器_缩进</div>
312
- <div class="code-name">&amp;#xe655;</div>
313
- </li>
314
-
315
- <li class="dib">
316
- <span class="icon iconfont">&#xeb94;</span>
317
- <div class="name">表单组件-表格</div>
318
- <div class="code-name">&amp;#xeb94;</div>
319
- </li>
320
-
321
- </ul>
322
- <div class="article markdown">
323
- <h2 id="unicode-">Unicode 引用</h2>
324
- <hr>
325
-
326
- <p>Unicode 是字体在网页端最原始的应用方式,特点是:</p>
327
- <ul>
328
- <li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
329
- <li>默认情况下不支持多色,直接添加多色图标会自动去色。</li>
330
- </ul>
331
- <blockquote>
332
- <p>注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)</p>
333
- </blockquote>
334
- <p>Unicode 使用步骤如下:</p>
335
- <h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
336
- <pre><code class="language-css"
337
- >@font-face {
338
- font-family: 'iconfont';
339
- src: url('iconfont.woff2?t=1717897229422') format('woff2'),
340
- url('iconfont.woff?t=1717897229422') format('woff'),
341
- url('iconfont.ttf?t=1717897229422') format('truetype');
342
- }
343
- </code></pre>
344
- <h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
345
- <pre><code class="language-css"
346
- >.iconfont {
347
- font-family: "iconfont" !important;
348
- font-size: 16px;
349
- font-style: normal;
350
- -webkit-font-smoothing: antialiased;
351
- -moz-osx-font-smoothing: grayscale;
352
- }
353
- </code></pre>
354
- <h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
355
- <pre>
356
- <code class="language-html"
357
- >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
358
- </code></pre>
359
- <blockquote>
360
- <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
361
- </blockquote>
362
- </div>
363
- </div>
364
- <div class="content font-class">
365
- <ul class="icon_lists dib-box">
366
-
367
- <li class="dib">
368
- <span class="icon iconfont icon-xianghou"></span>
369
- <div class="name">
370
- 撤销
371
- </div>
372
- <div class="code-name">.icon-xianghou
373
- </div>
374
- </li>
375
-
376
- <li class="dib">
377
- <span class="icon iconfont icon-xiangqian"></span>
378
- <div class="name">
379
- 重做
380
- </div>
381
- <div class="code-name">.icon-xiangqian
382
- </div>
383
- </li>
384
-
385
- <li class="dib">
386
- <span class="icon iconfont icon-zujian"></span>
387
- <div class="name">
388
- D-component3
389
- </div>
390
- <div class="code-name">.icon-zujian
391
- </div>
392
- </li>
393
-
394
- <li class="dib">
395
- <span class="icon iconfont icon-dagang"></span>
396
- <div class="name">
397
- 大纲
398
- </div>
399
- <div class="code-name">.icon-dagang
400
- </div>
401
- </li>
402
-
403
- <li class="dib">
404
- <span class="icon iconfont icon-yuanma"></span>
405
- <div class="name">
406
- 软件源码
407
- </div>
408
- <div class="code-name">.icon-yuanma
409
- </div>
410
- </li>
411
-
412
- <li class="dib">
413
- <span class="icon iconfont icon-form"></span>
414
- <div class="name">
415
- form
416
- </div>
417
- <div class="code-name">.icon-form
418
- </div>
419
- </li>
420
-
421
- <li class="dib">
422
- <span class="icon iconfont icon-checkCode"></span>
423
- <div class="name">
424
- 验证码
425
- </div>
426
- <div class="code-name">.icon-checkCode
427
- </div>
428
- </li>
429
-
430
- <li class="dib">
431
- <span class="icon iconfont icon-image"></span>
432
- <div class="name">
433
- 图片
434
- </div>
435
- <div class="code-name">.icon-image
436
- </div>
437
- </li>
438
-
439
- <li class="dib">
440
- <span class="icon iconfont icon-alert"></span>
441
- <div class="name">
442
- 告警实心
443
- </div>
444
- <div class="code-name">.icon-alert
445
- </div>
446
- </li>
447
-
448
- <li class="dib">
449
- <span class="icon iconfont icon-div"></span>
450
- <div class="name">
451
- 容器
452
- </div>
453
- <div class="code-name">.icon-div
454
- </div>
455
- </li>
456
-
457
- <li class="dib">
458
- <span class="icon iconfont icon-html"></span>
459
- <div class="name">
460
- html5
461
- </div>
462
- <div class="code-name">.icon-html
463
- </div>
464
- </li>
465
-
466
- <li class="dib">
467
- <span class="icon iconfont icon-transfer"></span>
468
- <div class="name">
469
- transfer
470
- </div>
471
- <div class="code-name">.icon-transfer
472
- </div>
473
- </li>
474
-
475
- <li class="dib">
476
- <span class="icon iconfont icon-editor"></span>
477
- <div class="name">
478
- line-file word(word文档)-02
479
- </div>
480
- <div class="code-name">.icon-editor
481
- </div>
482
- </li>
483
-
484
- <li class="dib">
485
- <span class="icon iconfont icon-location"></span>
486
- <div class="name">
487
- 地图
488
- </div>
489
- <div class="code-name">.icon-location
490
- </div>
491
- </li>
492
-
493
- <li class="dib">
494
- <span class="icon iconfont icon-tree"></span>
495
- <div class="name">
496
- tree-table
497
- </div>
498
- <div class="code-name">.icon-tree
499
- </div>
500
- </li>
501
-
502
- <li class="dib">
503
- <span class="icon iconfont icon-timeline"></span>
504
- <div class="name">
505
- Timeline-1
506
- </div>
507
- <div class="code-name">.icon-timeline
508
- </div>
509
- </li>
510
-
511
- <li class="dib">
512
- <span class="icon iconfont icon-iframe"></span>
513
- <div class="name">
514
- find-in-page
515
- </div>
516
- <div class="code-name">.icon-iframe
517
- </div>
518
- </li>
519
-
520
- <li class="dib">
521
- <span class="icon iconfont icon-rate"></span>
522
- <div class="name">
523
- 星星
524
- </div>
525
- <div class="code-name">.icon-rate
526
- </div>
527
- </li>
528
-
529
- <li class="dib">
530
- <span class="icon iconfont icon-card"></span>
531
- <div class="name">
532
- card
533
- </div>
534
- <div class="code-name">.icon-card
535
- </div>
536
- </li>
537
-
538
- <li class="dib">
539
- <span class="icon iconfont icon-radio"></span>
540
- <div class="name">
541
- radio-checked
542
- </div>
543
- <div class="code-name">.icon-radio
544
- </div>
545
- </li>
546
-
547
- <li class="dib">
548
- <span class="icon iconfont icon-radiochecked1"></span>
549
- <div class="name">
550
- radio-checked
551
- </div>
552
- <div class="code-name">.icon-radiochecked1
553
- </div>
554
- </li>
555
-
556
- <li class="dib">
557
- <span class="icon iconfont icon-select"></span>
558
- <div class="name">
559
- select
560
- </div>
561
- <div class="code-name">.icon-select
562
- </div>
563
- </li>
564
-
565
- <li class="dib">
566
- <span class="icon iconfont icon-time"></span>
567
- <div class="name">
568
- institue_time
569
- </div>
570
- <div class="code-name">.icon-time
571
- </div>
572
- </li>
573
-
574
- <li class="dib">
575
- <span class="icon iconfont icon-timerange"></span>
576
- <div class="name">
577
- 时钟
578
- </div>
579
- <div class="code-name">.icon-timerange
580
- </div>
581
- </li>
582
-
583
- <li class="dib">
584
- <span class="icon iconfont icon-tabs"></span>
585
- <div class="name">
586
- tab
587
- </div>
588
- <div class="code-name">.icon-tabs
589
- </div>
590
- </li>
591
-
592
- <li class="dib">
593
- <span class="icon iconfont icon-switch"></span>
594
- <div class="name">
595
- 开关
596
- </div>
597
- <div class="code-name">.icon-switch
598
- </div>
599
- </li>
600
-
601
- <li class="dib">
602
- <span class="icon iconfont icon-checkbox"></span>
603
- <div class="name">
604
- checkbox-f
605
- </div>
606
- <div class="code-name">.icon-checkbox
607
- </div>
608
- </li>
609
-
610
- <li class="dib">
611
- <span class="icon iconfont icon-button"></span>
612
- <div class="name">
613
- 地图,手指,点击,触摸
614
- </div>
615
- <div class="code-name">.icon-button
616
- </div>
617
- </li>
618
-
619
- <li class="dib">
620
- <span class="icon iconfont icon-daterange"></span>
621
- <div class="name">
622
- daterange-outlined
623
- </div>
624
- <div class="code-name">.icon-daterange
625
- </div>
626
- </li>
627
-
628
- <li class="dib">
629
- <span class="icon iconfont icon-title"></span>
630
- <div class="name">
631
- 标题
632
- </div>
633
- <div class="code-name">.icon-title
634
- </div>
635
- </li>
636
-
637
- <li class="dib">
638
- <span class="icon iconfont icon-riqiqujian"></span>
639
- <div class="name">
640
- 符号-日期区间
641
- </div>
642
- <div class="code-name">.icon-riqiqujian
643
- </div>
644
- </li>
645
-
646
- <li class="dib">
647
- <span class="icon iconfont icon-service"></span>
648
- <div class="name">
649
- 接口
650
- </div>
651
- <div class="code-name">.icon-service
652
- </div>
653
- </li>
654
-
655
- <li class="dib">
656
- <span class="icon iconfont icon-biaoti2"></span>
657
- <div class="name">
658
- 大标题
659
- </div>
660
- <div class="code-name">.icon-biaoti2
661
- </div>
662
- </li>
663
-
664
- <li class="dib">
665
- <span class="icon iconfont icon-file"></span>
666
- <div class="name">
667
- 上传
668
- </div>
669
- <div class="code-name">.icon-file
670
- </div>
671
- </li>
672
-
673
- <li class="dib">
674
- <span class="icon iconfont icon-grid"></span>
675
- <div class="name">
676
- 综测表单设置
677
- </div>
678
- <div class="code-name">.icon-grid
679
- </div>
680
- </li>
681
-
682
- <li class="dib">
683
- <span class="icon iconfont icon-divider"></span>
684
- <div class="name">
685
- 分割线
686
- </div>
687
- <div class="code-name">.icon-divider
688
- </div>
689
- </li>
690
-
691
- <li class="dib">
692
- <span class="icon iconfont icon-input"></span>
693
- <div class="name">
694
- 单行文本
695
- </div>
696
- <div class="code-name">.icon-input
697
- </div>
698
- </li>
699
-
700
- <li class="dib">
701
- <span class="icon iconfont icon-selects"></span>
702
- <div class="name">
703
- 多选框
704
- </div>
705
- <div class="code-name">.icon-selects
706
- </div>
707
- </li>
708
-
709
- <li class="dib">
710
- <span class="icon iconfont icon-textarea"></span>
711
- <div class="name">
712
- 多行文本
713
- </div>
714
- <div class="code-name">.icon-textarea
715
- </div>
716
- </li>
717
-
718
- <li class="dib">
719
- <span class="icon iconfont icon-datatable"></span>
720
- <div class="name">
721
- 表格
722
- </div>
723
- <div class="code-name">.icon-datatable
724
- </div>
725
- </li>
726
-
727
- <li class="dib">
728
- <span class="icon iconfont icon-modal"></span>
729
- <div class="name">
730
- 弹窗
731
- </div>
732
- <div class="code-name">.icon-modal
733
- </div>
734
- </li>
735
-
736
- <li class="dib">
737
- <span class="icon iconfont icon-date"></span>
738
- <div class="name">
739
- date
740
- </div>
741
- <div class="code-name">.icon-date
742
- </div>
743
- </li>
744
-
745
- <li class="dib">
746
- <span class="icon iconfont icon-codeEditor"></span>
747
- <div class="name">
748
- 富文本编辑器_缩进
749
- </div>
750
- <div class="code-name">.icon-codeEditor
751
- </div>
752
- </li>
753
-
754
- <li class="dib">
755
- <span class="icon iconfont icon-biaodanzujian-biaoge"></span>
756
- <div class="name">
757
- 表单组件-表格
758
- </div>
759
- <div class="code-name">.icon-biaodanzujian-biaoge
760
- </div>
761
- </li>
762
-
763
- </ul>
764
- <div class="article markdown">
765
- <h2 id="font-class-">font-class 引用</h2>
766
- <hr>
767
-
768
- <p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p>
769
- <p>与 Unicode 使用方式相比,具有如下特点:</p>
770
- <ul>
771
- <li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li>
772
- <li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li>
773
- </ul>
774
- <p>使用步骤如下:</p>
775
- <h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3>
776
- <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
777
- </code></pre>
778
- <h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
779
- <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
780
- </code></pre>
781
- <blockquote>
782
- <p>"
783
- iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
784
- </blockquote>
785
- </div>
786
- </div>
787
- <div class="content symbol">
788
- <ul class="icon_lists dib-box">
789
-
790
- <li class="dib">
791
- <svg class="icon svg-icon" aria-hidden="true">
792
- <use xlink:href="#icon-xianghou"></use>
793
- </svg>
794
- <div class="name">撤销</div>
795
- <div class="code-name">#icon-xianghou</div>
796
- </li>
797
-
798
- <li class="dib">
799
- <svg class="icon svg-icon" aria-hidden="true">
800
- <use xlink:href="#icon-xiangqian"></use>
801
- </svg>
802
- <div class="name">重做</div>
803
- <div class="code-name">#icon-xiangqian</div>
804
- </li>
805
-
806
- <li class="dib">
807
- <svg class="icon svg-icon" aria-hidden="true">
808
- <use xlink:href="#icon-zujian"></use>
809
- </svg>
810
- <div class="name">D-component3</div>
811
- <div class="code-name">#icon-zujian</div>
812
- </li>
813
-
814
- <li class="dib">
815
- <svg class="icon svg-icon" aria-hidden="true">
816
- <use xlink:href="#icon-dagang"></use>
817
- </svg>
818
- <div class="name">大纲</div>
819
- <div class="code-name">#icon-dagang</div>
820
- </li>
821
-
822
- <li class="dib">
823
- <svg class="icon svg-icon" aria-hidden="true">
824
- <use xlink:href="#icon-yuanma"></use>
825
- </svg>
826
- <div class="name">软件源码</div>
827
- <div class="code-name">#icon-yuanma</div>
828
- </li>
829
-
830
- <li class="dib">
831
- <svg class="icon svg-icon" aria-hidden="true">
832
- <use xlink:href="#icon-form"></use>
833
- </svg>
834
- <div class="name">form</div>
835
- <div class="code-name">#icon-form</div>
836
- </li>
837
-
838
- <li class="dib">
839
- <svg class="icon svg-icon" aria-hidden="true">
840
- <use xlink:href="#icon-checkCode"></use>
841
- </svg>
842
- <div class="name">验证码</div>
843
- <div class="code-name">#icon-checkCode</div>
844
- </li>
845
-
846
- <li class="dib">
847
- <svg class="icon svg-icon" aria-hidden="true">
848
- <use xlink:href="#icon-image"></use>
849
- </svg>
850
- <div class="name">图片</div>
851
- <div class="code-name">#icon-image</div>
852
- </li>
853
-
854
- <li class="dib">
855
- <svg class="icon svg-icon" aria-hidden="true">
856
- <use xlink:href="#icon-alert"></use>
857
- </svg>
858
- <div class="name">告警实心</div>
859
- <div class="code-name">#icon-alert</div>
860
- </li>
861
-
862
- <li class="dib">
863
- <svg class="icon svg-icon" aria-hidden="true">
864
- <use xlink:href="#icon-div"></use>
865
- </svg>
866
- <div class="name">容器</div>
867
- <div class="code-name">#icon-div</div>
868
- </li>
869
-
870
- <li class="dib">
871
- <svg class="icon svg-icon" aria-hidden="true">
872
- <use xlink:href="#icon-html"></use>
873
- </svg>
874
- <div class="name">html5</div>
875
- <div class="code-name">#icon-html</div>
876
- </li>
877
-
878
- <li class="dib">
879
- <svg class="icon svg-icon" aria-hidden="true">
880
- <use xlink:href="#icon-transfer"></use>
881
- </svg>
882
- <div class="name">transfer</div>
883
- <div class="code-name">#icon-transfer</div>
884
- </li>
885
-
886
- <li class="dib">
887
- <svg class="icon svg-icon" aria-hidden="true">
888
- <use xlink:href="#icon-editor"></use>
889
- </svg>
890
- <div class="name">line-file word(word文档)-02</div>
891
- <div class="code-name">#icon-editor</div>
892
- </li>
893
-
894
- <li class="dib">
895
- <svg class="icon svg-icon" aria-hidden="true">
896
- <use xlink:href="#icon-location"></use>
897
- </svg>
898
- <div class="name">地图</div>
899
- <div class="code-name">#icon-location</div>
900
- </li>
901
-
902
- <li class="dib">
903
- <svg class="icon svg-icon" aria-hidden="true">
904
- <use xlink:href="#icon-tree"></use>
905
- </svg>
906
- <div class="name">tree-table</div>
907
- <div class="code-name">#icon-tree</div>
908
- </li>
909
-
910
- <li class="dib">
911
- <svg class="icon svg-icon" aria-hidden="true">
912
- <use xlink:href="#icon-timeline"></use>
913
- </svg>
914
- <div class="name">Timeline-1</div>
915
- <div class="code-name">#icon-timeline</div>
916
- </li>
917
-
918
- <li class="dib">
919
- <svg class="icon svg-icon" aria-hidden="true">
920
- <use xlink:href="#icon-iframe"></use>
921
- </svg>
922
- <div class="name">find-in-page</div>
923
- <div class="code-name">#icon-iframe</div>
924
- </li>
925
-
926
- <li class="dib">
927
- <svg class="icon svg-icon" aria-hidden="true">
928
- <use xlink:href="#icon-rate"></use>
929
- </svg>
930
- <div class="name">星星</div>
931
- <div class="code-name">#icon-rate</div>
932
- </li>
933
-
934
- <li class="dib">
935
- <svg class="icon svg-icon" aria-hidden="true">
936
- <use xlink:href="#icon-card"></use>
937
- </svg>
938
- <div class="name">card</div>
939
- <div class="code-name">#icon-card</div>
940
- </li>
941
-
942
- <li class="dib">
943
- <svg class="icon svg-icon" aria-hidden="true">
944
- <use xlink:href="#icon-radio"></use>
945
- </svg>
946
- <div class="name">radio-checked</div>
947
- <div class="code-name">#icon-radio</div>
948
- </li>
949
-
950
- <li class="dib">
951
- <svg class="icon svg-icon" aria-hidden="true">
952
- <use xlink:href="#icon-radiochecked1"></use>
953
- </svg>
954
- <div class="name">radio-checked</div>
955
- <div class="code-name">#icon-radiochecked1</div>
956
- </li>
957
-
958
- <li class="dib">
959
- <svg class="icon svg-icon" aria-hidden="true">
960
- <use xlink:href="#icon-select"></use>
961
- </svg>
962
- <div class="name">select</div>
963
- <div class="code-name">#icon-select</div>
964
- </li>
965
-
966
- <li class="dib">
967
- <svg class="icon svg-icon" aria-hidden="true">
968
- <use xlink:href="#icon-time"></use>
969
- </svg>
970
- <div class="name">institue_time</div>
971
- <div class="code-name">#icon-time</div>
972
- </li>
973
-
974
- <li class="dib">
975
- <svg class="icon svg-icon" aria-hidden="true">
976
- <use xlink:href="#icon-timerange"></use>
977
- </svg>
978
- <div class="name">时钟</div>
979
- <div class="code-name">#icon-timerange</div>
980
- </li>
981
-
982
- <li class="dib">
983
- <svg class="icon svg-icon" aria-hidden="true">
984
- <use xlink:href="#icon-tabs"></use>
985
- </svg>
986
- <div class="name">tab</div>
987
- <div class="code-name">#icon-tabs</div>
988
- </li>
989
-
990
- <li class="dib">
991
- <svg class="icon svg-icon" aria-hidden="true">
992
- <use xlink:href="#icon-switch"></use>
993
- </svg>
994
- <div class="name">开关</div>
995
- <div class="code-name">#icon-switch</div>
996
- </li>
997
-
998
- <li class="dib">
999
- <svg class="icon svg-icon" aria-hidden="true">
1000
- <use xlink:href="#icon-checkbox"></use>
1001
- </svg>
1002
- <div class="name">checkbox-f</div>
1003
- <div class="code-name">#icon-checkbox</div>
1004
- </li>
1005
-
1006
- <li class="dib">
1007
- <svg class="icon svg-icon" aria-hidden="true">
1008
- <use xlink:href="#icon-button"></use>
1009
- </svg>
1010
- <div class="name">地图,手指,点击,触摸</div>
1011
- <div class="code-name">#icon-button</div>
1012
- </li>
1013
-
1014
- <li class="dib">
1015
- <svg class="icon svg-icon" aria-hidden="true">
1016
- <use xlink:href="#icon-daterange"></use>
1017
- </svg>
1018
- <div class="name">daterange-outlined</div>
1019
- <div class="code-name">#icon-daterange</div>
1020
- </li>
1021
-
1022
- <li class="dib">
1023
- <svg class="icon svg-icon" aria-hidden="true">
1024
- <use xlink:href="#icon-title"></use>
1025
- </svg>
1026
- <div class="name">标题</div>
1027
- <div class="code-name">#icon-title</div>
1028
- </li>
1029
-
1030
- <li class="dib">
1031
- <svg class="icon svg-icon" aria-hidden="true">
1032
- <use xlink:href="#icon-riqiqujian"></use>
1033
- </svg>
1034
- <div class="name">符号-日期区间</div>
1035
- <div class="code-name">#icon-riqiqujian</div>
1036
- </li>
1037
-
1038
- <li class="dib">
1039
- <svg class="icon svg-icon" aria-hidden="true">
1040
- <use xlink:href="#icon-service"></use>
1041
- </svg>
1042
- <div class="name">接口</div>
1043
- <div class="code-name">#icon-service</div>
1044
- </li>
1045
-
1046
- <li class="dib">
1047
- <svg class="icon svg-icon" aria-hidden="true">
1048
- <use xlink:href="#icon-biaoti2"></use>
1049
- </svg>
1050
- <div class="name">大标题</div>
1051
- <div class="code-name">#icon-biaoti2</div>
1052
- </li>
1053
-
1054
- <li class="dib">
1055
- <svg class="icon svg-icon" aria-hidden="true">
1056
- <use xlink:href="#icon-file"></use>
1057
- </svg>
1058
- <div class="name">上传</div>
1059
- <div class="code-name">#icon-file</div>
1060
- </li>
1061
-
1062
- <li class="dib">
1063
- <svg class="icon svg-icon" aria-hidden="true">
1064
- <use xlink:href="#icon-grid"></use>
1065
- </svg>
1066
- <div class="name">综测表单设置</div>
1067
- <div class="code-name">#icon-grid</div>
1068
- </li>
1069
-
1070
- <li class="dib">
1071
- <svg class="icon svg-icon" aria-hidden="true">
1072
- <use xlink:href="#icon-divider"></use>
1073
- </svg>
1074
- <div class="name">分割线</div>
1075
- <div class="code-name">#icon-divider</div>
1076
- </li>
1077
-
1078
- <li class="dib">
1079
- <svg class="icon svg-icon" aria-hidden="true">
1080
- <use xlink:href="#icon-input"></use>
1081
- </svg>
1082
- <div class="name">单行文本</div>
1083
- <div class="code-name">#icon-input</div>
1084
- </li>
1085
-
1086
- <li class="dib">
1087
- <svg class="icon svg-icon" aria-hidden="true">
1088
- <use xlink:href="#icon-selects"></use>
1089
- </svg>
1090
- <div class="name">多选框</div>
1091
- <div class="code-name">#icon-selects</div>
1092
- </li>
1093
-
1094
- <li class="dib">
1095
- <svg class="icon svg-icon" aria-hidden="true">
1096
- <use xlink:href="#icon-textarea"></use>
1097
- </svg>
1098
- <div class="name">多行文本</div>
1099
- <div class="code-name">#icon-textarea</div>
1100
- </li>
1101
-
1102
- <li class="dib">
1103
- <svg class="icon svg-icon" aria-hidden="true">
1104
- <use xlink:href="#icon-datatable"></use>
1105
- </svg>
1106
- <div class="name">表格</div>
1107
- <div class="code-name">#icon-datatable</div>
1108
- </li>
1109
-
1110
- <li class="dib">
1111
- <svg class="icon svg-icon" aria-hidden="true">
1112
- <use xlink:href="#icon-modal"></use>
1113
- </svg>
1114
- <div class="name">弹窗</div>
1115
- <div class="code-name">#icon-modal</div>
1116
- </li>
1117
-
1118
- <li class="dib">
1119
- <svg class="icon svg-icon" aria-hidden="true">
1120
- <use xlink:href="#icon-date"></use>
1121
- </svg>
1122
- <div class="name">date</div>
1123
- <div class="code-name">#icon-date</div>
1124
- </li>
1125
-
1126
- <li class="dib">
1127
- <svg class="icon svg-icon" aria-hidden="true">
1128
- <use xlink:href="#icon-codeEditor"></use>
1129
- </svg>
1130
- <div class="name">富文本编辑器_缩进</div>
1131
- <div class="code-name">#icon-codeEditor</div>
1132
- </li>
1133
-
1134
- <li class="dib">
1135
- <svg class="icon svg-icon" aria-hidden="true">
1136
- <use xlink:href="#icon-biaodanzujian-biaoge"></use>
1137
- </svg>
1138
- <div class="name">表单组件-表格</div>
1139
- <div class="code-name">#icon-biaodanzujian-biaoge</div>
1140
- </li>
1141
-
1142
- </ul>
1143
- <div class="article markdown">
1144
- <h2 id="symbol-">Symbol 引用</h2>
1145
- <hr>
1146
-
1147
- <p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
1148
- 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p>
1149
- <ul>
1150
- <li>支持多色图标了,不再受单色限制。</li>
1151
- <li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
1152
- <li>兼容性较差,支持 IE9+,及现代浏览器。</li>
1153
- <li>浏览器渲染 SVG 的性能一般,还不如 png。</li>
1154
- </ul>
1155
- <p>使用步骤如下:</p>
1156
- <h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3>
1157
- <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
1158
- </code></pre>
1159
- <h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
1160
- <pre><code class="language-html">&lt;style&gt;
1161
- .icon {
1162
- width: 1em;
1163
- height: 1em;
1164
- vertical-align: -0.15em;
1165
- fill: currentColor;
1166
- overflow: hidden;
1167
- }
1168
- &lt;/style&gt;
1169
- </code></pre>
1170
- <h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
1171
- <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
1172
- &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
1173
- &lt;/svg&gt;
1174
- </code></pre>
1175
- </div>
1176
- </div>
1177
-
1178
- </div>
1179
- </div>
1180
- <script>
1181
- $(document).ready(function () {
1182
- $('.tab-container .content:first').show()
1183
-
1184
- $('#tabs li').click(function (e) {
1185
- var tabContent = $('.tab-container .content')
1186
- var index = $(this).index()
1187
-
1188
- if ($(this).hasClass('active')) {
1189
- return
1190
- } else {
1191
- $('#tabs li').removeClass('active')
1192
- $(this).addClass('active')
1193
-
1194
- tabContent.hide().eq(index).fadeIn()
1195
- }
1196
- })
1197
- })
1198
- </script>
1199
- </body>
1200
- </html>