fan-standard-comp 3.1.3 → 3.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (244) hide show
  1. package/package.json +1 -1
  2. package/dist/f26952c118ab6cdcd23dc0028ee98c11.svg +0 -173
  3. package/dist/fan-standard-comp.umd.js +0 -597
  4. package/dist/fonts/iconfont.eot +0 -0
  5. package/dist/fonts/iconfont.ttf +0 -0
  6. package/dist/fonts/iconfont.woff +0 -0
  7. package/es/ButtonGroup/ButtonList.d.ts +0 -2
  8. package/es/ButtonGroup/ButtonList.js +0 -37
  9. package/es/ButtonGroup/ButtonMenu.d.ts +0 -2
  10. package/es/ButtonGroup/ButtonMenu.js +0 -38
  11. package/es/ButtonGroup/PopConfirmTitle.d.ts +0 -9
  12. package/es/ButtonGroup/PopConfirmTitle.js +0 -37
  13. package/es/ButtonGroup/index.d.ts +0 -30
  14. package/es/ButtonGroup/index.js +0 -374
  15. package/es/ButtonGroup/style/index.less +0 -36
  16. package/es/DragContent/DragBar.js +0 -21
  17. package/es/DragContent/index.d.ts +0 -14
  18. package/es/DragContent/index.js +0 -173
  19. package/es/DragContent/index.less +0 -44
  20. package/es/FormComp/ChunkUploader/api.js +0 -76
  21. package/es/FormComp/ChunkUploader/index.js +0 -391
  22. package/es/FormComp/ChunkUploader/lib.js +0 -96
  23. package/es/FormComp/ChunkUploader/style/style.less +0 -3
  24. package/es/FormComp/ChunkUploader/upload-queue.class.js +0 -167
  25. package/es/FormComp/ChunkUploader/worker.js +0 -23
  26. package/es/FormComp/EditButton/index.d.ts +0 -26
  27. package/es/FormComp/EditButton/index.js +0 -140
  28. package/es/FormComp/FieldComponent/ReUpload.d.ts +0 -3
  29. package/es/FormComp/FieldComponent/ReUpload.js +0 -131
  30. package/es/FormComp/FieldComponent/RefactorTreeSelect.js +0 -251
  31. package/es/FormComp/FieldComponent/TitleNode.d.ts +0 -6
  32. package/es/FormComp/FieldComponent/TitleNode.js +0 -9
  33. package/es/FormComp/FieldComponent/index.d.ts +0 -38
  34. package/es/FormComp/FieldComponent/index.js +0 -413
  35. package/es/FormComp/FieldComponent/setReadonlyValues.js +0 -236
  36. package/es/FormComp/FieldComponent/style/index.less +0 -116
  37. package/es/FormComp/RenderItemGroup/index.d.ts +0 -37
  38. package/es/FormComp/RenderItemGroup/index.js +0 -234
  39. package/es/FormComp/Uploader/index.d.ts +0 -19
  40. package/es/FormComp/Uploader/index.js +0 -275
  41. package/es/FormComp/Uploader/style/index.less +0 -14
  42. package/es/FormComp/Uploader/util.d.ts +0 -8
  43. package/es/FormComp/Uploader/util.js +0 -38
  44. package/es/FormComp/VarTemplate/index.js +0 -293
  45. package/es/FormComp/index.d.ts +0 -1
  46. package/es/FormComp/index.js +0 -1
  47. package/es/NavLeafScroll/index.js +0 -379
  48. package/es/NavLeafScroll/style/index.less +0 -119
  49. package/es/RefactorTree/data.d.ts +0 -7
  50. package/es/RefactorTree/index.d.ts +0 -40
  51. package/es/RefactorTree/index.js +0 -167
  52. package/es/RefactorTree/indexTreeNode.d.ts +0 -39
  53. package/es/RefactorTree/indexTreeNode.js +0 -237
  54. package/es/RefactorTree/style/index.d.ts +0 -1
  55. package/es/RefactorTree/style/index.js +0 -1
  56. package/es/RefactorTree/style/index.less +0 -22
  57. package/es/RefactorTree/util.d.ts +0 -42
  58. package/es/RefactorTree/util.js +0 -187
  59. package/es/SpecIcon/fonts/demo.css +0 -539
  60. package/es/SpecIcon/fonts/demo_index.html +0 -1315
  61. package/es/SpecIcon/fonts/iconfont.css +0 -211
  62. package/es/SpecIcon/fonts/iconfont.eot +0 -0
  63. package/es/SpecIcon/fonts/iconfont.js +0 -41
  64. package/es/SpecIcon/fonts/iconfont.json +0 -352
  65. package/es/SpecIcon/fonts/iconfont.svg +0 -173
  66. package/es/SpecIcon/fonts/iconfont.ttf +0 -0
  67. package/es/SpecIcon/fonts/iconfont.woff +0 -0
  68. package/es/SpecIcon/fonts/iconfont.woff2 +0 -0
  69. package/es/SpecIcon/index.d.ts +0 -17
  70. package/es/SpecIcon/index.js +0 -77
  71. package/es/SpecIcon/style/iconfont.less +0 -213
  72. package/es/SpecIcon/style/index.less +0 -98
  73. package/es/SplitterLayout/Pane.d.ts +0 -13
  74. package/es/SplitterLayout/Pane.js +0 -36
  75. package/es/SplitterLayout/index.js +0 -375
  76. package/es/SplitterLayout/index.less +0 -58
  77. package/es/StandardContent/SplitterLayout/Pane.js +0 -50
  78. package/es/StandardContent/SplitterLayout/index.js +0 -374
  79. package/es/StandardContent/SplitterLayout/index.less +0 -58
  80. package/es/StandardContent/SubfieldContent.d.ts +0 -17
  81. package/es/StandardContent/SubfieldContent.js +0 -41
  82. package/es/StandardContent/WrapperContent.d.ts +0 -13
  83. package/es/StandardContent/WrapperContent.js +0 -29
  84. package/es/StandardContent/data.d.ts +0 -101
  85. package/es/StandardContent/style/index.less +0 -80
  86. package/es/StandardDragModal/index.d.ts +0 -11
  87. package/es/StandardDragModal/index.js +0 -30
  88. package/es/StandardFilter/index.d.ts +0 -35
  89. package/es/StandardFilter/index.js +0 -253
  90. package/es/StandardFilter/style/index.less +0 -62
  91. package/es/StandardForm/ActionList.js +0 -44
  92. package/es/StandardForm/StepForm.d.ts +0 -19
  93. package/es/StandardForm/StepForm.js +0 -267
  94. package/es/StandardForm/TabForm.d.ts +0 -19
  95. package/es/StandardForm/TabForm.js +0 -122
  96. package/es/StandardForm/index.d.ts +0 -32
  97. package/es/StandardForm/index.js +0 -170
  98. package/es/StandardForm/style/index.less +0 -58
  99. package/es/StandardModal/UpdateFormRef.js +0 -18
  100. package/es/StandardModal/index.d.ts +0 -44
  101. package/es/StandardModal/index.js +0 -495
  102. package/es/StandardModal/style/index.less +0 -50
  103. package/es/StandardPanel/index.d.ts +0 -28
  104. package/es/StandardPanel/index.js +0 -134
  105. package/es/StandardPanel/style/index.less +0 -135
  106. package/es/StandardTable/index.d.ts +0 -22
  107. package/es/StandardTable/index.js +0 -126
  108. package/es/StandardTable/style/index.d.ts +0 -1
  109. package/es/StandardTable/style/index.js +0 -1
  110. package/es/StandardTable/style/index.less +0 -206
  111. package/es/components/IconNode/index.d.ts +0 -16
  112. package/es/components/IconNode/index.js +0 -28
  113. package/es/components/index.d.ts +0 -2
  114. package/es/components/index.js +0 -2
  115. package/es/data/func.code.js +0 -112
  116. package/es/data/general.config.js +0 -172
  117. package/es/data/index.js +0 -3
  118. package/es/index.d.ts +0 -24
  119. package/es/index.js +0 -31
  120. package/es/styles/index.less +0 -0
  121. package/es/theme/spec-variable.less +0 -48
  122. package/es/utils/ValueFormat.js +0 -50
  123. package/es/utils/filterPermission.js +0 -111
  124. package/es/utils/getParentNodes.js +0 -215
  125. package/es/utils/index.js +0 -3
  126. package/lib/ButtonGroup/ButtonList.d.ts +0 -2
  127. package/lib/ButtonGroup/ButtonList.js +0 -55
  128. package/lib/ButtonGroup/ButtonMenu.d.ts +0 -2
  129. package/lib/ButtonGroup/ButtonMenu.js +0 -51
  130. package/lib/ButtonGroup/PopConfirmTitle.d.ts +0 -9
  131. package/lib/ButtonGroup/PopConfirmTitle.js +0 -48
  132. package/lib/ButtonGroup/index.d.ts +0 -30
  133. package/lib/ButtonGroup/index.js +0 -405
  134. package/lib/ButtonGroup/style/index.less +0 -36
  135. package/lib/DragContent/DragBar.js +0 -33
  136. package/lib/DragContent/index.d.ts +0 -14
  137. package/lib/DragContent/index.js +0 -191
  138. package/lib/DragContent/index.less +0 -44
  139. package/lib/FormComp/ChunkUploader/api.js +0 -89
  140. package/lib/FormComp/ChunkUploader/index.js +0 -410
  141. package/lib/FormComp/ChunkUploader/lib.js +0 -113
  142. package/lib/FormComp/ChunkUploader/style/style.less +0 -3
  143. package/lib/FormComp/ChunkUploader/upload-queue.class.js +0 -174
  144. package/lib/FormComp/ChunkUploader/worker.js +0 -28
  145. package/lib/FormComp/EditButton/index.d.ts +0 -26
  146. package/lib/FormComp/EditButton/index.js +0 -159
  147. package/lib/FormComp/FieldComponent/ReUpload.d.ts +0 -3
  148. package/lib/FormComp/FieldComponent/ReUpload.js +0 -151
  149. package/lib/FormComp/FieldComponent/RefactorTreeSelect.js +0 -274
  150. package/lib/FormComp/FieldComponent/TitleNode.d.ts +0 -6
  151. package/lib/FormComp/FieldComponent/TitleNode.js +0 -19
  152. package/lib/FormComp/FieldComponent/index.d.ts +0 -38
  153. package/lib/FormComp/FieldComponent/index.js +0 -457
  154. package/lib/FormComp/FieldComponent/setReadonlyValues.js +0 -263
  155. package/lib/FormComp/FieldComponent/style/index.less +0 -116
  156. package/lib/FormComp/RenderItemGroup/index.d.ts +0 -37
  157. package/lib/FormComp/RenderItemGroup/index.js +0 -255
  158. package/lib/FormComp/Uploader/index.d.ts +0 -19
  159. package/lib/FormComp/Uploader/index.js +0 -301
  160. package/lib/FormComp/Uploader/style/index.less +0 -14
  161. package/lib/FormComp/Uploader/util.d.ts +0 -8
  162. package/lib/FormComp/Uploader/util.js +0 -47
  163. package/lib/FormComp/VarTemplate/index.js +0 -308
  164. package/lib/FormComp/index.d.ts +0 -1
  165. package/lib/FormComp/index.js +0 -15
  166. package/lib/NavLeafScroll/index.js +0 -397
  167. package/lib/NavLeafScroll/style/index.less +0 -119
  168. package/lib/RefactorTree/data.d.ts +0 -7
  169. package/lib/RefactorTree/index.d.ts +0 -40
  170. package/lib/RefactorTree/index.js +0 -190
  171. package/lib/RefactorTree/indexTreeNode.d.ts +0 -39
  172. package/lib/RefactorTree/indexTreeNode.js +0 -260
  173. package/lib/RefactorTree/style/index.d.ts +0 -1
  174. package/lib/RefactorTree/style/index.js +0 -3
  175. package/lib/RefactorTree/style/index.less +0 -22
  176. package/lib/RefactorTree/util.d.ts +0 -42
  177. package/lib/RefactorTree/util.js +0 -195
  178. package/lib/SpecIcon/fonts/demo.css +0 -539
  179. package/lib/SpecIcon/fonts/demo_index.html +0 -1315
  180. package/lib/SpecIcon/fonts/iconfont.css +0 -211
  181. package/lib/SpecIcon/fonts/iconfont.eot +0 -0
  182. package/lib/SpecIcon/fonts/iconfont.js +0 -43
  183. package/lib/SpecIcon/fonts/iconfont.json +0 -352
  184. package/lib/SpecIcon/fonts/iconfont.svg +0 -173
  185. package/lib/SpecIcon/fonts/iconfont.ttf +0 -0
  186. package/lib/SpecIcon/fonts/iconfont.woff +0 -0
  187. package/lib/SpecIcon/fonts/iconfont.woff2 +0 -0
  188. package/lib/SpecIcon/index.d.ts +0 -17
  189. package/lib/SpecIcon/index.js +0 -90
  190. package/lib/SpecIcon/style/iconfont.less +0 -213
  191. package/lib/SpecIcon/style/index.less +0 -98
  192. package/lib/SplitterLayout/Pane.d.ts +0 -13
  193. package/lib/SplitterLayout/Pane.js +0 -48
  194. package/lib/SplitterLayout/index.js +0 -386
  195. package/lib/SplitterLayout/index.less +0 -58
  196. package/lib/StandardContent/SplitterLayout/Pane.js +0 -62
  197. package/lib/StandardContent/SplitterLayout/index.js +0 -387
  198. package/lib/StandardContent/SplitterLayout/index.less +0 -58
  199. package/lib/StandardContent/SubfieldContent.d.ts +0 -17
  200. package/lib/StandardContent/SubfieldContent.js +0 -56
  201. package/lib/StandardContent/WrapperContent.d.ts +0 -13
  202. package/lib/StandardContent/WrapperContent.js +0 -43
  203. package/lib/StandardContent/data.d.ts +0 -101
  204. package/lib/StandardContent/style/index.less +0 -80
  205. package/lib/StandardDragModal/index.d.ts +0 -11
  206. package/lib/StandardDragModal/index.js +0 -43
  207. package/lib/StandardFilter/index.d.ts +0 -35
  208. package/lib/StandardFilter/index.js +0 -272
  209. package/lib/StandardFilter/style/index.less +0 -62
  210. package/lib/StandardForm/ActionList.js +0 -57
  211. package/lib/StandardForm/StepForm.d.ts +0 -19
  212. package/lib/StandardForm/StepForm.js +0 -295
  213. package/lib/StandardForm/TabForm.d.ts +0 -19
  214. package/lib/StandardForm/TabForm.js +0 -148
  215. package/lib/StandardForm/index.d.ts +0 -32
  216. package/lib/StandardForm/index.js +0 -197
  217. package/lib/StandardForm/style/index.less +0 -58
  218. package/lib/StandardModal/UpdateFormRef.js +0 -32
  219. package/lib/StandardModal/index.d.ts +0 -44
  220. package/lib/StandardModal/index.js +0 -525
  221. package/lib/StandardModal/style/index.less +0 -50
  222. package/lib/StandardPanel/index.d.ts +0 -28
  223. package/lib/StandardPanel/index.js +0 -155
  224. package/lib/StandardPanel/style/index.less +0 -135
  225. package/lib/StandardTable/index.d.ts +0 -22
  226. package/lib/StandardTable/index.js +0 -143
  227. package/lib/StandardTable/style/index.d.ts +0 -1
  228. package/lib/StandardTable/style/index.js +0 -3
  229. package/lib/StandardTable/style/index.less +0 -206
  230. package/lib/components/IconNode/index.d.ts +0 -16
  231. package/lib/components/IconNode/index.js +0 -39
  232. package/lib/components/index.d.ts +0 -2
  233. package/lib/components/index.js +0 -15
  234. package/lib/data/func.code.js +0 -119
  235. package/lib/data/general.config.js +0 -179
  236. package/lib/data/index.js +0 -23
  237. package/lib/index.d.ts +0 -24
  238. package/lib/index.js +0 -236
  239. package/lib/styles/index.less +0 -0
  240. package/lib/theme/spec-variable.less +0 -48
  241. package/lib/utils/ValueFormat.js +0 -58
  242. package/lib/utils/filterPermission.js +0 -127
  243. package/lib/utils/getParentNodes.js +0 -226
  244. package/lib/utils/index.js +0 -35
