abl-ui 0.0.1 → 0.0.3
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.
- package/lib/abl-ui.es.js +3794 -35
- package/lib/abl-ui.umd.js +29 -1
- package/lib/iconfont/demo.css +539 -0
- package/lib/iconfont/demo_index.html +536 -0
- package/lib/iconfont/iconfont.css +78 -0
- package/lib/iconfont/iconfont.eot +0 -0
- package/lib/iconfont/iconfont.js +1 -0
- package/lib/iconfont/iconfont.json +114 -0
- package/lib/iconfont/iconfont.svg +49 -0
- package/lib/iconfont/iconfont.ttf +0 -0
- package/lib/iconfont/iconfont.woff +0 -0
- package/lib/iconfont/iconfont.woff2 +0 -0
- package/lib/style.css +1 -1
- package/package.json +3 -3
|
@@ -0,0 +1,536 @@
|
|
|
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=4457906" 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-abl"></span>
|
|
59
|
+
<div class="name">右箭头</div>
|
|
60
|
+
<div class="code-name">&#xe629;</div>
|
|
61
|
+
</li>
|
|
62
|
+
|
|
63
|
+
<li class="dib">
|
|
64
|
+
<span class="icon iconfont-abl"></span>
|
|
65
|
+
<div class="name">实心箭头向右</div>
|
|
66
|
+
<div class="code-name">&#xe651;</div>
|
|
67
|
+
</li>
|
|
68
|
+
|
|
69
|
+
<li class="dib">
|
|
70
|
+
<span class="icon iconfont-abl"></span>
|
|
71
|
+
<div class="name">实心箭头向上</div>
|
|
72
|
+
<div class="code-name">&#xe676;</div>
|
|
73
|
+
</li>
|
|
74
|
+
|
|
75
|
+
<li class="dib">
|
|
76
|
+
<span class="icon iconfont-abl"></span>
|
|
77
|
+
<div class="name">实心箭头向下</div>
|
|
78
|
+
<div class="code-name">&#xe677;</div>
|
|
79
|
+
</li>
|
|
80
|
+
|
|
81
|
+
<li class="dib">
|
|
82
|
+
<span class="icon iconfont-abl"></span>
|
|
83
|
+
<div class="name">实心箭头向左</div>
|
|
84
|
+
<div class="code-name">&#xe678;</div>
|
|
85
|
+
</li>
|
|
86
|
+
|
|
87
|
+
<li class="dib">
|
|
88
|
+
<span class="icon iconfont-abl"></span>
|
|
89
|
+
<div class="name">loading</div>
|
|
90
|
+
<div class="code-name">&#xe67b;</div>
|
|
91
|
+
</li>
|
|
92
|
+
|
|
93
|
+
<li class="dib">
|
|
94
|
+
<span class="icon iconfont-abl"></span>
|
|
95
|
+
<div class="name">错误</div>
|
|
96
|
+
<div class="code-name">&#xe65b;</div>
|
|
97
|
+
</li>
|
|
98
|
+
|
|
99
|
+
<li class="dib">
|
|
100
|
+
<span class="icon iconfont-abl"></span>
|
|
101
|
+
<div class="name">成功</div>
|
|
102
|
+
<div class="code-name">&#xe671;</div>
|
|
103
|
+
</li>
|
|
104
|
+
|
|
105
|
+
<li class="dib">
|
|
106
|
+
<span class="icon iconfont-abl"></span>
|
|
107
|
+
<div class="name">警告</div>
|
|
108
|
+
<div class="code-name">&#xeb65;</div>
|
|
109
|
+
</li>
|
|
110
|
+
|
|
111
|
+
<li class="dib">
|
|
112
|
+
<span class="icon iconfont-abl"></span>
|
|
113
|
+
<div class="name">cart-icon</div>
|
|
114
|
+
<div class="code-name">&#xe62c;</div>
|
|
115
|
+
</li>
|
|
116
|
+
|
|
117
|
+
<li class="dib">
|
|
118
|
+
<span class="icon iconfont-abl"></span>
|
|
119
|
+
<div class="name">loading</div>
|
|
120
|
+
<div class="code-name">&#xe644;</div>
|
|
121
|
+
</li>
|
|
122
|
+
|
|
123
|
+
<li class="dib">
|
|
124
|
+
<span class="icon iconfont-abl"></span>
|
|
125
|
+
<div class="name">loading</div>
|
|
126
|
+
<div class="code-name">&#xe6cd;</div>
|
|
127
|
+
</li>
|
|
128
|
+
|
|
129
|
+
<li class="dib">
|
|
130
|
+
<span class="icon iconfont-abl"></span>
|
|
131
|
+
<div class="name">x</div>
|
|
132
|
+
<div class="code-name">&#xe77a;</div>
|
|
133
|
+
</li>
|
|
134
|
+
|
|
135
|
+
<li class="dib">
|
|
136
|
+
<span class="icon iconfont-abl"></span>
|
|
137
|
+
<div class="name">横线</div>
|
|
138
|
+
<div class="code-name">&#xe601;</div>
|
|
139
|
+
</li>
|
|
140
|
+
|
|
141
|
+
<li class="dib">
|
|
142
|
+
<span class="icon iconfont-abl"></span>
|
|
143
|
+
<div class="name">对号</div>
|
|
144
|
+
<div class="code-name">&#xe633;</div>
|
|
145
|
+
</li>
|
|
146
|
+
|
|
147
|
+
</ul>
|
|
148
|
+
<div class="article markdown">
|
|
149
|
+
<h2 id="unicode-">Unicode 引用</h2>
|
|
150
|
+
<hr>
|
|
151
|
+
|
|
152
|
+
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
|
153
|
+
<ul>
|
|
154
|
+
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
|
155
|
+
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
|
156
|
+
</ul>
|
|
157
|
+
<blockquote>
|
|
158
|
+
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
|
|
159
|
+
</blockquote>
|
|
160
|
+
<p>Unicode 使用步骤如下：</p>
|
|
161
|
+
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
|
162
|
+
<pre><code class="language-css"
|
|
163
|
+
>@font-face {
|
|
164
|
+
font-family: 'iconfont-abl';
|
|
165
|
+
src: url('iconfont.eot?t=1711679743467'); /* IE9 */
|
|
166
|
+
src: url('iconfont.eot?t=1711679743467#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|
167
|
+
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
|
|
168
|
+
url('iconfont.woff?t=1711679743467') format('woff'),
|
|
169
|
+
url('iconfont.ttf?t=1711679743467') format('truetype'),
|
|
170
|
+
url('iconfont.svg?t=1711679743467#iconfont-abl') format('svg');
|
|
171
|
+
}
|
|
172
|
+
</code></pre>
|
|
173
|
+
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
|
174
|
+
<pre><code class="language-css"
|
|
175
|
+
>.iconfont-abl {
|
|
176
|
+
font-family: "iconfont-abl" !important;
|
|
177
|
+
font-size: 16px;
|
|
178
|
+
font-style: normal;
|
|
179
|
+
-webkit-font-smoothing: antialiased;
|
|
180
|
+
-moz-osx-font-smoothing: grayscale;
|
|
181
|
+
}
|
|
182
|
+
</code></pre>
|
|
183
|
+
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
|
184
|
+
<pre>
|
|
185
|
+
<code class="language-html"
|
|
186
|
+
><span class="iconfont-abl">&#x33;</span>
|
|
187
|
+
</code></pre>
|
|
188
|
+
<blockquote>
|
|
189
|
+
<p>"iconfont-abl" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
|
190
|
+
</blockquote>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
<div class="content font-class">
|
|
194
|
+
<ul class="icon_lists dib-box">
|
|
195
|
+
|
|
196
|
+
<li class="dib">
|
|
197
|
+
<span class="icon iconfont-abl icon-abl-youjiantou"></span>
|
|
198
|
+
<div class="name">
|
|
199
|
+
右箭头
|
|
200
|
+
</div>
|
|
201
|
+
<div class="code-name">.icon-abl-youjiantou
|
|
202
|
+
</div>
|
|
203
|
+
</li>
|
|
204
|
+
|
|
205
|
+
<li class="dib">
|
|
206
|
+
<span class="icon iconfont-abl icon-abl-left"></span>
|
|
207
|
+
<div class="name">
|
|
208
|
+
实心箭头向右
|
|
209
|
+
</div>
|
|
210
|
+
<div class="code-name">.icon-abl-left
|
|
211
|
+
</div>
|
|
212
|
+
</li>
|
|
213
|
+
|
|
214
|
+
<li class="dib">
|
|
215
|
+
<span class="icon iconfont-abl icon-abl-bottom"></span>
|
|
216
|
+
<div class="name">
|
|
217
|
+
实心箭头向上
|
|
218
|
+
</div>
|
|
219
|
+
<div class="code-name">.icon-abl-bottom
|
|
220
|
+
</div>
|
|
221
|
+
</li>
|
|
222
|
+
|
|
223
|
+
<li class="dib">
|
|
224
|
+
<span class="icon iconfont-abl icon-abl-top"></span>
|
|
225
|
+
<div class="name">
|
|
226
|
+
实心箭头向下
|
|
227
|
+
</div>
|
|
228
|
+
<div class="code-name">.icon-abl-top
|
|
229
|
+
</div>
|
|
230
|
+
</li>
|
|
231
|
+
|
|
232
|
+
<li class="dib">
|
|
233
|
+
<span class="icon iconfont-abl icon-abl-right"></span>
|
|
234
|
+
<div class="name">
|
|
235
|
+
实心箭头向左
|
|
236
|
+
</div>
|
|
237
|
+
<div class="code-name">.icon-abl-right
|
|
238
|
+
</div>
|
|
239
|
+
</li>
|
|
240
|
+
|
|
241
|
+
<li class="dib">
|
|
242
|
+
<span class="icon iconfont-abl icon-abl-loading2"></span>
|
|
243
|
+
<div class="name">
|
|
244
|
+
loading
|
|
245
|
+
</div>
|
|
246
|
+
<div class="code-name">.icon-abl-loading2
|
|
247
|
+
</div>
|
|
248
|
+
</li>
|
|
249
|
+
|
|
250
|
+
<li class="dib">
|
|
251
|
+
<span class="icon iconfont-abl icon-abl-cuowu"></span>
|
|
252
|
+
<div class="name">
|
|
253
|
+
错误
|
|
254
|
+
</div>
|
|
255
|
+
<div class="code-name">.icon-abl-cuowu
|
|
256
|
+
</div>
|
|
257
|
+
</li>
|
|
258
|
+
|
|
259
|
+
<li class="dib">
|
|
260
|
+
<span class="icon iconfont-abl icon-abl-chenggong"></span>
|
|
261
|
+
<div class="name">
|
|
262
|
+
成功
|
|
263
|
+
</div>
|
|
264
|
+
<div class="code-name">.icon-abl-chenggong
|
|
265
|
+
</div>
|
|
266
|
+
</li>
|
|
267
|
+
|
|
268
|
+
<li class="dib">
|
|
269
|
+
<span class="icon iconfont-abl icon-abl-jinggao"></span>
|
|
270
|
+
<div class="name">
|
|
271
|
+
警告
|
|
272
|
+
</div>
|
|
273
|
+
<div class="code-name">.icon-abl-jinggao
|
|
274
|
+
</div>
|
|
275
|
+
</li>
|
|
276
|
+
|
|
277
|
+
<li class="dib">
|
|
278
|
+
<span class="icon iconfont-abl icon-abl-cart"></span>
|
|
279
|
+
<div class="name">
|
|
280
|
+
cart-icon
|
|
281
|
+
</div>
|
|
282
|
+
<div class="code-name">.icon-abl-cart
|
|
283
|
+
</div>
|
|
284
|
+
</li>
|
|
285
|
+
|
|
286
|
+
<li class="dib">
|
|
287
|
+
<span class="icon iconfont-abl icon-abl-loading"></span>
|
|
288
|
+
<div class="name">
|
|
289
|
+
loading
|
|
290
|
+
</div>
|
|
291
|
+
<div class="code-name">.icon-abl-loading
|
|
292
|
+
</div>
|
|
293
|
+
</li>
|
|
294
|
+
|
|
295
|
+
<li class="dib">
|
|
296
|
+
<span class="icon iconfont-abl icon-abl-loading1"></span>
|
|
297
|
+
<div class="name">
|
|
298
|
+
loading
|
|
299
|
+
</div>
|
|
300
|
+
<div class="code-name">.icon-abl-loading1
|
|
301
|
+
</div>
|
|
302
|
+
</li>
|
|
303
|
+
|
|
304
|
+
<li class="dib">
|
|
305
|
+
<span class="icon iconfont-abl icon-abl-close"></span>
|
|
306
|
+
<div class="name">
|
|
307
|
+
x
|
|
308
|
+
</div>
|
|
309
|
+
<div class="code-name">.icon-abl-close
|
|
310
|
+
</div>
|
|
311
|
+
</li>
|
|
312
|
+
|
|
313
|
+
<li class="dib">
|
|
314
|
+
<span class="icon iconfont-abl icon-abl-hengxian1"></span>
|
|
315
|
+
<div class="name">
|
|
316
|
+
横线
|
|
317
|
+
</div>
|
|
318
|
+
<div class="code-name">.icon-abl-hengxian1
|
|
319
|
+
</div>
|
|
320
|
+
</li>
|
|
321
|
+
|
|
322
|
+
<li class="dib">
|
|
323
|
+
<span class="icon iconfont-abl icon-abl-duihao"></span>
|
|
324
|
+
<div class="name">
|
|
325
|
+
对号
|
|
326
|
+
</div>
|
|
327
|
+
<div class="code-name">.icon-abl-duihao
|
|
328
|
+
</div>
|
|
329
|
+
</li>
|
|
330
|
+
|
|
331
|
+
</ul>
|
|
332
|
+
<div class="article markdown">
|
|
333
|
+
<h2 id="font-class-">font-class 引用</h2>
|
|
334
|
+
<hr>
|
|
335
|
+
|
|
336
|
+
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
|
337
|
+
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
|
338
|
+
<ul>
|
|
339
|
+
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
|
340
|
+
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
|
341
|
+
</ul>
|
|
342
|
+
<p>使用步骤如下：</p>
|
|
343
|
+
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
|
344
|
+
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
|
345
|
+
</code></pre>
|
|
346
|
+
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
|
347
|
+
<pre><code class="language-html"><span class="iconfont-abl icon-abl-xxx"></span>
|
|
348
|
+
</code></pre>
|
|
349
|
+
<blockquote>
|
|
350
|
+
<p>"
|
|
351
|
+
iconfont-abl" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
|
352
|
+
</blockquote>
|
|
353
|
+
</div>
|
|
354
|
+
</div>
|
|
355
|
+
<div class="content symbol">
|
|
356
|
+
<ul class="icon_lists dib-box">
|
|
357
|
+
|
|
358
|
+
<li class="dib">
|
|
359
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
360
|
+
<use xlink:href="#icon-abl-youjiantou"></use>
|
|
361
|
+
</svg>
|
|
362
|
+
<div class="name">右箭头</div>
|
|
363
|
+
<div class="code-name">#icon-abl-youjiantou</div>
|
|
364
|
+
</li>
|
|
365
|
+
|
|
366
|
+
<li class="dib">
|
|
367
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
368
|
+
<use xlink:href="#icon-abl-left"></use>
|
|
369
|
+
</svg>
|
|
370
|
+
<div class="name">实心箭头向右</div>
|
|
371
|
+
<div class="code-name">#icon-abl-left</div>
|
|
372
|
+
</li>
|
|
373
|
+
|
|
374
|
+
<li class="dib">
|
|
375
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
376
|
+
<use xlink:href="#icon-abl-bottom"></use>
|
|
377
|
+
</svg>
|
|
378
|
+
<div class="name">实心箭头向上</div>
|
|
379
|
+
<div class="code-name">#icon-abl-bottom</div>
|
|
380
|
+
</li>
|
|
381
|
+
|
|
382
|
+
<li class="dib">
|
|
383
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
384
|
+
<use xlink:href="#icon-abl-top"></use>
|
|
385
|
+
</svg>
|
|
386
|
+
<div class="name">实心箭头向下</div>
|
|
387
|
+
<div class="code-name">#icon-abl-top</div>
|
|
388
|
+
</li>
|
|
389
|
+
|
|
390
|
+
<li class="dib">
|
|
391
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
392
|
+
<use xlink:href="#icon-abl-right"></use>
|
|
393
|
+
</svg>
|
|
394
|
+
<div class="name">实心箭头向左</div>
|
|
395
|
+
<div class="code-name">#icon-abl-right</div>
|
|
396
|
+
</li>
|
|
397
|
+
|
|
398
|
+
<li class="dib">
|
|
399
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
400
|
+
<use xlink:href="#icon-abl-loading2"></use>
|
|
401
|
+
</svg>
|
|
402
|
+
<div class="name">loading</div>
|
|
403
|
+
<div class="code-name">#icon-abl-loading2</div>
|
|
404
|
+
</li>
|
|
405
|
+
|
|
406
|
+
<li class="dib">
|
|
407
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
408
|
+
<use xlink:href="#icon-abl-cuowu"></use>
|
|
409
|
+
</svg>
|
|
410
|
+
<div class="name">错误</div>
|
|
411
|
+
<div class="code-name">#icon-abl-cuowu</div>
|
|
412
|
+
</li>
|
|
413
|
+
|
|
414
|
+
<li class="dib">
|
|
415
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
416
|
+
<use xlink:href="#icon-abl-chenggong"></use>
|
|
417
|
+
</svg>
|
|
418
|
+
<div class="name">成功</div>
|
|
419
|
+
<div class="code-name">#icon-abl-chenggong</div>
|
|
420
|
+
</li>
|
|
421
|
+
|
|
422
|
+
<li class="dib">
|
|
423
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
424
|
+
<use xlink:href="#icon-abl-jinggao"></use>
|
|
425
|
+
</svg>
|
|
426
|
+
<div class="name">警告</div>
|
|
427
|
+
<div class="code-name">#icon-abl-jinggao</div>
|
|
428
|
+
</li>
|
|
429
|
+
|
|
430
|
+
<li class="dib">
|
|
431
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
432
|
+
<use xlink:href="#icon-abl-cart"></use>
|
|
433
|
+
</svg>
|
|
434
|
+
<div class="name">cart-icon</div>
|
|
435
|
+
<div class="code-name">#icon-abl-cart</div>
|
|
436
|
+
</li>
|
|
437
|
+
|
|
438
|
+
<li class="dib">
|
|
439
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
440
|
+
<use xlink:href="#icon-abl-loading"></use>
|
|
441
|
+
</svg>
|
|
442
|
+
<div class="name">loading</div>
|
|
443
|
+
<div class="code-name">#icon-abl-loading</div>
|
|
444
|
+
</li>
|
|
445
|
+
|
|
446
|
+
<li class="dib">
|
|
447
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
448
|
+
<use xlink:href="#icon-abl-loading1"></use>
|
|
449
|
+
</svg>
|
|
450
|
+
<div class="name">loading</div>
|
|
451
|
+
<div class="code-name">#icon-abl-loading1</div>
|
|
452
|
+
</li>
|
|
453
|
+
|
|
454
|
+
<li class="dib">
|
|
455
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
456
|
+
<use xlink:href="#icon-abl-close"></use>
|
|
457
|
+
</svg>
|
|
458
|
+
<div class="name">x</div>
|
|
459
|
+
<div class="code-name">#icon-abl-close</div>
|
|
460
|
+
</li>
|
|
461
|
+
|
|
462
|
+
<li class="dib">
|
|
463
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
464
|
+
<use xlink:href="#icon-abl-hengxian1"></use>
|
|
465
|
+
</svg>
|
|
466
|
+
<div class="name">横线</div>
|
|
467
|
+
<div class="code-name">#icon-abl-hengxian1</div>
|
|
468
|
+
</li>
|
|
469
|
+
|
|
470
|
+
<li class="dib">
|
|
471
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
472
|
+
<use xlink:href="#icon-abl-duihao"></use>
|
|
473
|
+
</svg>
|
|
474
|
+
<div class="name">对号</div>
|
|
475
|
+
<div class="code-name">#icon-abl-duihao</div>
|
|
476
|
+
</li>
|
|
477
|
+
|
|
478
|
+
</ul>
|
|
479
|
+
<div class="article markdown">
|
|
480
|
+
<h2 id="symbol-">Symbol 引用</h2>
|
|
481
|
+
<hr>
|
|
482
|
+
|
|
483
|
+
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
|
484
|
+
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
|
|
485
|
+
<ul>
|
|
486
|
+
<li>支持多色图标了，不再受单色限制。</li>
|
|
487
|
+
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
|
|
488
|
+
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
|
489
|
+
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
|
490
|
+
</ul>
|
|
491
|
+
<p>使用步骤如下：</p>
|
|
492
|
+
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
|
|
493
|
+
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
|
494
|
+
</code></pre>
|
|
495
|
+
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
|
496
|
+
<pre><code class="language-html"><style>
|
|
497
|
+
.icon {
|
|
498
|
+
width: 1em;
|
|
499
|
+
height: 1em;
|
|
500
|
+
vertical-align: -0.15em;
|
|
501
|
+
fill: currentColor;
|
|
502
|
+
overflow: hidden;
|
|
503
|
+
}
|
|
504
|
+
</style>
|
|
505
|
+
</code></pre>
|
|
506
|
+
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
|
507
|
+
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
|
508
|
+
<use xlink:href="#icon-xxx"></use>
|
|
509
|
+
</svg>
|
|
510
|
+
</code></pre>
|
|
511
|
+
</div>
|
|
512
|
+
</div>
|
|
513
|
+
|
|
514
|
+
</div>
|
|
515
|
+
</div>
|
|
516
|
+
<script>
|
|
517
|
+
$(document).ready(function () {
|
|
518
|
+
$('.tab-container .content:first').show()
|
|
519
|
+
|
|
520
|
+
$('#tabs li').click(function (e) {
|
|
521
|
+
var tabContent = $('.tab-container .content')
|
|
522
|
+
var index = $(this).index()
|
|
523
|
+
|
|
524
|
+
if ($(this).hasClass('active')) {
|
|
525
|
+
return
|
|
526
|
+
} else {
|
|
527
|
+
$('#tabs li').removeClass('active')
|
|
528
|
+
$(this).addClass('active')
|
|
529
|
+
|
|
530
|
+
tabContent.hide().eq(index).fadeIn()
|
|
531
|
+
}
|
|
532
|
+
})
|
|
533
|
+
})
|
|
534
|
+
</script>
|
|
535
|
+
</body>
|
|
536
|
+
</html>
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
@font-face {
|
|
2
|
+
font-family: "iconfont-abl"; /* Project id 4457906 */
|
|
3
|
+
src: url('iconfont.eot?t=1711679743467'); /* IE9 */
|
|
4
|
+
src: url('iconfont.eot?t=1711679743467#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|
5
|
+
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
|
|
6
|
+
url('iconfont.woff?t=1711679743467') format('woff'),
|
|
7
|
+
url('iconfont.ttf?t=1711679743467') format('truetype'),
|
|
8
|
+
url('iconfont.svg?t=1711679743467#iconfont-abl') format('svg');
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.iconfont-abl {
|
|
12
|
+
font-family: "iconfont-abl" !important;
|
|
13
|
+
font-size: 16px;
|
|
14
|
+
font-style: normal;
|
|
15
|
+
-webkit-font-smoothing: antialiased;
|
|
16
|
+
-moz-osx-font-smoothing: grayscale;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.icon-abl-youjiantou:before {
|
|
20
|
+
content: "\e629";
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.icon-abl-left:before {
|
|
24
|
+
content: "\e651";
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.icon-abl-bottom:before {
|
|
28
|
+
content: "\e676";
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.icon-abl-top:before {
|
|
32
|
+
content: "\e677";
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.icon-abl-right:before {
|
|
36
|
+
content: "\e678";
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.icon-abl-loading2:before {
|
|
40
|
+
content: "\e67b";
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.icon-abl-cuowu:before {
|
|
44
|
+
content: "\e65b";
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.icon-abl-chenggong:before {
|
|
48
|
+
content: "\e671";
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.icon-abl-jinggao:before {
|
|
52
|
+
content: "\eb65";
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.icon-abl-cart:before {
|
|
56
|
+
content: "\e62c";
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.icon-abl-loading:before {
|
|
60
|
+
content: "\e644";
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.icon-abl-loading1:before {
|
|
64
|
+
content: "\e6cd";
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.icon-abl-close:before {
|
|
68
|
+
content: "\e77a";
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.icon-abl-hengxian1:before {
|
|
72
|
+
content: "\e601";
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.icon-abl-duihao:before {
|
|
76
|
+
content: "\e633";
|
|
77
|
+
}
|
|
78
|
+
|
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
window._iconfont_svg_string_4457906='<svg><symbol id="icon-abl-youjiantou" viewBox="0 0 1024 1024"><path d="M711.6 488.624L355.2 152.976a29.36 29.36 0 0 0-42.352 0 31.408 31.408 0 0 0 0 43.552L647.76 512 312.848 827.36a31.408 31.408 0 0 0 0 43.552 29.36 29.36 0 0 0 42.352 0l356.4-335.648a36.32 36.32 0 0 0 0-46.64z" ></path></symbol><symbol id="icon-abl-left" viewBox="0 0 1024 1024"><path d="M298.666667 223.786667v576.426666c0 36.906667 43.733333 56.405333 71.210666 31.701334l320.213334-288.213334a42.666667 42.666667 0 0 0 0-63.402666L369.92 192.085333C342.4 167.338667 298.666667 186.88 298.666667 223.786667z" ></path></symbol><symbol id="icon-abl-bottom" viewBox="0 0 1024 1024"><path d="M223.786667 725.333333h576.426666c36.906667 0 56.405333-43.733333 31.701334-71.210666l-288.213334-320.213334a42.666667 42.666667 0 0 0-63.402666 0L192.085333 654.08c-24.746667 27.477333-5.205333 71.210667 31.701334 71.210667z" ></path></symbol><symbol id="icon-abl-top" viewBox="0 0 1024 1024"><path d="M800.213333 298.666667H223.786667c-36.906667 0-56.405333 43.733333-31.701334 71.210666l288.213334 320.213334a42.666667 42.666667 0 0 0 63.402666 0l288.213334-320.213334c24.746667-27.477333 5.205333-71.210667-31.701334-71.210666z" ></path></symbol><symbol id="icon-abl-right" viewBox="0 0 1024 1024"><path d="M725.333333 800.213333V223.786667c0-36.906667-43.733333-56.405333-71.210666-31.701334l-320.213334 288.213334a42.666667 42.666667 0 0 0 0 63.402666l320.213334 288.213334c27.477333 24.746667 71.210667 5.205333 71.210666-31.701334z" ></path></symbol><symbol id="icon-abl-loading2" viewBox="0 0 1024 1024"><path d="M512.000427 1024c-69.12 0-136.192-13.482667-199.296-40.192a510.293333 510.293333 0 0 1-162.688-109.824A510.293333 510.293333 0 0 1 0.000427 512a35.968 35.968 0 1 1 72.021333 0 439.338667 439.338667 0 0 0 128.896 311.210667A437.717333 437.717333 0 0 0 512.000427 951.978667a439.338667 439.338667 0 0 0 311.210666-128.896A437.717333 437.717333 0 0 0 951.979093 512c0-59.392-11.562667-116.992-34.56-171.306667a440.448 440.448 0 0 0-94.293333-139.904A437.717333 437.717333 0 0 0 512.000427 71.978667 35.968 35.968 0 1 1 512.000427 0c69.12 0 136.192 13.482667 199.296 40.192a510.293333 510.293333 0 0 1 162.688 109.824 511.104 511.104 0 0 1 109.696 162.688c26.709333 63.104 40.234667 130.176 40.234666 199.296s-13.525333 136.192-40.234666 199.296a508.373333 508.373333 0 0 1-109.653334 162.688A511.104 511.104 0 0 1 512.000427 1024z" fill="#000000" opacity=".65" ></path></symbol><symbol id="icon-abl-cuowu" viewBox="0 0 1028 1024"><path d="M875.086452 153.730058C676.053818-45.302575 353.260522-45.302575 154.128323 153.730058s-199.032634 521.825929 0 720.958129 521.825929 199.032634 720.958129 0 199.032634-521.825929 0-720.958129zM725.836868 725.438604c-9.757478 9.757478-25.488922 9.757478-35.246399 0L514.557604 549.405739 338.624306 725.438604c-9.757478 9.757478-25.488922 9.757478-35.2464 0s-9.757478-25.488922 0-35.2464l176.032865-176.032864-176.032865-175.933299c-9.757478-9.757478-9.757478-25.488922 0-35.246399 9.757478-9.757478 25.488922-9.757478 35.2464 0l176.032864 176.032865 176.032865-176.032865c9.757478-9.757478 25.488922-9.757478 35.246399 0 9.757478 9.757478 9.757478 25.488922 0 35.246399L549.804004 514.15934 725.836868 690.192204c9.657912 9.757478 9.657912 25.488922 0 35.2464z" fill="#F56C6C" ></path></symbol><symbol id="icon-abl-chenggong" viewBox="0 0 1024 1024"><path d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m-74.965333 550.4L346.453333 545.152a42.666667 42.666667 0 1 0-60.330666 60.330667l120.704 120.704a42.666667 42.666667 0 0 0 60.330666 0l301.653334-301.696a42.666667 42.666667 0 1 0-60.288-60.330667l-271.530667 271.488z" fill="#52C41A" ></path></symbol><symbol id="icon-abl-jinggao" viewBox="0 0 1024 1024"><path d="M512 32C246.912 32 32 246.912 32 512c0 265.088 214.912 480 480 480 265.088 0 480-214.912 480-480 0-265.088-214.912-480-480-480z m0 896C282.24 928 96 741.76 96 512S282.24 96 512 96s416 186.24 416 416-186.24 416-416 416z" ></path><path d="M512 384a32 32 0 0 0-32 32v352a32 32 0 0 0 64 0V416a32 32 0 0 0-32-32z" ></path><path d="M512 272m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" ></path></symbol><symbol id="icon-abl-cart" viewBox="0 0 1024 1024"><path d="M899.138065 697.542194H322.890323l28.936258-58.929549 480.784516-0.858839c16.251871 0 30.191484-11.627355 33.098322-27.681032l66.593033-372.669935a33.626839 33.626839 0 0 0-33.032258-39.605678L287.677935 195.782194l-5.219096-24.576a34.353548 34.353548 0 0 0-33.49471-27.086452H99.427097a34.155355 34.155355 0 1 0 0 68.31071h121.822968l22.858322 108.577032 56.220903 272.218839L227.922581 711.38271a33.825032 33.825032 0 0 0-2.906839 35.608774c5.813677 11.528258 17.507097 18.795355 30.488774 18.795355h60.779355a99.361032 99.361032 0 0 0 79.343484 158.984258 99.361032 99.361032 0 0 0 79.376516-158.984258h155.912258a99.361032 99.361032 0 0 0 79.343484 158.984258 99.361032 99.361032 0 0 0 79.343484-158.984258h109.667097c18.762323 0 34.155355-15.293935 34.155354-34.188387a34.287484 34.287484 0 0 0-34.254451-34.023226zM301.914839 263.134968l557.221161 1.816774-54.56929 305.614452-437.743484 0.792774L301.914839 263.134968z m93.745548 592.929032a30.653935 30.653935 0 0 1-30.554839-30.587871c0-16.846452 13.741419-30.554839 30.554839-30.554839a30.653935 30.653935 0 0 1 21.636129 52.190968 30.587871 30.587871 0 0 1-21.636129 8.951742z m314.632258 0a30.653935 30.653935 0 0 1-30.587871-30.587871c0-16.846452 13.741419-30.554839 30.587871-30.554839a30.653935 30.653935 0 0 1 21.636129 52.190968 30.587871 30.587871 0 0 1-21.636129 8.951742z" ></path></symbol><symbol id="icon-abl-loading" viewBox="0 0 1024 1024"><path d="M511.882596 287.998081h-0.361244a31.998984 31.998984 0 0 1-31.659415-31.977309v-0.361244c0-0.104761 0.115598-11.722364 0.115598-63.658399V96.000564a31.998984 31.998984 0 1 1 64.001581 0V192.001129c0 52.586273-0.111986 63.88237-0.119211 64.337537a32.002596 32.002596 0 0 1-31.977309 31.659415zM511.998194 959.99842a31.998984 31.998984 0 0 1-31.998984-31.998984v-96.379871c0-51.610915-0.111986-63.174332-0.115598-63.286318s0-0.242033 0-0.361243a31.998984 31.998984 0 0 1 63.997968-0.314283c0 0.455167 0.11921 11.711527 0.11921 64.034093v96.307622a31.998984 31.998984 0 0 1-32.002596 31.998984zM330.899406 363.021212a31.897836 31.897836 0 0 1-22.866739-9.612699c-0.075861-0.075861-8.207461-8.370021-44.931515-45.094076L195.198137 240.429485a31.998984 31.998984 0 0 1 45.256635-45.253022L308.336112 263.057803c37.182834 37.182834 45.090463 45.253022 45.41197 45.578141A31.998984 31.998984 0 0 1 330.899406 363.021212zM806.137421 838.11473a31.901448 31.901448 0 0 1-22.628318-9.374279L715.624151 760.859111c-36.724054-36.724054-45.018214-44.859267-45.097687-44.93874a31.998984 31.998984 0 0 1 44.77618-45.729864c0.32512 0.317895 8.395308 8.229136 45.578142 45.411969l67.88134 67.88134a31.998984 31.998984 0 0 1-22.624705 54.630914zM224.000113 838.11473a31.901448 31.901448 0 0 0 22.628317-9.374279l67.88134-67.88134c36.724054-36.724054 45.021826-44.859267 45.097688-44.93874a31.998984 31.998984 0 0 0-44.776181-45.729864c-0.32512 0.317895-8.395308 8.229136-45.578142 45.411969l-67.88134 67.884953a31.998984 31.998984 0 0 0 22.628318 54.627301zM255.948523 544.058589h-0.361244c-0.104761 0-11.722364-0.115598-63.658399-0.115598H95.942765a31.998984 31.998984 0 1 1 0-64.00158h95.996952c52.586273 0 63.88237 0.111986 64.337538 0.11921a31.998984 31.998984 0 0 1 31.659414 31.97731v0.361244a32.002596 32.002596 0 0 1-31.988146 31.659414zM767.939492 544.058589a32.002596 32.002596 0 0 1-31.995372-31.666639v-0.361244a31.998984 31.998984 0 0 1 31.659415-31.970085c0.455167 0 11.754876-0.11921 64.34115-0.11921h96.000564a31.998984 31.998984 0 0 1 0 64.00158H831.944685c-51.936034 0-63.553638 0.111986-63.665624 0.115598h-0.335957zM692.999446 363.0176a31.998984 31.998984 0 0 1-22.863126-54.381656c0.317895-0.32512 8.229136-8.395308 45.41197-45.578141l67.88134-67.884953A31.998984 31.998984 0 1 1 828.693489 240.429485l-67.892177 67.88134c-31.020013 31.023625-41.644196 41.759794-44.241539 44.393262l-0.697201 0.722488a31.908673 31.908673 0 0 1-22.863126 9.591025z" fill="" ></path></symbol><symbol id="icon-abl-loading1" viewBox="0 0 1024 1024"><path d="M980.752 313.697c-25.789-60.972-62.702-115.725-109.713-162.736-47.012-47.011-101.764-83.924-162.736-109.713C645.161 14.542 578.106 1 509 1c-2.242 0-4.48 0.015-6.715 0.043-16.567 0.211-29.826 13.812-29.615 30.38 0.209 16.438 13.599 29.618 29.99 29.618l0.39-0.002c1.98-0.026 3.963-0.039 5.95-0.039 61.033 0 120.224 11.947 175.93 35.508 53.82 22.764 102.162 55.359 143.683 96.879s74.115 89.862 96.88 143.683C949.054 392.776 961 451.967 961 513c0 16.568 13.432 30 30 30s30-13.432 30-30c0-69.106-13.541-136.162-40.248-199.303z" fill="#141414" ></path></symbol><symbol id="icon-abl-close" viewBox="0 0 1024 1024"><path d="M256 810.666667a42.666667 42.666667 0 0 1-30.293333-12.373334 42.666667 42.666667 0 0 1 0-60.586666l512-512a42.666667 42.666667 0 1 1 60.586666 60.586666l-512 512A42.666667 42.666667 0 0 1 256 810.666667z" ></path><path d="M768 810.666667a42.666667 42.666667 0 0 1-30.293333-12.373334l-512-512a42.666667 42.666667 0 0 1 60.586666-60.586666l512 512a42.666667 42.666667 0 0 1 0 60.586666A42.666667 42.666667 0 0 1 768 810.666667z" ></path></symbol><symbol id="icon-abl-hengxian1" viewBox="0 0 1024 1024"><path d="M715.264 613.888h-406.528c-33.28 0-60.928-27.136-60.928-60.928 0-33.28 27.136-60.928 60.928-60.928h406.528c33.28 0 60.928 27.136 60.928 60.928-0.512 33.28-27.648 60.928-60.928 60.928z" fill="" ></path></symbol><symbol id="icon-abl-duihao" viewBox="0 0 1024 1024"><path d="M416.832 798.08C400.64 798.08 384.512 791.872 372.16 779.52L119.424 525.76C94.784 500.992 94.784 460.8 119.424 436.032 144.128 411.264 184.128 411.264 208.768 436.032L416.832 644.928 814.4 245.76C839.04 220.928 879.04 220.928 903.744 245.76 928.384 270.528 928.384 310.656 903.744 335.424L461.504 779.52C449.152 791.872 432.96 798.08 416.832 798.08Z" fill="#272636" ></path></symbol></svg>',function(o){var a=(a=document.getElementsByTagName("script"))[a.length-1],t=a.getAttribute("data-injectcss"),a=a.getAttribute("data-disable-injectsvg");if(!a){var l,e,i,c,n,d=function(a,t){t.parentNode.insertBefore(a,t)};if(t&&!o.__iconfont__svg__cssinject__){o.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(a){console&&console.log(a)}}l=function(){var a,t=document.createElement("div");t.innerHTML=o._iconfont_svg_string_4457906,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(a=document.body).firstChild?d(t,a.firstChild):a.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(e=function(){document.removeEventListener("DOMContentLoaded",e,!1),l()},document.addEventListener("DOMContentLoaded",e,!1)):document.attachEvent&&(i=l,c=o.document,n=!1,h(),c.onreadystatechange=function(){"complete"==c.readyState&&(c.onreadystatechange=null,s())})}function s(){n||(n=!0,i())}function h(){try{c.documentElement.doScroll("left")}catch(a){return void setTimeout(h,50)}s()}}(window);
|