cbvirtua 1.0.47 → 1.0.49
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/Signature.vue +127 -0
- package/canvas-example-main/canvas-example-main/.github/workflows/main.yml +62 -0
- package/canvas-example-main/canvas-example-main/README.md +13 -0
- package/canvas-example-main/canvas-example-main/curved.html +52 -0
- package/canvas-example-main/canvas-example-main/eslint.config.js +30 -0
- package/canvas-example-main/canvas-example-main/index.html +13 -0
- package/canvas-example-main/canvas-example-main/package.json +51 -0
- package/canvas-example-main/canvas-example-main/pnpm-lock.yaml +4760 -0
- package/canvas-example-main/canvas-example-main/postcss.config.js +6 -0
- package/canvas-example-main/canvas-example-main/public/vite.svg +1 -0
- package/canvas-example-main/canvas-example-main/src/App.tsx +17 -0
- package/canvas-example-main/canvas-example-main/src/assets/github.svg +1 -0
- package/canvas-example-main/canvas-example-main/src/assets/react.svg +1 -0
- package/canvas-example-main/canvas-example-main/src/components/Iconfont/demo.css +539 -0
- package/canvas-example-main/canvas-example-main/src/components/Iconfont/demo_index.html +418 -0
- package/canvas-example-main/canvas-example-main/src/components/Iconfont/iconfont.css +55 -0
- package/canvas-example-main/canvas-example-main/src/components/Iconfont/iconfont.js +1 -0
- package/canvas-example-main/canvas-example-main/src/components/Iconfont/iconfont.json +79 -0
- package/canvas-example-main/canvas-example-main/src/components/Iconfont/iconfont.ttf +0 -0
- package/canvas-example-main/canvas-example-main/src/components/Iconfont/iconfont.woff +0 -0
- package/canvas-example-main/canvas-example-main/src/components/Iconfont/iconfont.woff2 +0 -0
- package/canvas-example-main/canvas-example-main/src/components/Iconfont/index.tsx +39 -0
- package/canvas-example-main/canvas-example-main/src/main.css +9 -0
- package/canvas-example-main/canvas-example-main/src/main.tsx +10 -0
- package/canvas-example-main/canvas-example-main/src/pages/2048/g2048.ts +14 -0
- package/canvas-example-main/canvas-example-main/src/pages/2048/index.tsx +21 -0
- package/canvas-example-main/canvas-example-main/src/pages/clock/index.tsx +103 -0
- package/canvas-example-main/canvas-example-main/src/pages/demo/index.tsx +21 -0
- package/canvas-example-main/canvas-example-main/src/pages/editor/components/editor/index.module.less +3 -0
- package/canvas-example-main/canvas-example-main/src/pages/editor/components/editor/index.tsx +99 -0
- package/canvas-example-main/canvas-example-main/src/pages/editor/components/header/index.module.less +5 -0
- package/canvas-example-main/canvas-example-main/src/pages/editor/components/header/index.tsx +5 -0
- package/canvas-example-main/canvas-example-main/src/pages/editor/components/material/index.module.less +59 -0
- package/canvas-example-main/canvas-example-main/src/pages/editor/components/material/index.tsx +85 -0
- package/canvas-example-main/canvas-example-main/src/pages/editor/components/setting/index.module.less +7 -0
- package/canvas-example-main/canvas-example-main/src/pages/editor/components/setting/index.tsx +5 -0
- package/canvas-example-main/canvas-example-main/src/pages/editor/core/application.ts +35 -0
- package/canvas-example-main/canvas-example-main/src/pages/editor/core/cmp/base.ts +17 -0
- package/canvas-example-main/canvas-example-main/src/pages/editor/core/cmp/factory.ts +14 -0
- package/canvas-example-main/canvas-example-main/src/pages/editor/core/cmp/shape.tsx +43 -0
- package/canvas-example-main/canvas-example-main/src/pages/editor/core/editor.ts +61 -0
- package/canvas-example-main/canvas-example-main/src/pages/editor/core/type.ts +6 -0
- package/canvas-example-main/canvas-example-main/src/pages/editor/index.module.less +7 -0
- package/canvas-example-main/canvas-example-main/src/pages/editor/index.tsx +32 -0
- package/canvas-example-main/canvas-example-main/src/pages/editor/store/component-config.ts +61 -0
- package/canvas-example-main/canvas-example-main/src/pages/editor/store/components.ts +43 -0
- package/canvas-example-main/canvas-example-main/src/pages/editor/store/layout.ts +40 -0
- package/canvas-example-main/canvas-example-main/src/pages/home/index.tsx +59 -0
- package/canvas-example-main/canvas-example-main/src/pages/jigsaw/index.tsx +3 -0
- package/canvas-example-main/canvas-example-main/src/pages/minesweeper/bomber.png +0 -0
- package/canvas-example-main/canvas-example-main/src/pages/minesweeper/index.tsx +138 -0
- package/canvas-example-main/canvas-example-main/src/pages/minesweeper/mark.png +0 -0
- package/canvas-example-main/canvas-example-main/src/pages/minesweeper/minesweeper.ts +345 -0
- package/canvas-example-main/canvas-example-main/src/pages/minesweeper/utils.ts +24 -0
- package/canvas-example-main/canvas-example-main/src/pages/pageflip/index.tsx +200 -0
- package/canvas-example-main/canvas-example-main/src/pages/pageflip/page1.jpg +0 -0
- package/canvas-example-main/canvas-example-main/src/pages/practice/draw/index.ts +367 -0
- package/canvas-example-main/canvas-example-main/src/pages/practice/index.module.less +26 -0
- package/canvas-example-main/canvas-example-main/src/pages/practice/index.tsx +54 -0
- package/canvas-example-main/canvas-example-main/src/pages/shape-editor/control.ts +174 -0
- package/canvas-example-main/canvas-example-main/src/pages/shape-editor/editor.ts +91 -0
- package/canvas-example-main/canvas-example-main/src/pages/shape-editor/index.raw.tsx +159 -0
- package/canvas-example-main/canvas-example-main/src/pages/shape-editor/index.tsx +36 -0
- package/canvas-example-main/canvas-example-main/src/pages/shape-editor/shape.ts +248 -0
- package/canvas-example-main/canvas-example-main/src/router.tsx +53 -0
- package/canvas-example-main/canvas-example-main/src/utils/storage.ts +48 -0
- package/canvas-example-main/canvas-example-main/src/vite-env.d.ts +1 -0
- package/canvas-example-main/canvas-example-main/tailwind.config.js +8 -0
- package/canvas-example-main/canvas-example-main/tsconfig.app.json +30 -0
- package/canvas-example-main/canvas-example-main/tsconfig.json +7 -0
- package/canvas-example-main/canvas-example-main/tsconfig.node.json +22 -0
- package/canvas-example-main/canvas-example-main/vite.config.ts +18 -0
- package/package.json +1 -1
|
@@ -0,0 +1,418 @@
|
|
|
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=4716609" 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"></span>
|
|
59
|
+
<div class="name">图片</div>
|
|
60
|
+
<div class="code-name">&#xe8ba;</div>
|
|
61
|
+
</li>
|
|
62
|
+
|
|
63
|
+
<li class="dib">
|
|
64
|
+
<span class="icon iconfont"></span>
|
|
65
|
+
<div class="name">圆环</div>
|
|
66
|
+
<div class="code-name">&#xe831;</div>
|
|
67
|
+
</li>
|
|
68
|
+
|
|
69
|
+
<li class="dib">
|
|
70
|
+
<span class="icon iconfont"></span>
|
|
71
|
+
<div class="name">形状-矩形</div>
|
|
72
|
+
<div class="code-name">&#xeb97;</div>
|
|
73
|
+
</li>
|
|
74
|
+
|
|
75
|
+
<li class="dib">
|
|
76
|
+
<span class="icon iconfont"></span>
|
|
77
|
+
<div class="name">形状-三角形</div>
|
|
78
|
+
<div class="code-name">&#xeb99;</div>
|
|
79
|
+
</li>
|
|
80
|
+
|
|
81
|
+
<li class="dib">
|
|
82
|
+
<span class="icon iconfont"></span>
|
|
83
|
+
<div class="name">箭头</div>
|
|
84
|
+
<div class="code-name">&#xe621;</div>
|
|
85
|
+
</li>
|
|
86
|
+
|
|
87
|
+
<li class="dib">
|
|
88
|
+
<span class="icon iconfont"></span>
|
|
89
|
+
<div class="name">箭头</div>
|
|
90
|
+
<div class="code-name">&#xe600;</div>
|
|
91
|
+
</li>
|
|
92
|
+
|
|
93
|
+
<li class="dib">
|
|
94
|
+
<span class="icon iconfont"></span>
|
|
95
|
+
<div class="name">模板</div>
|
|
96
|
+
<div class="code-name">&#xe76a;</div>
|
|
97
|
+
</li>
|
|
98
|
+
|
|
99
|
+
<li class="dib">
|
|
100
|
+
<span class="icon iconfont"></span>
|
|
101
|
+
<div class="name">用户</div>
|
|
102
|
+
<div class="code-name">&#xe788;</div>
|
|
103
|
+
</li>
|
|
104
|
+
|
|
105
|
+
<li class="dib">
|
|
106
|
+
<span class="icon iconfont"></span>
|
|
107
|
+
<div class="name">文字</div>
|
|
108
|
+
<div class="code-name">&#xe883;</div>
|
|
109
|
+
</li>
|
|
110
|
+
|
|
111
|
+
<li class="dib">
|
|
112
|
+
<span class="icon iconfont"></span>
|
|
113
|
+
<div class="name">素材</div>
|
|
114
|
+
<div class="code-name">&#xe833;</div>
|
|
115
|
+
</li>
|
|
116
|
+
|
|
117
|
+
</ul>
|
|
118
|
+
<div class="article markdown">
|
|
119
|
+
<h2 id="unicode-">Unicode 引用</h2>
|
|
120
|
+
<hr>
|
|
121
|
+
|
|
122
|
+
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p>
|
|
123
|
+
<ul>
|
|
124
|
+
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
|
|
125
|
+
<li>默认情况下不支持多色,直接添加多色图标会自动去色。</li>
|
|
126
|
+
</ul>
|
|
127
|
+
<blockquote>
|
|
128
|
+
<p>注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)</p>
|
|
129
|
+
</blockquote>
|
|
130
|
+
<p>Unicode 使用步骤如下:</p>
|
|
131
|
+
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
|
|
132
|
+
<pre><code class="language-css"
|
|
133
|
+
>@font-face {
|
|
134
|
+
font-family: 'iconfont';
|
|
135
|
+
src: url('iconfont.woff2?t=1729582264392') format('woff2'),
|
|
136
|
+
url('iconfont.woff?t=1729582264392') format('woff'),
|
|
137
|
+
url('iconfont.ttf?t=1729582264392') format('truetype');
|
|
138
|
+
}
|
|
139
|
+
</code></pre>
|
|
140
|
+
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
|
|
141
|
+
<pre><code class="language-css"
|
|
142
|
+
>.iconfont {
|
|
143
|
+
font-family: "iconfont" !important;
|
|
144
|
+
font-size: 16px;
|
|
145
|
+
font-style: normal;
|
|
146
|
+
-webkit-font-smoothing: antialiased;
|
|
147
|
+
-moz-osx-font-smoothing: grayscale;
|
|
148
|
+
}
|
|
149
|
+
</code></pre>
|
|
150
|
+
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
|
|
151
|
+
<pre>
|
|
152
|
+
<code class="language-html"
|
|
153
|
+
><span class="iconfont">&#x33;</span>
|
|
154
|
+
</code></pre>
|
|
155
|
+
<blockquote>
|
|
156
|
+
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
|
|
157
|
+
</blockquote>
|
|
158
|
+
</div>
|
|
159
|
+
</div>
|
|
160
|
+
<div class="content font-class">
|
|
161
|
+
<ul class="icon_lists dib-box">
|
|
162
|
+
|
|
163
|
+
<li class="dib">
|
|
164
|
+
<span class="icon iconfont icon-tupian"></span>
|
|
165
|
+
<div class="name">
|
|
166
|
+
图片
|
|
167
|
+
</div>
|
|
168
|
+
<div class="code-name">.icon-tupian
|
|
169
|
+
</div>
|
|
170
|
+
</li>
|
|
171
|
+
|
|
172
|
+
<li class="dib">
|
|
173
|
+
<span class="icon iconfont icon-yuanhuan"></span>
|
|
174
|
+
<div class="name">
|
|
175
|
+
圆环
|
|
176
|
+
</div>
|
|
177
|
+
<div class="code-name">.icon-yuanhuan
|
|
178
|
+
</div>
|
|
179
|
+
</li>
|
|
180
|
+
|
|
181
|
+
<li class="dib">
|
|
182
|
+
<span class="icon iconfont icon-xingzhuang-juxing"></span>
|
|
183
|
+
<div class="name">
|
|
184
|
+
形状-矩形
|
|
185
|
+
</div>
|
|
186
|
+
<div class="code-name">.icon-xingzhuang-juxing
|
|
187
|
+
</div>
|
|
188
|
+
</li>
|
|
189
|
+
|
|
190
|
+
<li class="dib">
|
|
191
|
+
<span class="icon iconfont icon-xingzhuang-sanjiaoxing"></span>
|
|
192
|
+
<div class="name">
|
|
193
|
+
形状-三角形
|
|
194
|
+
</div>
|
|
195
|
+
<div class="code-name">.icon-xingzhuang-sanjiaoxing
|
|
196
|
+
</div>
|
|
197
|
+
</li>
|
|
198
|
+
|
|
199
|
+
<li class="dib">
|
|
200
|
+
<span class="icon iconfont icon-jiantou"></span>
|
|
201
|
+
<div class="name">
|
|
202
|
+
箭头
|
|
203
|
+
</div>
|
|
204
|
+
<div class="code-name">.icon-jiantou
|
|
205
|
+
</div>
|
|
206
|
+
</li>
|
|
207
|
+
|
|
208
|
+
<li class="dib">
|
|
209
|
+
<span class="icon iconfont icon-jiantou1"></span>
|
|
210
|
+
<div class="name">
|
|
211
|
+
箭头
|
|
212
|
+
</div>
|
|
213
|
+
<div class="code-name">.icon-jiantou1
|
|
214
|
+
</div>
|
|
215
|
+
</li>
|
|
216
|
+
|
|
217
|
+
<li class="dib">
|
|
218
|
+
<span class="icon iconfont icon-moban"></span>
|
|
219
|
+
<div class="name">
|
|
220
|
+
模板
|
|
221
|
+
</div>
|
|
222
|
+
<div class="code-name">.icon-moban
|
|
223
|
+
</div>
|
|
224
|
+
</li>
|
|
225
|
+
|
|
226
|
+
<li class="dib">
|
|
227
|
+
<span class="icon iconfont icon-yonghu"></span>
|
|
228
|
+
<div class="name">
|
|
229
|
+
用户
|
|
230
|
+
</div>
|
|
231
|
+
<div class="code-name">.icon-yonghu
|
|
232
|
+
</div>
|
|
233
|
+
</li>
|
|
234
|
+
|
|
235
|
+
<li class="dib">
|
|
236
|
+
<span class="icon iconfont icon-wenzi"></span>
|
|
237
|
+
<div class="name">
|
|
238
|
+
文字
|
|
239
|
+
</div>
|
|
240
|
+
<div class="code-name">.icon-wenzi
|
|
241
|
+
</div>
|
|
242
|
+
</li>
|
|
243
|
+
|
|
244
|
+
<li class="dib">
|
|
245
|
+
<span class="icon iconfont icon-sucai"></span>
|
|
246
|
+
<div class="name">
|
|
247
|
+
素材
|
|
248
|
+
</div>
|
|
249
|
+
<div class="code-name">.icon-sucai
|
|
250
|
+
</div>
|
|
251
|
+
</li>
|
|
252
|
+
|
|
253
|
+
</ul>
|
|
254
|
+
<div class="article markdown">
|
|
255
|
+
<h2 id="font-class-">font-class 引用</h2>
|
|
256
|
+
<hr>
|
|
257
|
+
|
|
258
|
+
<p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p>
|
|
259
|
+
<p>与 Unicode 使用方式相比,具有如下特点:</p>
|
|
260
|
+
<ul>
|
|
261
|
+
<li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
|
262
|
+
<li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li>
|
|
263
|
+
</ul>
|
|
264
|
+
<p>使用步骤如下:</p>
|
|
265
|
+
<h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3>
|
|
266
|
+
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
|
267
|
+
</code></pre>
|
|
268
|
+
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
|
|
269
|
+
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
|
270
|
+
</code></pre>
|
|
271
|
+
<blockquote>
|
|
272
|
+
<p>"
|
|
273
|
+
iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
|
|
274
|
+
</blockquote>
|
|
275
|
+
</div>
|
|
276
|
+
</div>
|
|
277
|
+
<div class="content symbol">
|
|
278
|
+
<ul class="icon_lists dib-box">
|
|
279
|
+
|
|
280
|
+
<li class="dib">
|
|
281
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
282
|
+
<use xlink:href="#icon-tupian"></use>
|
|
283
|
+
</svg>
|
|
284
|
+
<div class="name">图片</div>
|
|
285
|
+
<div class="code-name">#icon-tupian</div>
|
|
286
|
+
</li>
|
|
287
|
+
|
|
288
|
+
<li class="dib">
|
|
289
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
290
|
+
<use xlink:href="#icon-yuanhuan"></use>
|
|
291
|
+
</svg>
|
|
292
|
+
<div class="name">圆环</div>
|
|
293
|
+
<div class="code-name">#icon-yuanhuan</div>
|
|
294
|
+
</li>
|
|
295
|
+
|
|
296
|
+
<li class="dib">
|
|
297
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
298
|
+
<use xlink:href="#icon-xingzhuang-juxing"></use>
|
|
299
|
+
</svg>
|
|
300
|
+
<div class="name">形状-矩形</div>
|
|
301
|
+
<div class="code-name">#icon-xingzhuang-juxing</div>
|
|
302
|
+
</li>
|
|
303
|
+
|
|
304
|
+
<li class="dib">
|
|
305
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
306
|
+
<use xlink:href="#icon-xingzhuang-sanjiaoxing"></use>
|
|
307
|
+
</svg>
|
|
308
|
+
<div class="name">形状-三角形</div>
|
|
309
|
+
<div class="code-name">#icon-xingzhuang-sanjiaoxing</div>
|
|
310
|
+
</li>
|
|
311
|
+
|
|
312
|
+
<li class="dib">
|
|
313
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
314
|
+
<use xlink:href="#icon-jiantou"></use>
|
|
315
|
+
</svg>
|
|
316
|
+
<div class="name">箭头</div>
|
|
317
|
+
<div class="code-name">#icon-jiantou</div>
|
|
318
|
+
</li>
|
|
319
|
+
|
|
320
|
+
<li class="dib">
|
|
321
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
322
|
+
<use xlink:href="#icon-jiantou1"></use>
|
|
323
|
+
</svg>
|
|
324
|
+
<div class="name">箭头</div>
|
|
325
|
+
<div class="code-name">#icon-jiantou1</div>
|
|
326
|
+
</li>
|
|
327
|
+
|
|
328
|
+
<li class="dib">
|
|
329
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
330
|
+
<use xlink:href="#icon-moban"></use>
|
|
331
|
+
</svg>
|
|
332
|
+
<div class="name">模板</div>
|
|
333
|
+
<div class="code-name">#icon-moban</div>
|
|
334
|
+
</li>
|
|
335
|
+
|
|
336
|
+
<li class="dib">
|
|
337
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
338
|
+
<use xlink:href="#icon-yonghu"></use>
|
|
339
|
+
</svg>
|
|
340
|
+
<div class="name">用户</div>
|
|
341
|
+
<div class="code-name">#icon-yonghu</div>
|
|
342
|
+
</li>
|
|
343
|
+
|
|
344
|
+
<li class="dib">
|
|
345
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
346
|
+
<use xlink:href="#icon-wenzi"></use>
|
|
347
|
+
</svg>
|
|
348
|
+
<div class="name">文字</div>
|
|
349
|
+
<div class="code-name">#icon-wenzi</div>
|
|
350
|
+
</li>
|
|
351
|
+
|
|
352
|
+
<li class="dib">
|
|
353
|
+
<svg class="icon svg-icon" aria-hidden="true">
|
|
354
|
+
<use xlink:href="#icon-sucai"></use>
|
|
355
|
+
</svg>
|
|
356
|
+
<div class="name">素材</div>
|
|
357
|
+
<div class="code-name">#icon-sucai</div>
|
|
358
|
+
</li>
|
|
359
|
+
|
|
360
|
+
</ul>
|
|
361
|
+
<div class="article markdown">
|
|
362
|
+
<h2 id="symbol-">Symbol 引用</h2>
|
|
363
|
+
<hr>
|
|
364
|
+
|
|
365
|
+
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
|
366
|
+
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p>
|
|
367
|
+
<ul>
|
|
368
|
+
<li>支持多色图标了,不再受单色限制。</li>
|
|
369
|
+
<li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
|
|
370
|
+
<li>兼容性较差,支持 IE9+,及现代浏览器。</li>
|
|
371
|
+
<li>浏览器渲染 SVG 的性能一般,还不如 png。</li>
|
|
372
|
+
</ul>
|
|
373
|
+
<p>使用步骤如下:</p>
|
|
374
|
+
<h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3>
|
|
375
|
+
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
|
376
|
+
</code></pre>
|
|
377
|
+
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
|
|
378
|
+
<pre><code class="language-html"><style>
|
|
379
|
+
.icon {
|
|
380
|
+
width: 1em;
|
|
381
|
+
height: 1em;
|
|
382
|
+
vertical-align: -0.15em;
|
|
383
|
+
fill: currentColor;
|
|
384
|
+
overflow: hidden;
|
|
385
|
+
}
|
|
386
|
+
</style>
|
|
387
|
+
</code></pre>
|
|
388
|
+
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
|
|
389
|
+
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
|
390
|
+
<use xlink:href="#icon-xxx"></use>
|
|
391
|
+
</svg>
|
|
392
|
+
</code></pre>
|
|
393
|
+
</div>
|
|
394
|
+
</div>
|
|
395
|
+
|
|
396
|
+
</div>
|
|
397
|
+
</div>
|
|
398
|
+
<script>
|
|
399
|
+
$(document).ready(function () {
|
|
400
|
+
$('.tab-container .content:first').show()
|
|
401
|
+
|
|
402
|
+
$('#tabs li').click(function (e) {
|
|
403
|
+
var tabContent = $('.tab-container .content')
|
|
404
|
+
var index = $(this).index()
|
|
405
|
+
|
|
406
|
+
if ($(this).hasClass('active')) {
|
|
407
|
+
return
|
|
408
|
+
} else {
|
|
409
|
+
$('#tabs li').removeClass('active')
|
|
410
|
+
$(this).addClass('active')
|
|
411
|
+
|
|
412
|
+
tabContent.hide().eq(index).fadeIn()
|
|
413
|
+
}
|
|
414
|
+
})
|
|
415
|
+
})
|
|
416
|
+
</script>
|
|
417
|
+
</body>
|
|
418
|
+
</html>
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
@font-face {
|
|
2
|
+
font-family: "iconfont"; /* Project id 4716609 */
|
|
3
|
+
src: url('iconfont.woff2?t=1729582264392') format('woff2'),
|
|
4
|
+
url('iconfont.woff?t=1729582264392') format('woff'),
|
|
5
|
+
url('iconfont.ttf?t=1729582264392') format('truetype');
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.iconfont {
|
|
9
|
+
font-family: "iconfont" !important;
|
|
10
|
+
font-size: 16px;
|
|
11
|
+
font-style: normal;
|
|
12
|
+
-webkit-font-smoothing: antialiased;
|
|
13
|
+
-moz-osx-font-smoothing: grayscale;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.icon-tupian:before {
|
|
17
|
+
content: "\e8ba";
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.icon-yuanhuan:before {
|
|
21
|
+
content: "\e831";
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.icon-xingzhuang-juxing:before {
|
|
25
|
+
content: "\eb97";
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.icon-xingzhuang-sanjiaoxing:before {
|
|
29
|
+
content: "\eb99";
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.icon-jiantou:before {
|
|
33
|
+
content: "\e621";
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.icon-jiantou1:before {
|
|
37
|
+
content: "\e600";
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.icon-moban:before {
|
|
41
|
+
content: "\e76a";
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.icon-yonghu:before {
|
|
45
|
+
content: "\e788";
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.icon-wenzi:before {
|
|
49
|
+
content: "\e883";
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.icon-sucai:before {
|
|
53
|
+
content: "\e833";
|
|
54
|
+
}
|
|
55
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
window._iconfont_svg_string_4716609='<svg><symbol id="icon-tupian" viewBox="0 0 1024 1024"><path d="M938.666667 553.92V768c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V256c0-64.8 52.533333-117.333333 117.333334-117.333333h618.666666c64.8 0 117.333333 52.533333 117.333334 117.333333v297.92z m-64-74.624V256a53.333333 53.333333 0 0 0-53.333334-53.333333H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333333v344.48A290.090667 290.090667 0 0 1 192 597.333333a286.88 286.88 0 0 1 183.296 65.845334C427.029333 528.384 556.906667 437.333333 704 437.333333c65.706667 0 126.997333 16.778667 170.666667 41.962667z m0 82.24c-5.333333-8.32-21.130667-21.653333-43.648-32.917333C796.768 511.488 753.045333 501.333333 704 501.333333c-121.770667 0-229.130667 76.266667-270.432 188.693334-2.730667 7.445333-7.402667 20.32-13.994667 38.581333-7.68 21.301333-34.453333 28.106667-51.370666 13.056-16.437333-14.634667-28.554667-25.066667-36.138667-31.146667A222.890667 222.890667 0 0 0 192 661.333333c-14.464 0-28.725333 1.365333-42.666667 4.053334V768a53.333333 53.333333 0 0 0 53.333334 53.333333h618.666666a53.333333 53.333333 0 0 0 53.333334-53.333333V561.525333zM320 480a96 96 0 1 1 0-192 96 96 0 0 1 0 192z m0-64a32 32 0 1 0 0-64 32 32 0 0 0 0 64z" fill="#000000" ></path></symbol><symbol id="icon-yuanhuan" viewBox="0 0 1024 1024"><path d="M480 64C250.24 64 64 250.24 64 480 64 709.76 250.24 896 480 896c229.76 0 416-186.24 416-416C896 250.24 709.76 64 480 64zM480 832C285.44 832 128 674.56 128 480 128 285.44 285.44 128 480 128 674.56 128 832 285.44 832 480 832 674.56 674.56 832 480 832z" ></path></symbol><symbol id="icon-xingzhuang-juxing" viewBox="0 0 1024 1024"><path d="M864 896H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h704a32 32 0 0 1 32 32v704a32 32 0 0 1-32 32zM192 832h640V192H192v640z" ></path></symbol><symbol id="icon-xingzhuang-sanjiaoxing" viewBox="0 0 1024 1024"><path d="M928.64 896a2.144 2.144 0 0 1-0.64 0H96a32.032 32.032 0 0 1-27.552-48.288l416-704c11.488-19.456 43.552-19.456 55.104 0l413.152 699.2A31.936 31.936 0 0 1 928.64 896zM152.064 832h719.84L512 222.912 152.064 832z" fill="#2A323A" ></path></symbol><symbol id="icon-jiantou" viewBox="0 0 1024 1024"><path d="M693.333333 512c0 14.933333-4.266667 29.866667-14.933333 40.533333l-234.666667 277.333334c-23.466667 27.733333-64 29.866667-89.6 8.533333-27.733333-23.466667-29.866667-64-8.533333-89.6L546.133333 512l-200.533333-236.8c-23.466667-27.733333-19.2-68.266667 8.533333-89.6 27.733333-23.466667 68.266667-19.2 89.6 8.533333l234.666667 277.333334c10.666667 10.666667 14.933333 25.6 14.933333 40.533333z" fill="" ></path></symbol><symbol id="icon-jiantou1" viewBox="0 0 1024 1024"><path d="M330.666667 512c0-14.933333 4.266667-29.866667 14.933333-40.533333l234.666667-277.33333399c23.466667-27.733333 64-29.866667 89.6-8.53333301 27.733333 23.466667 29.866667 64 8.53333299 89.6L477.866667 512l200.53333299 236.8c23.466667 27.733333 19.19999999 68.266667-8.53333299 89.6-27.733333 23.466667-68.266667 19.19999999-89.6-8.53333301l-234.666667-277.33333399c-10.666667-10.666667-14.933333-25.6-14.933333-40.533333z" fill="" ></path></symbol><symbol id="icon-moban" viewBox="0 0 1024 1024"><path d="M64 127.712C64 92.512 92.864 64 128.288 64h255.424C419.232 64 448 92.8 448 127.712V896.32c0 35.2-28.864 63.712-64.288 63.712H128.32C92.768 960 64 931.2 64 896.288V127.68z m64 32.32v703.936c0 17.728 14.272 32.032 31.904 32.032h192.192c17.408 0 31.904-14.336 31.904-32V160c0-17.696-14.272-32-31.904-32H159.904C142.496 128 128 142.336 128 160z m384-31.744C512 92.768 540.704 64 576.192 64h319.616C931.264 64 960 92.864 960 128.288v255.424c0 35.52-28.704 64.288-64.192 64.288h-319.616A64.288 64.288 0 0 1 512 383.712V128.32z m64 31.616v192.192a32 32 0 0 0 31.84 31.904h256.32c17.28 0 31.84-14.272 31.84-31.904V159.904A32 32 0 0 0 864.16 128h-256.32c-17.28 0-31.84 14.272-31.84 31.904z m-64 416.288c0-35.456 28.704-64.192 64.192-64.192h319.616c35.456 0 64.192 28.704 64.192 64.192v319.616A64.16 64.16 0 0 1 895.808 960h-319.616A64.16 64.16 0 0 1 512 895.808v-319.616z m64 31.68v256.288c0 17.28 14.272 31.84 31.84 31.84h256.32c17.28 0 31.84-14.272 31.84-31.84v-256.32c0-17.28-14.272-31.84-31.84-31.84h-256.32c-17.28 0-31.84 14.272-31.84 31.84z" fill="#333333" ></path></symbol><symbol id="icon-yonghu" viewBox="0 0 1024 1024"><path d="M511.913993 941.605241c-255.612968 0-385.311608-57.452713-385.311608-170.810012 0-80.846632 133.654964-133.998992 266.621871-151.88846L393.224257 602.049387c-79.986561-55.904586-118.86175-153.436587-118.86175-297.240383 0-139.33143 87.211154-222.586259 233.423148-222.586259l7.912649 0c146.211994 0 233.423148 83.254829 233.423148 222.586259 0 54.184445 0 214.67361-117.829666 297.412397l-0.344028 16.685369c132.966907 18.061482 266.105829 71.041828 266.105829 151.716445C897.225601 884.152528 767.526961 941.605241 511.913993 941.605241zM507.957668 141.567613c-79.470519 0-174.250294 28.382328-174.250294 163.241391 0 129.698639 34.230808 213.469511 104.584579 255.784982 8.944734 5.332437 14.277171 14.965228 14.277171 25.286074l0 59.344868c0 15.309256-11.524945 28.0383-26.662187 29.414413-144.319839 14.449185-239.959684 67.429531-239.959684 95.983874 0 92.199563 177.346548 111.637158 325.966739 111.637158 148.792206 0 325.966739-19.26558 325.966739-111.637158 0-28.726356-95.639845-81.534688-239.959684-95.983874-15.48127-1.548127-27.006215-14.621199-26.662187-30.102469l1.376113-59.344868c0.172014-10.148833 5.676466-19.437594 14.277171-24.770032 70.525785-42.487485 103.208466-123.678145 103.208466-255.784982 0-135.031077-94.779775-163.241391-174.250294-163.241391L507.957668 141.567613 507.957668 141.567613z" fill="#575B66" ></path></symbol><symbol id="icon-wenzi" viewBox="0 0 1024 1024"><path d="M921.6 0H204.8v102.4h716.8v716.8h102.4V0h-102.4z" fill="#333333" ></path><path d="M0 1024h819.2V204.8H0zM153.6 358.4h512v102.4H460.8v409.6H358.4V460.8H153.6z" fill="#333333" ></path></symbol><symbol id="icon-sucai" viewBox="0 0 1024 1024"><path d="M509.8 808.5c-12.8 0-25.6-3.2-37-9.3l-0.2-0.1-0.2-0.1-300.1-163.9L83 680c-13.8 7.2-19.2 24.2-12.1 37.9 2.6 4.9 6.6 9 11.5 11.7l414.1 226c4.1 2.2 8.7 3.4 13.4 3.4 4.6 0 9.2-1.1 13.2-3.4l418.6-226c9.2-4.9 14.9-14.5 14.8-24.7-0.2-10.4-6-19.9-15.2-24.7l-89.6-45.6-304.5 164.3c-11.3 6.3-24.2 9.6-37.4 9.6z" fill="#272635" ></path><path d="M954.6 495c-0.7-1.8-1.5-3.5-2.5-5.1-2.6-4.3-6.4-7.9-11-10.3L851.5 434 660.3 537.2l-113.1 61.1c-11.3 6.3-24.2 9.6-37.4 9.6-12.8 0-25.6-3.2-37-9.3l-0.2-0.1-0.2-0.1-109.2-59.6-190.9-104.3-89.3 45c-9.9 5.2-15.5 15.4-15.2 25.8 0 0.5 0 0.9 0.1 1.4 0.1 0.9 0.2 1.7 0.3 2.5l0.3 1.5c0.5 2.3 1.3 4.5 2.4 6.6 1.5 2.8 3.5 5.4 5.9 7.6l2.1 1.8c1.1 0.8 2.3 1.6 3.5 2.3l144.1 78.7 36.4 19.9 233.5 127.5c4.1 2.2 8.7 3.4 13.4 3.4 4.6 0 9.2-1.1 13.2-3.4l274.4-148.2 80-43.2 64.2-34.7c0.8-0.4 1.5-0.9 2.2-1.3 7.9-5.2 12.7-14 12.6-23.4-0.1-3.2-0.7-6.4-1.8-9.3z" fill="#272635" ></path><path d="M82.3 328.4l414.1 226c4.1 2.2 8.7 3.4 13.4 3.4 4.6 0 9.2-1.1 13.2-3.4l418.6-226c9.2-4.9 14.9-14.5 14.8-24.7-0.2-10.4-6-19.9-15.2-24.7L526.8 68c-7.9-4-17.3-4-25.2 0L82.9 278.8C69.1 286 63.7 303 70.8 316.7c2.6 4.9 6.6 9 11.5 11.7z" fill="#272635" ></path></symbol></svg>',(c=>{var t=(e=(e=document.getElementsByTagName("script"))[e.length-1]).getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var i,o,n,l,a,d=function(t,e){e.parentNode.insertBefore(t,e)};if(t&&!c.__iconfont__svg__cssinject__){c.__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(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=c._iconfont_svg_string_4716609,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?d(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),i()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(n=i,l=c.document,a=!1,s(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,h())})}function h(){a||(a=!0,n())}function s(){try{l.documentElement.doScroll("left")}catch(t){return void setTimeout(s,50)}h()}})(window);
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "4716609",
|
|
3
|
+
"name": "editor",
|
|
4
|
+
"font_family": "iconfont",
|
|
5
|
+
"css_prefix_text": "icon-",
|
|
6
|
+
"description": "",
|
|
7
|
+
"glyphs": [
|
|
8
|
+
{
|
|
9
|
+
"icon_id": "11372711",
|
|
10
|
+
"name": "图片",
|
|
11
|
+
"font_class": "tupian",
|
|
12
|
+
"unicode": "e8ba",
|
|
13
|
+
"unicode_decimal": 59578
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
"icon_id": "689326",
|
|
17
|
+
"name": "圆环",
|
|
18
|
+
"font_class": "yuanhuan",
|
|
19
|
+
"unicode": "e831",
|
|
20
|
+
"unicode_decimal": 59441
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"icon_id": "4354249",
|
|
24
|
+
"name": "形状-矩形",
|
|
25
|
+
"font_class": "xingzhuang-juxing",
|
|
26
|
+
"unicode": "eb97",
|
|
27
|
+
"unicode_decimal": 60311
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"icon_id": "4354256",
|
|
31
|
+
"name": "形状-三角形",
|
|
32
|
+
"font_class": "xingzhuang-sanjiaoxing",
|
|
33
|
+
"unicode": "eb99",
|
|
34
|
+
"unicode_decimal": 60313
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"icon_id": "3894654",
|
|
38
|
+
"name": "箭头",
|
|
39
|
+
"font_class": "jiantou",
|
|
40
|
+
"unicode": "e621",
|
|
41
|
+
"unicode_decimal": 58913
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"icon_id": "18829236",
|
|
45
|
+
"name": "箭头",
|
|
46
|
+
"font_class": "jiantou1",
|
|
47
|
+
"unicode": "e600",
|
|
48
|
+
"unicode_decimal": 58880
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"icon_id": "3923002",
|
|
52
|
+
"name": "模板",
|
|
53
|
+
"font_class": "moban",
|
|
54
|
+
"unicode": "e76a",
|
|
55
|
+
"unicode_decimal": 59242
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"icon_id": "579741",
|
|
59
|
+
"name": "用户",
|
|
60
|
+
"font_class": "yonghu",
|
|
61
|
+
"unicode": "e788",
|
|
62
|
+
"unicode_decimal": 59272
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"icon_id": "9626955",
|
|
66
|
+
"name": "文字",
|
|
67
|
+
"font_class": "wenzi",
|
|
68
|
+
"unicode": "e883",
|
|
69
|
+
"unicode_decimal": 59523
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"icon_id": "13901301",
|
|
73
|
+
"name": "素材",
|
|
74
|
+
"font_class": "sucai",
|
|
75
|
+
"unicode": "e833",
|
|
76
|
+
"unicode_decimal": 59443
|
|
77
|
+
}
|
|
78
|
+
]
|
|
79
|
+
}
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import './iconfont.css';
|
|
4
|
+
|
|
5
|
+
export type IconName =
|
|
6
|
+
| 'moban'
|
|
7
|
+
| 'yonghu'
|
|
8
|
+
| 'wenzi'
|
|
9
|
+
| 'sucai'
|
|
10
|
+
| 'jiantou'
|
|
11
|
+
| 'jiantou1'
|
|
12
|
+
| 'xingzhuang-sanjiaoxing'
|
|
13
|
+
| 'xingzhuang-juxing'
|
|
14
|
+
| 'yuanhuan'
|
|
15
|
+
| 'tupian';
|
|
16
|
+
|
|
17
|
+
interface Props
|
|
18
|
+
extends React.DetailedHTMLProps<
|
|
19
|
+
React.HTMLAttributes<HTMLSpanElement>,
|
|
20
|
+
HTMLSpanElement
|
|
21
|
+
> {
|
|
22
|
+
name: IconName;
|
|
23
|
+
size?: number;
|
|
24
|
+
style?: React.CSSProperties;
|
|
25
|
+
className?: string;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
function Component(props: Props) {
|
|
29
|
+
const { name, className, size = 24, style, ...restProps } = props;
|
|
30
|
+
return (
|
|
31
|
+
<span
|
|
32
|
+
className={classNames('iconfont', 'icon-' + name, className)}
|
|
33
|
+
style={{ fontSize: size, cursor: 'pointer', ...style }}
|
|
34
|
+
{...restProps}
|
|
35
|
+
></span>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export default Component;
|