package/lib/SpecIcon/fonts/demo_index.html DELETED
@@ -1,1315 +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/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
7
- <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.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=1771828" 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 specifont">&#xe608;</span>
59
- <div class="name">caret-right</div>
60
- <div class="code-name">&amp;#xe608;</div>
61
- </li>
62
-
63
- <li class="dib">
64
- <span class="icon specifont">&#xe60a;</span>
65
- <div class="name">caret-left</div>
66
- <div class="code-name">&amp;#xe60a;</div>
67
- </li>
68
-
69
- <li class="dib">
70
- <span class="icon specifont">&#xe607;</span>
71
- <div class="name">caret-down</div>
72
- <div class="code-name">&amp;#xe607;</div>
73
- </li>
74
-
75
- <li class="dib">
76
- <span class="icon specifont">&#xe616;</span>
77
- <div class="name">caret-up</div>
78
- <div class="code-name">&amp;#xe616;</div>
79
- </li>
80
-
81
- <li class="dib">
82
- <span class="icon specifont">&#xe66e;</span>
83
- <div class="name">edit</div>
84
- <div class="code-name">&amp;#xe66e;</div>
85
- </li>
86
-
87
- <li class="dib">
88
- <span class="icon specifont">&#xe6d0;</span>
89
- <div class="name">下发</div>
90
- <div class="code-name">&amp;#xe6d0;</div>
91
- </li>
92
-
93
- <li class="dib">
94
- <span class="icon specifont">&#xe6e2;</span>
95
- <div class="name">撤销</div>
96
- <div class="code-name">&amp;#xe6e2;</div>
97
- </li>
98
-
99
- <li class="dib">
100
- <span class="icon specifont">&#xe6f3;</span>
101
- <div class="name">重做</div>
102
- <div class="code-name">&amp;#xe6f3;</div>
103
- </li>
104
-
105
- <li class="dib">
106
- <span class="icon specifont">&#xe946;</span>
107
- <div class="name">清空</div>
108
- <div class="code-name">&amp;#xe946;</div>
109
- </li>
110
-
111
- <li class="dib">
112
- <span class="icon specifont">&#xe605;</span>
113
- <div class="name">刷新</div>
114
- <div class="code-name">&amp;#xe605;</div>
115
- </li>
116
-
117
- <li class="dib">
118
- <span class="icon specifont">&#xe667;</span>
119
- <div class="name">指派</div>
120
- <div class="code-name">&amp;#xe667;</div>
121
- </li>
122
-
123
- <li class="dib">
124
- <span class="icon specifont">&#xe611;</span>
125
- <div class="name">详情</div>
126
- <div class="code-name">&amp;#xe611;</div>
127
- </li>
128
-
129
- <li class="dib">
130
- <span class="icon specifont">&#xe602;</span>
131
- <div class="name">查看</div>
132
- <div class="code-name">&amp;#xe602;</div>
133
- </li>
134
-
135
- <li class="dib">
136
- <span class="icon specifont">&#xe665;</span>
137
- <div class="name">用户</div>
138
- <div class="code-name">&amp;#xe665;</div>
139
- </li>
140
-
141
- <li class="dib">
142
- <span class="icon specifont">&#xe673;</span>
143
- <div class="name">操作-退出</div>
144
- <div class="code-name">&amp;#xe673;</div>
145
- </li>
146
-
147
- <li class="dib">
148
- <span class="icon specifont">&#xe606;</span>
149
- <div class="name">切换</div>
150
- <div class="code-name">&amp;#xe606;</div>
151
- </li>
152
-
153
- <li class="dib">
154
- <span class="icon specifont">&#xe666;</span>
155
- <div class="name">角色类型</div>
156
- <div class="code-name">&amp;#xe666;</div>
157
- </li>
158
-
159
- <li class="dib">
160
- <span class="icon specifont">&#xe609;</span>
161
- <div class="name">目录、导航</div>
162
- <div class="code-name">&amp;#xe609;</div>
163
- </li>
164
-
165
- <li class="dib">
166
- <span class="icon specifont">&#xe7eb;</span>
167
- <div class="name">数据目录</div>
168
- <div class="code-name">&amp;#xe7eb;</div>
169
- </li>
170
-
171
- <li class="dib">
172
- <span class="icon specifont">&#xe63b;</span>
173
- <div class="name">上传</div>
174
- <div class="code-name">&amp;#xe63b;</div>
175
- </li>
176
-
177
- <li class="dib">
178
- <span class="icon specifont">&#xe661;</span>
179
- <div class="name">下载</div>
180
- <div class="code-name">&amp;#xe661;</div>
181
- </li>
182
-
183
- <li class="dib">
184
- <span class="icon specifont">&#xe63a;</span>
185
- <div class="name">减号-fill</div>
186
- <div class="code-name">&amp;#xe63a;</div>
187
- </li>
188
-
189
- <li class="dib">
190
- <span class="icon specifont">&#xe638;</span>
191
- <div class="name">减号</div>
192
- <div class="code-name">&amp;#xe638;</div>
193
- </li>
194
-
195
- <li class="dib">
196
- <span class="icon specifont">&#xe662;</span>
197
- <div class="name">warn_fill</div>
198
- <div class="code-name">&amp;#xe662;</div>
199
- </li>
200
-
201
- <li class="dib">
202
- <span class="icon specifont">&#xe664;</span>
203
- <div class="name">warn</div>
204
- <div class="code-name">&amp;#xe664;</div>
205
- </li>
206
-
207
- <li class="dib">
208
- <span class="icon specifont">&#xe690;</span>
209
- <div class="name">question_fill</div>
210
- <div class="code-name">&amp;#xe690;</div>
211
- </li>
212
-
213
- <li class="dib">
214
- <span class="icon specifont">&#xe691;</span>
215
- <div class="name">question</div>
216
- <div class="code-name">&amp;#xe691;</div>
217
- </li>
218
-
219
- <li class="dib">
220
- <span class="icon specifont">&#xe604;</span>
221
- <div class="name">设置</div>
222
- <div class="code-name">&amp;#xe604;</div>
223
- </li>
224
-
225
- <li class="dib">
226
- <span class="icon specifont">&#xe74b;</span>
227
- <div class="name">删除</div>
228
- <div class="code-name">&amp;#xe74b;</div>
229
- </li>
230
-
231
- <li class="dib">
232
- <span class="icon specifont">&#xe74c;</span>
233
- <div class="name">设置</div>
234
- <div class="code-name">&amp;#xe74c;</div>
235
- </li>
236
-
237
- <li class="dib">
238
- <span class="icon specifont">&#xe752;</span>
239
- <div class="name">搜索</div>
240
- <div class="code-name">&amp;#xe752;</div>
241
- </li>
242
-
243
- <li class="dib">
244
- <span class="icon specifont">&#xe723;</span>
245
- <div class="name">关闭1</div>
246
- <div class="code-name">&amp;#xe723;</div>
247
- </li>
248
-
249
- <li class="dib">
250
- <span class="icon specifont">&#xe724;</span>
251
- <div class="name">关闭2-fill</div>
252
- <div class="code-name">&amp;#xe724;</div>
253
- </li>
254
-
255
- <li class="dib">
256
- <span class="icon specifont">&#xe725;</span>
257
- <div class="name">关闭2</div>
258
- <div class="code-name">&amp;#xe725;</div>
259
- </li>
260
-
261
- <li class="dib">
262
- <span class="icon specifont">&#xe726;</span>
263
- <div class="name">加号</div>
264
- <div class="code-name">&amp;#xe726;</div>
265
- </li>
266
-
267
- <li class="dib">
268
- <span class="icon specifont">&#xe727;</span>
269
- <div class="name">加号1</div>
270
- <div class="code-name">&amp;#xe727;</div>
271
- </li>
272
-
273
- <li class="dib">
274
- <span class="icon specifont">&#xe728;</span>
275
- <div class="name">加号2-fill</div>
276
- <div class="code-name">&amp;#xe728;</div>
277
- </li>
278
-
279
- <li class="dib">
280
- <span class="icon specifont">&#xe729;</span>
281
- <div class="name">减号</div>
282
- <div class="code-name">&amp;#xe729;</div>
283
- </li>
284
-
285
- <li class="dib">
286
- <span class="icon specifont">&#xe72a;</span>
287
- <div class="name">提示-fill</div>
288
- <div class="code-name">&amp;#xe72a;</div>
289
- </li>
290
-
291
- <li class="dib">
292
- <span class="icon specifont">&#xe72b;</span>
293
- <div class="name">提示</div>
294
- <div class="code-name">&amp;#xe72b;</div>
295
- </li>
296
-
297
- <li class="dib">
298
- <span class="icon specifont">&#xe72e;</span>
299
- <div class="name">选择</div>
300
- <div class="code-name">&amp;#xe72e;</div>
301
- </li>
302
-
303
- <li class="dib">
304
- <span class="icon specifont">&#xe730;</span>
305
- <div class="name">圆形选中-fill</div>
306
- <div class="code-name">&amp;#xe730;</div>
307
- </li>
308
-
309
- <li class="dib">
310
- <span class="icon specifont">&#xe731;</span>
311
- <div class="name">圆形选中</div>
312
- <div class="code-name">&amp;#xe731;</div>
313
- </li>
314
-
315
- <li class="dib">
316
- <span class="icon specifont">&#xe76e;</span>
317
- <div class="name">向上2</div>
318
- <div class="code-name">&amp;#xe76e;</div>
319
- </li>
320
-
321
- <li class="dib">
322
- <span class="icon specifont">&#xe772;</span>
323
- <div class="name">向下2</div>
324
- <div class="code-name">&amp;#xe772;</div>
325
- </li>
326
-
327
- <li class="dib">
328
- <span class="icon specifont">&#xe775;</span>
329
- <div class="name">向右1</div>
330
- <div class="code-name">&amp;#xe775;</div>
331
- </li>
332
-
333
- <li class="dib">
334
- <span class="icon specifont">&#xe779;</span>
335
- <div class="name">向左1</div>
336
- <div class="code-name">&amp;#xe779;</div>
337
- </li>
338
-
339
- <li class="dib">
340
- <span class="icon specifont">&#xe639;</span>
341
- <div class="name">用户</div>
342
- <div class="code-name">&amp;#xe639;</div>
343
- </li>
344
-
345
- <li class="dib">
346
- <span class="icon specifont">&#xe60f;</span>
347
- <div class="name">密码</div>
348
- <div class="code-name">&amp;#xe60f;</div>
349
- </li>
350
-
351
- </ul>
352
- <div class="article markdown">
353
- <h2 id="unicode-">Unicode 引用</h2>
354
- <hr>
355
-
356
- <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
357
- <ul>
358
- <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
359
- <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
360
- </ul>
361
- <blockquote>
362
- <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
363
- </blockquote>
364
- <p>Unicode 使用步骤如下：</p>
365
- <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
366
- <pre><code class="language-css"
367
- >@font-face {
368
- font-family: 'specifont';
369
- src: url('iconfont.woff2?t=1620615667832') format('woff2'),
370
- url('iconfont.woff?t=1620615667832') format('woff'),
371
- url('iconfont.ttf?t=1620615667832') format('truetype');
372
- }
373
- </code></pre>
374
- <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
375
- <pre><code class="language-css"
376
- >.specifont {
377
- font-family: "specifont" !important;
378
- font-size: 16px;
379
- font-style: normal;
380
- -webkit-font-smoothing: antialiased;
381
- -moz-osx-font-smoothing: grayscale;
382
- }
383
- </code></pre>
384
- <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
385
- <pre>
386
- <code class="language-html"
387
- >&lt;span class="specifont"&gt;&amp;#x33;&lt;/span&gt;
388
- </code></pre>
389
- <blockquote>
390
- <p>"specifont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
391
- </blockquote>
392
- </div>
393
- </div>
394
- <div class="content font-class">
395
- <ul class="icon_lists dib-box">
396
-
397
- <li class="dib">
398
- <span class="icon specifont speci-caret-right"></span>
399
- <div class="name">
400
- caret-right
401
- </div>
402
- <div class="code-name">.speci-caret-right
403
- </div>
404
- </li>
405
-
406
- <li class="dib">
407
- <span class="icon specifont speci-caret-left"></span>
408
- <div class="name">
409
- caret-left
410
- </div>
411
- <div class="code-name">.speci-caret-left
412
- </div>
413
- </li>
414
-
415
- <li class="dib">
416
- <span class="icon specifont speci-caret-down"></span>
417
- <div class="name">
418
- caret-down
419
- </div>
420
- <div class="code-name">.speci-caret-down
421
- </div>
422
- </li>
423
-
424
- <li class="dib">
425
- <span class="icon specifont speci-caret-up"></span>
426
- <div class="name">
427
- caret-up
428
- </div>
429
- <div class="code-name">.speci-caret-up
430
- </div>
431
- </li>
432
-
433
- <li class="dib">
434
- <span class="icon specifont speci-edit"></span>
435
- <div class="name">
436
- edit
437
- </div>
438
- <div class="code-name">.speci-edit
439
- </div>
440
- </li>
441
-
442
- <li class="dib">
443
- <span class="icon specifont speci-issue"></span>
444
- <div class="name">
445
- 下发
446
- </div>
447
- <div class="code-name">.speci-issue
448
- </div>
449
- </li>
450
-
451
- <li class="dib">
452
- <span class="icon specifont speci-redo"></span>
453
- <div class="name">
454
- 撤销
455
- </div>
456
- <div class="code-name">.speci-redo
457
- </div>
458
- </li>
459
-
460
- <li class="dib">
461
- <span class="icon specifont speci-revoke"></span>
462
- <div class="name">
463
- 重做
464
- </div>
465
- <div class="code-name">.speci-revoke
466
- </div>
467
- </li>
468
-
469
- <li class="dib">
470
- <span class="icon specifont speci-clean"></span>
471
- <div class="name">
472
- 清空
473
- </div>
474
- <div class="code-name">.speci-clean
475
- </div>
476
- </li>
477
-
478
- <li class="dib">
479
- <span class="icon specifont speci-refresh"></span>
480
- <div class="name">
481
- 刷新
482
- </div>
483
- <div class="code-name">.speci-refresh
484
- </div>
485
- </li>
486
-
487
- <li class="dib">
488
- <span class="icon specifont speci-assign"></span>
489
- <div class="name">
490
- 指派
491
- </div>
492
- <div class="code-name">.speci-assign
493
- </div>
494
- </li>
495
-
496
- <li class="dib">
497
- <span class="icon specifont speci-detail"></span>
498
- <div class="name">
499
- 详情
500
- </div>
501
- <div class="code-name">.speci-detail
502
- </div>
503
- </li>
504
-
505
- <li class="dib">
506
- <span class="icon specifont speci-eye"></span>
507
- <div class="name">
508
- 查看
509
- </div>
510
- <div class="code-name">.speci-eye
511
- </div>
512
- </li>
513
-
514
- <li class="dib">
515
- <span class="icon specifont speci-user-o"></span>
516
- <div class="name">
517
- 用户
518
- </div>
519
- <div class="code-name">.speci-user-o
520
- </div>
521
- </li>
522
-
523
- <li class="dib">
524
- <span class="icon specifont speci-exit"></span>
525
- <div class="name">
526
- 操作-退出
527
- </div>
528
- <div class="code-name">.speci-exit
529
- </div>
530
- </li>
531
-
532
- <li class="dib">
533
- <span class="icon specifont speci-exchange"></span>
534
- <div class="name">
535
- 切换
536
- </div>
537
- <div class="code-name">.speci-exchange
538
- </div>
539
- </li>
540
-
541
- <li class="dib">
542
- <span class="icon specifont speci-role-ex"></span>
543
- <div class="name">
544
- 角色类型
545
- </div>
546
- <div class="code-name">.speci-role-ex
547
- </div>
548
- </li>
549
-
550
- <li class="dib">
551
- <span class="icon specifont speci-menu"></span>
552
- <div class="name">
553
- 目录、导航
554
- </div>
555
- <div class="code-name">.speci-menu
556
- </div>
557
- </li>
558
-
559
- <li class="dib">
560
- <span class="icon specifont speci-folder"></span>
561
- <div class="name">
562
- 数据目录
563
- </div>
564
- <div class="code-name">.speci-folder
565
- </div>
566
- </li>
567
-
568
- <li class="dib">
569
- <span class="icon specifont speci-upload"></span>
570
- <div class="name">
571
- 上传
572
- </div>
573
- <div class="code-name">.speci-upload
574
- </div>
575
- </li>
576
-
577
- <li class="dib">
578
- <span class="icon specifont speci-download"></span>
579
- <div class="name">
580
- 下载
581
- </div>
582
- <div class="code-name">.speci-download
583
- </div>
584
- </li>
585
-
586
- <li class="dib">
587
- <span class="icon specifont speci-minus-fill"></span>
588
- <div class="name">
589
- 减号-fill
590
- </div>
591
- <div class="code-name">.speci-minus-fill
592
- </div>
593
- </li>
594
-
595
- <li class="dib">
596
- <span class="icon specifont speci-minus-o"></span>
597
- <div class="name">
598
- 减号
599
- </div>
600
- <div class="code-name">.speci-minus-o
601
- </div>
602
- </li>
603
-
604
- <li class="dib">
605
- <span class="icon specifont speci-warn-fill"></span>
606
- <div class="name">
607
- warn_fill
608
- </div>
609
- <div class="code-name">.speci-warn-fill
610
- </div>
611
- </li>
612
-
613
- <li class="dib">
614
- <span class="icon specifont speci-warn"></span>
615
- <div class="name">
616
- warn
617
- </div>
618
- <div class="code-name">.speci-warn
619
- </div>
620
- </li>
621
-
622
- <li class="dib">
623
- <span class="icon specifont speci-question-fill"></span>
624
- <div class="name">
625
- question_fill
626
- </div>
627
- <div class="code-name">.speci-question-fill
628
- </div>
629
- </li>
630
-
631
- <li class="dib">
632
- <span class="icon specifont speci-question"></span>
633
- <div class="name">
634
- question
635
- </div>
636
- <div class="code-name">.speci-question
637
- </div>
638
- </li>
639
-
640
- <li class="dib">
641
- <span class="icon specifont speci-setting-fill"></span>
642
- <div class="name">
643
- 设置
644
- </div>
645
- <div class="code-name">.speci-setting-fill
646
- </div>
647
- </li>
648
-
649
- <li class="dib">
650
- <span class="icon specifont speci-delete"></span>
651
- <div class="name">
652
- 删除
653
- </div>
654
- <div class="code-name">.speci-delete
655
- </div>
656
- </li>
657
-
658
- <li class="dib">
659
- <span class="icon specifont speci-setting"></span>
660
- <div class="name">
661
- 设置
662
- </div>
663
- <div class="code-name">.speci-setting
664
- </div>
665
- </li>
666
-
667
- <li class="dib">
668
- <span class="icon specifont speci-search"></span>
669
- <div class="name">
670
- 搜索
671
- </div>
672
- <div class="code-name">.speci-search
673
- </div>
674
- </li>
675
-
676
- <li class="dib">
677
- <span class="icon specifont speci-close"></span>
678
- <div class="name">
679
- 关闭1
680
- </div>
681
- <div class="code-name">.speci-close
682
- </div>
683
- </li>
684
-
685
- <li class="dib">
686
- <span class="icon specifont speci-close-fill"></span>
687
- <div class="name">
688
- 关闭2-fill
689
- </div>
690
- <div class="code-name">.speci-close-fill
691
- </div>
692
- </li>
693
-
694
- <li class="dib">
695
- <span class="icon specifont speci-close-o"></span>
696
- <div class="name">
697
- 关闭2
698
- </div>
699
- <div class="code-name">.speci-close-o
700
- </div>
701
- </li>
702
-
703
- <li class="dib">
704
- <span class="icon specifont speci-plus-o"></span>
705
- <div class="name">
706
- 加号
707
- </div>
708
- <div class="code-name">.speci-plus-o
709
- </div>
710
- </li>
711
-
712
- <li class="dib">
713
- <span class="icon specifont speci-plus"></span>
714
- <div class="name">
715
- 加号1
716
- </div>
717
- <div class="code-name">.speci-plus
718
- </div>
719
- </li>
720
-
721
- <li class="dib">
722
- <span class="icon specifont speci-plus-fill"></span>
723
- <div class="name">
724
- 加号2-fill
725
- </div>
726
- <div class="code-name">.speci-plus-fill
727
- </div>
728
- </li>
729
-
730
- <li class="dib">
731
- <span class="icon specifont speci-minus"></span>
732
- <div class="name">
733
- 减号
734
- </div>
735
- <div class="code-name">.speci-minus
736
- </div>
737
- </li>
738
-
739
- <li class="dib">
740
- <span class="icon specifont speci-info-fill"></span>
741
- <div class="name">
742
- 提示-fill
743
- </div>
744
- <div class="code-name">.speci-info-fill
745
- </div>
746
- </li>
747
-
748
- <li class="dib">
749
- <span class="icon specifont speci-info"></span>
750
- <div class="name">
751
- 提示
752
- </div>
753
- <div class="code-name">.speci-info
754
- </div>
755
- </li>
756
-
757
- <li class="dib">
758
- <span class="icon specifont speci-check-o"></span>
759
- <div class="name">
760
- 选择
761
- </div>
762
- <div class="code-name">.speci-check-o
763
- </div>
764
- </li>
765
-
766
- <li class="dib">
767
- <span class="icon specifont speci-check-fill"></span>
768
- <div class="name">
769
- 圆形选中-fill
770
- </div>
771
- <div class="code-name">.speci-check-fill
772
- </div>
773
- </li>
774
-
775
- <li class="dib">
776
- <span class="icon specifont speci-check"></span>
777
- <div class="name">
778
- 圆形选中
779
- </div>
780
- <div class="code-name">.speci-check
781
- </div>
782
- </li>
783
-
784
- <li class="dib">
785
- <span class="icon specifont speci-up"></span>
786
- <div class="name">
787
- 向上2
788
- </div>
789
- <div class="code-name">.speci-up
790
- </div>
791
- </li>
792
-
793
- <li class="dib">
794
- <span class="icon specifont speci-down"></span>
795
- <div class="name">
796
- 向下2
797
- </div>
798
- <div class="code-name">.speci-down
799
- </div>
800
- </li>
801
-
802
- <li class="dib">
803
- <span class="icon specifont speci-right"></span>
804
- <div class="name">
805
- 向右1
806
- </div>
807
- <div class="code-name">.speci-right
808
- </div>
809
- </li>
810
-
811
- <li class="dib">
812
- <span class="icon specifont speci-left"></span>
813
- <div class="name">
814
- 向左1
815
- </div>
816
- <div class="code-name">.speci-left
817
- </div>
818
- </li>
819
-
820
- <li class="dib">
821
- <span class="icon specifont speci-user"></span>
822
- <div class="name">
823
- 用户
824
- </div>
825
- <div class="code-name">.speci-user
826
- </div>
827
- </li>
828
-
829
- <li class="dib">
830
- <span class="icon specifont speci-password"></span>
831
- <div class="name">
832
- 密码
833
- </div>
834
- <div class="code-name">.speci-password
835
- </div>
836
- </li>
837
-
838
- </ul>
839
- <div class="article markdown">
840
- <h2 id="font-class-">font-class 引用</h2>
841
- <hr>
842
-
843
- <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
844
- <p>与 Unicode 使用方式相比，具有如下特点：</p>
845
- <ul>
846
- <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
847
- <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
848
- </ul>
849
- <p>使用步骤如下：</p>
850
- <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
851
- <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
852
- </code></pre>
853
- <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
854
- <pre><code class="language-html">&lt;span class="specifont speci-xxx"&gt;&lt;/span&gt;
855
- </code></pre>
856
- <blockquote>
857
- <p>"
858
- specifont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
859
- </blockquote>
860
- </div>
861
- </div>
862
- <div class="content symbol">
863
- <ul class="icon_lists dib-box">
864
-
865
- <li class="dib">
866
- <svg class="icon svg-icon" aria-hidden="true">
867
- <use xlink:href="#speci-caret-right"></use>
868
- </svg>
869
- <div class="name">caret-right</div>
870
- <div class="code-name">#speci-caret-right</div>
871
- </li>
872
-
873
- <li class="dib">
874
- <svg class="icon svg-icon" aria-hidden="true">
875
- <use xlink:href="#speci-caret-left"></use>
876
- </svg>
877
- <div class="name">caret-left</div>
878
- <div class="code-name">#speci-caret-left</div>
879
- </li>
880
-
881
- <li class="dib">
882
- <svg class="icon svg-icon" aria-hidden="true">
883
- <use xlink:href="#speci-caret-down"></use>
884
- </svg>
885
- <div class="name">caret-down</div>
886
- <div class="code-name">#speci-caret-down</div>
887
- </li>
888
-
889
- <li class="dib">
890
- <svg class="icon svg-icon" aria-hidden="true">
891
- <use xlink:href="#speci-caret-up"></use>
892
- </svg>
893
- <div class="name">caret-up</div>
894
- <div class="code-name">#speci-caret-up</div>
895
- </li>
896
-
897
- <li class="dib">
898
- <svg class="icon svg-icon" aria-hidden="true">
899
- <use xlink:href="#speci-edit"></use>
900
- </svg>
901
- <div class="name">edit</div>
902
- <div class="code-name">#speci-edit</div>
903
- </li>
904
-
905
- <li class="dib">
906
- <svg class="icon svg-icon" aria-hidden="true">
907
- <use xlink:href="#speci-issue"></use>
908
- </svg>
909
- <div class="name">下发</div>
910
- <div class="code-name">#speci-issue</div>
911
- </li>
912
-
913
- <li class="dib">
914
- <svg class="icon svg-icon" aria-hidden="true">
915
- <use xlink:href="#speci-redo"></use>
916
- </svg>
917
- <div class="name">撤销</div>
918
- <div class="code-name">#speci-redo</div>
919
- </li>
920
-
921
- <li class="dib">
922
- <svg class="icon svg-icon" aria-hidden="true">
923
- <use xlink:href="#speci-revoke"></use>
924
- </svg>
925
- <div class="name">重做</div>
926
- <div class="code-name">#speci-revoke</div>
927
- </li>
928
-
929
- <li class="dib">
930
- <svg class="icon svg-icon" aria-hidden="true">
931
- <use xlink:href="#speci-clean"></use>
932
- </svg>
933
- <div class="name">清空</div>
934
- <div class="code-name">#speci-clean</div>
935
- </li>
936
-
937
- <li class="dib">
938
- <svg class="icon svg-icon" aria-hidden="true">
939
- <use xlink:href="#speci-refresh"></use>
940
- </svg>
941
- <div class="name">刷新</div>
942
- <div class="code-name">#speci-refresh</div>
943
- </li>
944
-
945
- <li class="dib">
946
- <svg class="icon svg-icon" aria-hidden="true">
947
- <use xlink:href="#speci-assign"></use>
948
- </svg>
949
- <div class="name">指派</div>
950
- <div class="code-name">#speci-assign</div>
951
- </li>
952
-
953
- <li class="dib">
954
- <svg class="icon svg-icon" aria-hidden="true">
955
- <use xlink:href="#speci-detail"></use>
956
- </svg>
957
- <div class="name">详情</div>
958
- <div class="code-name">#speci-detail</div>
959
- </li>
960
-
961
- <li class="dib">
962
- <svg class="icon svg-icon" aria-hidden="true">
963
- <use xlink:href="#speci-eye"></use>
964
- </svg>
965
- <div class="name">查看</div>
966
- <div class="code-name">#speci-eye</div>
967
- </li>
968
-
969
- <li class="dib">
970
- <svg class="icon svg-icon" aria-hidden="true">
971
- <use xlink:href="#speci-user-o"></use>
972
- </svg>
973
- <div class="name">用户</div>
974
- <div class="code-name">#speci-user-o</div>
975
- </li>
976
-
977
- <li class="dib">
978
- <svg class="icon svg-icon" aria-hidden="true">
979
- <use xlink:href="#speci-exit"></use>
980
- </svg>
981
- <div class="name">操作-退出</div>
982
- <div class="code-name">#speci-exit</div>
983
- </li>
984
-
985
- <li class="dib">
986
- <svg class="icon svg-icon" aria-hidden="true">
987
- <use xlink:href="#speci-exchange"></use>
988
- </svg>
989
- <div class="name">切换</div>
990
- <div class="code-name">#speci-exchange</div>
991
- </li>
992
-
993
- <li class="dib">
994
- <svg class="icon svg-icon" aria-hidden="true">
995
- <use xlink:href="#speci-role-ex"></use>
996
- </svg>
997
- <div class="name">角色类型</div>
998
- <div class="code-name">#speci-role-ex</div>
999
- </li>
1000
-
1001
- <li class="dib">
1002
- <svg class="icon svg-icon" aria-hidden="true">
1003
- <use xlink:href="#speci-menu"></use>
1004
- </svg>
1005
- <div class="name">目录、导航</div>
1006
- <div class="code-name">#speci-menu</div>
1007
- </li>
1008
-
1009
- <li class="dib">
1010
- <svg class="icon svg-icon" aria-hidden="true">
1011
- <use xlink:href="#speci-folder"></use>
1012
- </svg>
1013
- <div class="name">数据目录</div>
1014
- <div class="code-name">#speci-folder</div>
1015
- </li>
1016
-
1017
- <li class="dib">
1018
- <svg class="icon svg-icon" aria-hidden="true">
1019
- <use xlink:href="#speci-upload"></use>
1020
- </svg>
1021
- <div class="name">上传</div>
1022
- <div class="code-name">#speci-upload</div>
1023
- </li>
1024
-
1025
- <li class="dib">
1026
- <svg class="icon svg-icon" aria-hidden="true">
1027
- <use xlink:href="#speci-download"></use>
1028
- </svg>
1029
- <div class="name">下载</div>
1030
- <div class="code-name">#speci-download</div>
1031
- </li>
1032
-
1033
- <li class="dib">
1034
- <svg class="icon svg-icon" aria-hidden="true">
1035
- <use xlink:href="#speci-minus-fill"></use>
1036
- </svg>
1037
- <div class="name">减号-fill</div>
1038
- <div class="code-name">#speci-minus-fill</div>
1039
- </li>
1040
-
1041
- <li class="dib">
1042
- <svg class="icon svg-icon" aria-hidden="true">
1043
- <use xlink:href="#speci-minus-o"></use>
1044
- </svg>
1045
- <div class="name">减号</div>
1046
- <div class="code-name">#speci-minus-o</div>
1047
- </li>
1048
-
1049
- <li class="dib">
1050
- <svg class="icon svg-icon" aria-hidden="true">
1051
- <use xlink:href="#speci-warn-fill"></use>
1052
- </svg>
1053
- <div class="name">warn_fill</div>
1054
- <div class="code-name">#speci-warn-fill</div>
1055
- </li>
1056
-
1057
- <li class="dib">
1058
- <svg class="icon svg-icon" aria-hidden="true">
1059
- <use xlink:href="#speci-warn"></use>
1060
- </svg>
1061
- <div class="name">warn</div>
1062
- <div class="code-name">#speci-warn</div>
1063
- </li>
1064
-
1065
- <li class="dib">
1066
- <svg class="icon svg-icon" aria-hidden="true">
1067
- <use xlink:href="#speci-question-fill"></use>
1068
- </svg>
1069
- <div class="name">question_fill</div>
1070
- <div class="code-name">#speci-question-fill</div>
1071
- </li>
1072
-
1073
- <li class="dib">
1074
- <svg class="icon svg-icon" aria-hidden="true">
1075
- <use xlink:href="#speci-question"></use>
1076
- </svg>
1077
- <div class="name">question</div>
1078
- <div class="code-name">#speci-question</div>
1079
- </li>
1080
-
1081
- <li class="dib">
1082
- <svg class="icon svg-icon" aria-hidden="true">
1083
- <use xlink:href="#speci-setting-fill"></use>
1084
- </svg>
1085
- <div class="name">设置</div>
1086
- <div class="code-name">#speci-setting-fill</div>
1087
- </li>
1088
-
1089
- <li class="dib">
1090
- <svg class="icon svg-icon" aria-hidden="true">
1091
- <use xlink:href="#speci-delete"></use>
1092
- </svg>
1093
- <div class="name">删除</div>
1094
- <div class="code-name">#speci-delete</div>
1095
- </li>
1096
-
1097
- <li class="dib">
1098
- <svg class="icon svg-icon" aria-hidden="true">
1099
- <use xlink:href="#speci-setting"></use>
1100
- </svg>
1101
- <div class="name">设置</div>
1102
- <div class="code-name">#speci-setting</div>
1103
- </li>
1104
-
1105
- <li class="dib">
1106
- <svg class="icon svg-icon" aria-hidden="true">
1107
- <use xlink:href="#speci-search"></use>
1108
- </svg>
1109
- <div class="name">搜索</div>
1110
- <div class="code-name">#speci-search</div>
1111
- </li>
1112
-
1113
- <li class="dib">
1114
- <svg class="icon svg-icon" aria-hidden="true">
1115
- <use xlink:href="#speci-close"></use>
1116
- </svg>
1117
- <div class="name">关闭1</div>
1118
- <div class="code-name">#speci-close</div>
1119
- </li>
1120
-
1121
- <li class="dib">
1122
- <svg class="icon svg-icon" aria-hidden="true">
1123
- <use xlink:href="#speci-close-fill"></use>
1124
- </svg>
1125
- <div class="name">关闭2-fill</div>
1126
- <div class="code-name">#speci-close-fill</div>
1127
- </li>
1128
-
1129
- <li class="dib">
1130
- <svg class="icon svg-icon" aria-hidden="true">
1131
- <use xlink:href="#speci-close-o"></use>
1132
- </svg>
1133
- <div class="name">关闭2</div>
1134
- <div class="code-name">#speci-close-o</div>
1135
- </li>
1136
-
1137
- <li class="dib">
1138
- <svg class="icon svg-icon" aria-hidden="true">
1139
- <use xlink:href="#speci-plus-o"></use>
1140
- </svg>
1141
- <div class="name">加号</div>
1142
- <div class="code-name">#speci-plus-o</div>
1143
- </li>
1144
-
1145
- <li class="dib">
1146
- <svg class="icon svg-icon" aria-hidden="true">
1147
- <use xlink:href="#speci-plus"></use>
1148
- </svg>
1149
- <div class="name">加号1</div>
1150
- <div class="code-name">#speci-plus</div>
1151
- </li>
1152
-
1153
- <li class="dib">
1154
- <svg class="icon svg-icon" aria-hidden="true">
1155
- <use xlink:href="#speci-plus-fill"></use>
1156
- </svg>
1157
- <div class="name">加号2-fill</div>
1158
- <div class="code-name">#speci-plus-fill</div>
1159
- </li>
1160
-
1161
- <li class="dib">
1162
- <svg class="icon svg-icon" aria-hidden="true">
1163
- <use xlink:href="#speci-minus"></use>
1164
- </svg>
1165
- <div class="name">减号</div>
1166
- <div class="code-name">#speci-minus</div>
1167
- </li>
1168
-
1169
- <li class="dib">
1170
- <svg class="icon svg-icon" aria-hidden="true">
1171
- <use xlink:href="#speci-info-fill"></use>
1172
- </svg>
1173
- <div class="name">提示-fill</div>
1174
- <div class="code-name">#speci-info-fill</div>
1175
- </li>
1176
-
1177
- <li class="dib">
1178
- <svg class="icon svg-icon" aria-hidden="true">
1179
- <use xlink:href="#speci-info"></use>
1180
- </svg>
1181
- <div class="name">提示</div>
1182
- <div class="code-name">#speci-info</div>
1183
- </li>
1184
-
1185
- <li class="dib">
1186
- <svg class="icon svg-icon" aria-hidden="true">
1187
- <use xlink:href="#speci-check-o"></use>
1188
- </svg>
1189
- <div class="name">选择</div>
1190
- <div class="code-name">#speci-check-o</div>
1191
- </li>
1192
-
1193
- <li class="dib">
1194
- <svg class="icon svg-icon" aria-hidden="true">
1195
- <use xlink:href="#speci-check-fill"></use>
1196
- </svg>
1197
- <div class="name">圆形选中-fill</div>
1198
- <div class="code-name">#speci-check-fill</div>
1199
- </li>
1200
-
1201
- <li class="dib">
1202
- <svg class="icon svg-icon" aria-hidden="true">
1203
- <use xlink:href="#speci-check"></use>
1204
- </svg>
1205
- <div class="name">圆形选中</div>
1206
- <div class="code-name">#speci-check</div>
1207
- </li>
1208
-
1209
- <li class="dib">
1210
- <svg class="icon svg-icon" aria-hidden="true">
1211
- <use xlink:href="#speci-up"></use>
1212
- </svg>
1213
- <div class="name">向上2</div>
1214
- <div class="code-name">#speci-up</div>
1215
- </li>
1216
-
1217
- <li class="dib">
1218
- <svg class="icon svg-icon" aria-hidden="true">
1219
- <use xlink:href="#speci-down"></use>
1220
- </svg>
1221
- <div class="name">向下2</div>
1222
- <div class="code-name">#speci-down</div>
1223
- </li>
1224
-
1225
- <li class="dib">
1226
- <svg class="icon svg-icon" aria-hidden="true">
1227
- <use xlink:href="#speci-right"></use>
1228
- </svg>
1229
- <div class="name">向右1</div>
1230
- <div class="code-name">#speci-right</div>
1231
- </li>
1232
-
1233
- <li class="dib">
1234
- <svg class="icon svg-icon" aria-hidden="true">
1235
- <use xlink:href="#speci-left"></use>
1236
- </svg>
1237
- <div class="name">向左1</div>
1238
- <div class="code-name">#speci-left</div>
1239
- </li>
1240
-
1241
- <li class="dib">
1242
- <svg class="icon svg-icon" aria-hidden="true">
1243
- <use xlink:href="#speci-user"></use>
1244
- </svg>
1245
- <div class="name">用户</div>
1246
- <div class="code-name">#speci-user</div>
1247
- </li>
1248
-
1249
- <li class="dib">
1250
- <svg class="icon svg-icon" aria-hidden="true">
1251
- <use xlink:href="#speci-password"></use>
1252
- </svg>
1253
- <div class="name">密码</div>
1254
- <div class="code-name">#speci-password</div>
1255
- </li>
1256
-
1257
- </ul>
1258
- <div class="article markdown">
1259
- <h2 id="symbol-">Symbol 引用</h2>
1260
- <hr>
1261
-
1262
- <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
1263
- 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
1264
- <ul>
1265
- <li>支持多色图标了，不再受单色限制。</li>
1266
- <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
1267
- <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
1268
- <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
1269
- </ul>
1270
- <p>使用步骤如下：</p>
1271
- <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
1272
- <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
1273
- </code></pre>
1274
- <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
1275
- <pre><code class="language-html">&lt;style&gt;
1276
- .icon {
1277
- width: 1em;
1278
- height: 1em;
1279
- vertical-align: -0.15em;
1280
- fill: currentColor;
1281
- overflow: hidden;
1282
- }
1283
- &lt;/style&gt;
1284
- </code></pre>
1285
- <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
1286
- <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
1287
- &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
1288
- &lt;/svg&gt;
1289
- </code></pre>
1290
- </div>
1291
- </div>
1292
-
1293
- </div>
1294
- </div>
1295
- <script>
1296
- $(document).ready(function () {
1297
- $('.tab-container .content:first').show()
1298
-
1299
- $('#tabs li').click(function (e) {
1300
- var tabContent = $('.tab-container .content')
1301
- var index = $(this).index()
1302
-
1303
- if ($(this).hasClass('active')) {
1304
- return
1305
- } else {
1306
- $('#tabs li').removeClass('active')
1307
- $(this).addClass('active')
1308
-
1309
- tabContent.hide().eq(index).fadeIn()
1310
- }
1311
- })
1312
- })
1313
- </script>
1314
- </body>
1315
- </html>