@cregis/icon-react-native 0.0.1
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/README.html +278 -0
- package/README.md +133 -0
- package/dist/index.cjs +7941 -0
- package/dist/index.d.cts +703 -0
- package/dist/index.d.ts +703 -0
- package/dist/index.js +7569 -0
- package/package.json +50 -0
package/README.html
ADDED
|
@@ -0,0 +1,278 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>cregis-icon-react-native</title>
|
|
6
|
+
<style>
|
|
7
|
+
/* From extension vscode.github */
|
|
8
|
+
/*---------------------------------------------------------------------------------------------
|
|
9
|
+
* Copyright (c) Microsoft Corporation. All rights reserved.
|
|
10
|
+
* Licensed under the MIT License. See License.txt in the project root for license information.
|
|
11
|
+
*--------------------------------------------------------------------------------------------*/
|
|
12
|
+
|
|
13
|
+
.vscode-dark img[src$=\#gh-light-mode-only],
|
|
14
|
+
.vscode-light img[src$=\#gh-dark-mode-only],
|
|
15
|
+
.vscode-high-contrast:not(.vscode-high-contrast-light) img[src$=\#gh-light-mode-only],
|
|
16
|
+
.vscode-high-contrast-light img[src$=\#gh-dark-mode-only] {
|
|
17
|
+
display: none;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
</style>
|
|
21
|
+
|
|
22
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
|
|
23
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
|
|
24
|
+
<style>
|
|
25
|
+
body {
|
|
26
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif;
|
|
27
|
+
font-size: 14px;
|
|
28
|
+
line-height: 1.6;
|
|
29
|
+
}
|
|
30
|
+
</style>
|
|
31
|
+
<style>
|
|
32
|
+
.task-list-item {
|
|
33
|
+
list-style-type: none;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.task-list-item-checkbox {
|
|
37
|
+
margin-left: -20px;
|
|
38
|
+
vertical-align: middle;
|
|
39
|
+
pointer-events: none;
|
|
40
|
+
}
|
|
41
|
+
</style>
|
|
42
|
+
<style>
|
|
43
|
+
:root {
|
|
44
|
+
--color-note: #0969da;
|
|
45
|
+
--color-tip: #1a7f37;
|
|
46
|
+
--color-warning: #9a6700;
|
|
47
|
+
--color-severe: #bc4c00;
|
|
48
|
+
--color-caution: #d1242f;
|
|
49
|
+
--color-important: #8250df;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
</style>
|
|
53
|
+
<style>
|
|
54
|
+
@media (prefers-color-scheme: dark) {
|
|
55
|
+
:root {
|
|
56
|
+
--color-note: #2f81f7;
|
|
57
|
+
--color-tip: #3fb950;
|
|
58
|
+
--color-warning: #d29922;
|
|
59
|
+
--color-severe: #db6d28;
|
|
60
|
+
--color-caution: #f85149;
|
|
61
|
+
--color-important: #a371f7;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
</style>
|
|
66
|
+
<style>
|
|
67
|
+
.markdown-alert {
|
|
68
|
+
padding: 0.5rem 1rem;
|
|
69
|
+
margin-bottom: 16px;
|
|
70
|
+
color: inherit;
|
|
71
|
+
border-left: .25em solid #888;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.markdown-alert>:first-child {
|
|
75
|
+
margin-top: 0
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.markdown-alert>:last-child {
|
|
79
|
+
margin-bottom: 0
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.markdown-alert .markdown-alert-title {
|
|
83
|
+
display: flex;
|
|
84
|
+
font-weight: 500;
|
|
85
|
+
align-items: center;
|
|
86
|
+
line-height: 1
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.markdown-alert .markdown-alert-title .octicon {
|
|
90
|
+
margin-right: 0.5rem;
|
|
91
|
+
display: inline-block;
|
|
92
|
+
overflow: visible !important;
|
|
93
|
+
vertical-align: text-bottom;
|
|
94
|
+
fill: currentColor;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.markdown-alert.markdown-alert-note {
|
|
98
|
+
border-left-color: var(--color-note);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.markdown-alert.markdown-alert-note .markdown-alert-title {
|
|
102
|
+
color: var(--color-note);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.markdown-alert.markdown-alert-important {
|
|
106
|
+
border-left-color: var(--color-important);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.markdown-alert.markdown-alert-important .markdown-alert-title {
|
|
110
|
+
color: var(--color-important);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.markdown-alert.markdown-alert-warning {
|
|
114
|
+
border-left-color: var(--color-warning);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.markdown-alert.markdown-alert-warning .markdown-alert-title {
|
|
118
|
+
color: var(--color-warning);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.markdown-alert.markdown-alert-tip {
|
|
122
|
+
border-left-color: var(--color-tip);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.markdown-alert.markdown-alert-tip .markdown-alert-title {
|
|
126
|
+
color: var(--color-tip);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.markdown-alert.markdown-alert-caution {
|
|
130
|
+
border-left-color: var(--color-caution);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.markdown-alert.markdown-alert-caution .markdown-alert-title {
|
|
134
|
+
color: var(--color-caution);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
</style>
|
|
138
|
+
|
|
139
|
+
</head>
|
|
140
|
+
<body class="vscode-body vscode-light">
|
|
141
|
+
<h1 id="cregis-icon-react-native">cregis-icon-react-native</h1>
|
|
142
|
+
<p>React Native 图标库，支持全局主题（大小、颜色）与单图标覆盖。</p>
|
|
143
|
+
<h2 id="安装">安装</h2>
|
|
144
|
+
<pre><code class="language-bash">npm install cregis-icon-react-native
|
|
145
|
+
</code></pre>
|
|
146
|
+
<h2 id="快速使用">快速使用</h2>
|
|
147
|
+
<h3 id="1️⃣-基础用法">1️⃣ 基础用法</h3>
|
|
148
|
+
<pre><code class="language-tsx"><span class="hljs-keyword">import</span> {
|
|
149
|
+
<span class="hljs-title class_">Add</span>,
|
|
150
|
+
<span class="hljs-title class_">Check</span>,
|
|
151
|
+
<span class="hljs-title class_">ArrowRight</span>,
|
|
152
|
+
<span class="hljs-title class_">Close</span>
|
|
153
|
+
} <span class="hljs-keyword">from</span> <span class="hljs-string">"cregis-icon-react-native"</span>;
|
|
154
|
+
<span class="hljs-keyword">import</span> { <span class="hljs-title class_">View</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
|
155
|
+
|
|
156
|
+
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">App</span>(<span class="hljs-params"></span>) {
|
|
157
|
+
<span class="hljs-keyword">return</span> (
|
|
158
|
+
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">View</span>></span>
|
|
159
|
+
<span class="hljs-tag"><<span class="hljs-name">Add</span> /></span>
|
|
160
|
+
<span class="hljs-tag"><<span class="hljs-name">ArrowRight</span> /></span>
|
|
161
|
+
<span class="hljs-tag"><<span class="hljs-name">Check</span> <span class="hljs-attr">size</span>=<span class="hljs-string">{20}</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#16a34a"</span> /></span>
|
|
162
|
+
<span class="hljs-tag"><<span class="hljs-name">Close</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#ef4444"</span> /></span>
|
|
163
|
+
<span class="hljs-tag"></<span class="hljs-name">View</span>></span></span>
|
|
164
|
+
)
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
</code></pre>
|
|
168
|
+
<h3 id="2️⃣-使用iconprovider">2️⃣ 使用IconProvider</h3>
|
|
169
|
+
<pre><code class="language-tsx"><span class="hljs-keyword">import</span> {
|
|
170
|
+
<span class="hljs-title class_">IconProvider</span>,
|
|
171
|
+
<span class="hljs-title class_">Add</span>,
|
|
172
|
+
<span class="hljs-title class_">Check</span>,
|
|
173
|
+
<span class="hljs-title class_">ArrowRight</span>,
|
|
174
|
+
<span class="hljs-title class_">Close</span>,
|
|
175
|
+
} <span class="hljs-keyword">from</span> <span class="hljs-string">"cregis-icon-react-native"</span>;
|
|
176
|
+
<span class="hljs-keyword">import</span> { <span class="hljs-title class_">View</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
|
177
|
+
|
|
178
|
+
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">App</span>(<span class="hljs-params"></span>) {
|
|
179
|
+
<span class="hljs-keyword">return</span> (
|
|
180
|
+
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">View</span>></span>
|
|
181
|
+
<span class="hljs-tag"><<span class="hljs-name">IconProvider</span> <span class="hljs-attr">size</span>=<span class="hljs-string">{28}</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#2563eb"</span>></span>
|
|
182
|
+
{/* 继承IconProvider主题 */}
|
|
183
|
+
<span class="hljs-tag"><<span class="hljs-name">Add</span> /></span>
|
|
184
|
+
<span class="hljs-tag"><<span class="hljs-name">ArrowRight</span> /></span>
|
|
185
|
+
{/* 单独覆盖 */}
|
|
186
|
+
<span class="hljs-tag"><<span class="hljs-name">Check</span> <span class="hljs-attr">size</span>=<span class="hljs-string">{20}</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#16a34a"</span> /></span>
|
|
187
|
+
<span class="hljs-tag"><<span class="hljs-name">Close</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"#ef4444"</span> /></span>
|
|
188
|
+
<span class="hljs-tag"></<span class="hljs-name">IconProvider</span>></span>;
|
|
189
|
+
<span class="hljs-tag"></<span class="hljs-name">View</span>></span></span>
|
|
190
|
+
)
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
</code></pre>
|
|
194
|
+
<h3 id="3️⃣-项目入口设置全局样式">3️⃣ 项目入口设置全局样式</h3>
|
|
195
|
+
<pre><code class="language-ts"><span class="hljs-keyword">import</span> { setDefaultIconTheme } <span class="hljs-keyword">from</span> <span class="hljs-string">"cregis-icon-react-native"</span>;
|
|
196
|
+
|
|
197
|
+
<span class="hljs-title function_">setDefaultIconTheme</span>({ <span class="hljs-attr">size</span>: <span class="hljs-number">36</span>, <span class="hljs-attr">color</span>: <span class="hljs-string">"#111827"</span> });
|
|
198
|
+
</code></pre>
|
|
199
|
+
<h2 id="api">API</h2>
|
|
200
|
+
<h3 id="组件配置">组件配置</h3>
|
|
201
|
+
<p>优先级：高</p>
|
|
202
|
+
<table>
|
|
203
|
+
<thead>
|
|
204
|
+
<tr>
|
|
205
|
+
<th>属性名</th>
|
|
206
|
+
<th>类型</th>
|
|
207
|
+
<th>说明</th>
|
|
208
|
+
<th>默认值</th>
|
|
209
|
+
</tr>
|
|
210
|
+
</thead>
|
|
211
|
+
<tbody>
|
|
212
|
+
<tr>
|
|
213
|
+
<td><code>size</code></td>
|
|
214
|
+
<td><code>string</code></td>
|
|
215
|
+
<td>图标大小</td>
|
|
216
|
+
<td>24</td>
|
|
217
|
+
</tr>
|
|
218
|
+
<tr>
|
|
219
|
+
<td><code>color</code></td>
|
|
220
|
+
<td><code>string</code></td>
|
|
221
|
+
<td>图标颜色</td>
|
|
222
|
+
<td>#111827</td>
|
|
223
|
+
</tr>
|
|
224
|
+
</tbody>
|
|
225
|
+
</table>
|
|
226
|
+
<h3 id="iconprovider配置">IconProvider配置</h3>
|
|
227
|
+
<p>优先级：中</p>
|
|
228
|
+
<table>
|
|
229
|
+
<thead>
|
|
230
|
+
<tr>
|
|
231
|
+
<th>属性名</th>
|
|
232
|
+
<th>类型</th>
|
|
233
|
+
<th>说明</th>
|
|
234
|
+
</tr>
|
|
235
|
+
</thead>
|
|
236
|
+
<tbody>
|
|
237
|
+
<tr>
|
|
238
|
+
<td><code>size</code></td>
|
|
239
|
+
<td><code>string</code></td>
|
|
240
|
+
<td>图标大小</td>
|
|
241
|
+
</tr>
|
|
242
|
+
<tr>
|
|
243
|
+
<td><code>color</code></td>
|
|
244
|
+
<td><code>string</code></td>
|
|
245
|
+
<td>图标颜色</td>
|
|
246
|
+
</tr>
|
|
247
|
+
</tbody>
|
|
248
|
+
</table>
|
|
249
|
+
<h3 id="全局配置">全局配置</h3>
|
|
250
|
+
<p>优先级：低</p>
|
|
251
|
+
<pre><code class="language-ts"><span class="hljs-title function_">setDefaultIconTheme</span>({ <span class="hljs-attr">size</span>: <span class="hljs-number">36</span>, <span class="hljs-attr">color</span>: <span class="hljs-string">"#111827"</span> });
|
|
252
|
+
</code></pre>
|
|
253
|
+
<table>
|
|
254
|
+
<thead>
|
|
255
|
+
<tr>
|
|
256
|
+
<th>属性名</th>
|
|
257
|
+
<th>类型</th>
|
|
258
|
+
<th>说明</th>
|
|
259
|
+
</tr>
|
|
260
|
+
</thead>
|
|
261
|
+
<tbody>
|
|
262
|
+
<tr>
|
|
263
|
+
<td><code>size</code></td>
|
|
264
|
+
<td><code>string</code></td>
|
|
265
|
+
<td>图标大小</td>
|
|
266
|
+
</tr>
|
|
267
|
+
<tr>
|
|
268
|
+
<td><code>color</code></td>
|
|
269
|
+
<td><code>string</code></td>
|
|
270
|
+
<td>图标颜色</td>
|
|
271
|
+
</tr>
|
|
272
|
+
</tbody>
|
|
273
|
+
</table>
|
|
274
|
+
|
|
275
|
+
|
|
276
|
+
|
|
277
|
+
</body>
|
|
278
|
+
</html>
|
package/README.md
ADDED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
# cregis-icon-react-native
|
|
2
|
+
|
|
3
|
+
React Native 图标库，支持全局主题（大小、颜色）与单图标覆盖。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install cregis-icon-react-native
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 快速使用
|
|
12
|
+
|
|
13
|
+
### 1️⃣ 基础用法
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import {
|
|
17
|
+
EdsAddAddressBooks,
|
|
18
|
+
EdsAddCircle,
|
|
19
|
+
EdsAddCircleFill,
|
|
20
|
+
EdsAddEmployerFill,
|
|
21
|
+
} from "cregis-icon-react-native";
|
|
22
|
+
import { View } from 'react-native';
|
|
23
|
+
|
|
24
|
+
export default function App() {
|
|
25
|
+
return (
|
|
26
|
+
<View>
|
|
27
|
+
<EdsAddAddressBooks />
|
|
28
|
+
<EdsAddCircle />
|
|
29
|
+
<EdsAddCircleFill size={20} color="#16a34a" />
|
|
30
|
+
<EdsAddEmployerFill color="#ef4444" />
|
|
31
|
+
</View>
|
|
32
|
+
)
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
### 2️⃣ 使用CregisIconProvider
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import {
|
|
43
|
+
EdsAddAddressBooks,
|
|
44
|
+
EdsAddCircle,
|
|
45
|
+
EdsAddCircleFill,
|
|
46
|
+
EdsAddEmployerFill,
|
|
47
|
+
CregisIconProvider
|
|
48
|
+
} from "cregis-icon-react-native";
|
|
49
|
+
import { View } from 'react-native';
|
|
50
|
+
|
|
51
|
+
export default function App() {
|
|
52
|
+
return (
|
|
53
|
+
<View>
|
|
54
|
+
<CregisIconProvider size={28} color="#2563eb">
|
|
55
|
+
{/* 继承CregisIconProvider主题 */}
|
|
56
|
+
<EdsAddAddressBooks />
|
|
57
|
+
<EdsAddCircle />
|
|
58
|
+
{/* 单独覆盖 */}
|
|
59
|
+
<EdsAddCircleFill size={20} color="#16a34a" />
|
|
60
|
+
<CregisIconProvider color="#ef4444">
|
|
61
|
+
<EdsAddEmployerFill />
|
|
62
|
+
</CregisIconProvider>
|
|
63
|
+
</CregisIconProvider>
|
|
64
|
+
</View>
|
|
65
|
+
)
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### 3️⃣ 使用CregisIcon（字符串方式）
|
|
71
|
+
|
|
72
|
+
通过字符串名称使用图标，适合动态场景：
|
|
73
|
+
|
|
74
|
+
```tsx
|
|
75
|
+
import { CregisIcon } from "cregis-icon-react-native";
|
|
76
|
+
import { View } from 'react-native';
|
|
77
|
+
|
|
78
|
+
export default function App() {
|
|
79
|
+
return (
|
|
80
|
+
<View>
|
|
81
|
+
<CregisIcon icon="eds-add-address-books" size={22} color="#f0f" />
|
|
82
|
+
<CregisIcon icon="eds-add-circle" size={24} color="#16a34a" />
|
|
83
|
+
<CregisIcon icon="eds-alarm-fill" />
|
|
84
|
+
</View>
|
|
85
|
+
)
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### 4️⃣ 项目入口设置全局样式
|
|
90
|
+
|
|
91
|
+
```ts
|
|
92
|
+
import { setDefaultIconTheme } from "cregis-icon-react-native";
|
|
93
|
+
|
|
94
|
+
setDefaultIconTheme({ size: 24, color: "#111827" });
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
## API
|
|
98
|
+
|
|
99
|
+
### 组件配置
|
|
100
|
+
优先级：高
|
|
101
|
+
|
|
102
|
+
| 属性名 | 类型 | 说明 | 默认值 |
|
|
103
|
+
|--------|------|------|--------|
|
|
104
|
+
| `size` | `number` | 图标大小 | 24 |
|
|
105
|
+
| `color` | `string` | 图标颜色 | #111827 |
|
|
106
|
+
|
|
107
|
+
### CregisIcon配置
|
|
108
|
+
优先级：高（与组件配置相同）
|
|
109
|
+
|
|
110
|
+
| 属性名 | 类型 | 说明 | 默认值 |
|
|
111
|
+
|--------|------|------|--------|
|
|
112
|
+
| `icon` | `string` | 图标名称（kebab-case格式，如 "eds-add-address-books"） | - |
|
|
113
|
+
| `size` | `number` | 图标大小 | 继承主题或 24 |
|
|
114
|
+
| `color` | `string` | 图标颜色 | 继承主题或 #111827 |
|
|
115
|
+
|
|
116
|
+
### CregisIconProvider配置
|
|
117
|
+
优先级：中
|
|
118
|
+
|
|
119
|
+
| 属性名 | 类型 | 说明 |
|
|
120
|
+
|--------|------|------|
|
|
121
|
+
| `size` | `number` | 图标大小 |
|
|
122
|
+
| `color` | `string` | 图标颜色 |
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
### 全局配置
|
|
126
|
+
优先级：低
|
|
127
|
+
```ts
|
|
128
|
+
setDefaultIconTheme({ size: 24, color: "#111827" });
|
|
129
|
+
```
|
|
130
|
+
| 属性名 | 类型 | 说明 |
|
|
131
|
+
|--------|------|------|
|
|
132
|
+
| `size` | `number` | 图标大小 |
|
|
133
|
+
| `color` | `string` | 图标颜色 |
|