@zanejs/icons 1.0.0 → 1.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.md +44 -67
- package/dist/logo.svg +118 -0
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @zanejs/icons
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<div align="center">
|
|
4
|
+
<a href="https://zanejs.com"><img alt="zanejs logo" width="215" src="https://unpkg.com/@zanejs/icons@1.0.1/dist/logo.svg"></a>
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
一个基于 Stencil 构建的现代化原生 Web Components 图标库，包含 285+ 个精心设计的 SVG 图标，不受框架限制，运行在 JS/Vue/React/Angular 项目。
|
|
4
8
|
|
|
5
9
|
[](https://www.npmjs.com/package/@zanejs/icons)
|
|
6
10
|
[](https://opensource.org/licenses/MIT)
|
|
@@ -51,6 +55,7 @@ yarn add @zanejs/icons
|
|
|
51
55
|
<head>
|
|
52
56
|
<meta charset="UTF-8">
|
|
53
57
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
58
|
+
<script src="https://cdn.jsdelivr.net/npm/@zanejs/ui/1.0.0/dist/components/index.min.js"></script>
|
|
54
59
|
<title>Zane Icons Demo</title>
|
|
55
60
|
</head>
|
|
56
61
|
<body>
|
|
@@ -62,21 +67,31 @@ yarn add @zanejs/icons
|
|
|
62
67
|
|
|
63
68
|
<!-- 使用关闭图标 -->
|
|
64
69
|
<zane-icon-close-bold style="font-size: 20px; color: #999;"></zane-icon-close-bold>
|
|
65
|
-
|
|
66
|
-
<script type="module">
|
|
67
|
-
import '@zanejs/icons/loader';
|
|
68
|
-
</script>
|
|
69
70
|
</body>
|
|
70
71
|
</html>
|
|
71
72
|
```
|
|
72
73
|
|
|
73
74
|
### 在 React 中使用
|
|
74
75
|
|
|
76
|
+
```diff
|
|
77
|
+
import React from 'react';
|
|
78
|
+
import ReactDOM from 'react-dom';
|
|
79
|
+
import './index.css';
|
|
80
|
+
import App from './App';
|
|
81
|
+
import registerServiceWorker from './registerServiceWorker';
|
|
82
|
+
|
|
83
|
+
+ import { defineCustomElements } from '@zanejs/ui/loader';
|
|
84
|
+
|
|
85
|
+
ReactDOM.render(<App />, document.getElementById('root'));
|
|
86
|
+
registerServiceWorker();
|
|
87
|
+
|
|
88
|
+
+ defineCustomElements();
|
|
89
|
+
|
|
90
|
+
```
|
|
91
|
+
|
|
75
92
|
```tsx
|
|
76
93
|
import React from 'react';
|
|
77
|
-
import '@zanejs/icons/loader';
|
|
78
94
|
|
|
79
|
-
// 方式一：直接使用标签
|
|
80
95
|
function MyComponent() {
|
|
81
96
|
return (
|
|
82
97
|
<div>
|
|
@@ -86,75 +101,37 @@ function MyComponent() {
|
|
|
86
101
|
);
|
|
87
102
|
}
|
|
88
103
|
|
|
89
|
-
// 方式二：使用 Ref
|
|
90
|
-
import { useRef, useEffect } from 'react';
|
|
91
|
-
|
|
92
|
-
function IconWrapper() {
|
|
93
|
-
const iconRef = useRef<HTMLElement>(null);
|
|
94
|
-
|
|
95
|
-
useEffect(() => {
|
|
96
|
-
// 可以在这里对图标元素进行操作
|
|
97
|
-
if (iconRef.current) {
|
|
98
|
-
iconRef.current.style.color = '#007acc';
|
|
99
|
-
}
|
|
100
|
-
}, []);
|
|
101
|
-
|
|
102
|
-
return (
|
|
103
|
-
<zane-icon-search ref={iconRef} style={{ fontSize: '32px' }} />
|
|
104
|
-
);
|
|
105
|
-
}
|
|
106
104
|
```
|
|
107
105
|
|
|
108
106
|
### 在 Vue 中使用
|
|
109
107
|
|
|
110
|
-
```vue
|
|
111
|
-
<template>
|
|
112
|
-
<div class="icon-container">
|
|
113
|
-
<zane-icon-search style="font-size: 32px; color: #333;" />
|
|
114
|
-
<zane-icon-user style="font-size: 24px; color: #666;" />
|
|
115
|
-
<zane-icon-close-bold style="font-size: 20px; color: #999;" />
|
|
116
|
-
</div>
|
|
117
|
-
</template>
|
|
118
|
-
|
|
119
|
-
<script setup lang="ts">
|
|
120
|
-
import '@zanejs/icons/loader';
|
|
121
|
-
</script>
|
|
122
|
-
|
|
123
|
-
<style scoped>
|
|
124
|
-
.icon-container {
|
|
125
|
-
display: flex;
|
|
126
|
-
gap: 16px;
|
|
127
|
-
align-items: center;
|
|
128
|
-
}
|
|
129
|
-
</style>
|
|
130
|
-
```
|
|
131
108
|
|
|
132
|
-
|
|
109
|
+
```diff
|
|
110
|
+
// src/main.ts
|
|
133
111
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
import {
|
|
137
|
-
import { BrowserModule } from '@angular/platform-browser';
|
|
138
|
-
import { AppComponent } from './app.component';
|
|
112
|
+
import { createApp } from 'vue'
|
|
113
|
+
import App from './App.vue';
|
|
114
|
+
+ import { defineCustomElements } from '@zanejs/icons/loader';
|
|
139
115
|
|
|
140
|
-
|
|
141
|
-
import '@zanejs/icons/loader';
|
|
116
|
+
+ defineCustomElements();
|
|
142
117
|
|
|
143
|
-
|
|
144
|
-
declarations: [AppComponent],
|
|
145
|
-
imports: [BrowserModule],
|
|
146
|
-
providers: [],
|
|
147
|
-
schemas: [CUSTOM_ELEMENTS_SCHEMA], // 允许使用自定义元素
|
|
148
|
-
})
|
|
149
|
-
export class AppModule {}
|
|
118
|
+
createApp(App).mount('#app')
|
|
150
119
|
```
|
|
151
120
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
121
|
+
修改 vite.config.js，vue 编译兼容自定义元素
|
|
122
|
+
|
|
123
|
+
```diff
|
|
124
|
+
import { defineConfig } from 'vite';
|
|
125
|
+
|
|
126
|
+
export default defineConfig({
|
|
127
|
+
vue: {
|
|
128
|
+
template: {
|
|
129
|
+
compilerOptions: {
|
|
130
|
+
+ isCustomElement: tag => tag.startsWith('zane-')
|
|
131
|
+
},
|
|
132
|
+
},
|
|
133
|
+
},
|
|
134
|
+
});
|
|
158
135
|
```
|
|
159
136
|
|
|
160
137
|
## 🎨 图标分类
|
package/dist/logo.svg
ADDED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="800px" height="800px" viewBox="0 0 800 800">
|
|
3
|
+
<defs>
|
|
4
|
+
<linearGradient id="Gradient_1" gradientUnits="userSpaceOnUse" x1="256.9625" y1="402.1625" x2="266.4375" y2="292.8375" spreadMethod="pad">
|
|
5
|
+
<stop offset="0%" stop-color="#FE8B78"/>
|
|
6
|
+
|
|
7
|
+
<stop offset="100%" stop-color="#FA2F36"/>
|
|
8
|
+
</linearGradient>
|
|
9
|
+
|
|
10
|
+
<linearGradient id="Gradient_2" gradientUnits="userSpaceOnUse" x1="159.0125" y1="394.7875" x2="536.5875000000001" y2="112.01249999999999" spreadMethod="pad">
|
|
11
|
+
<stop offset="0%" stop-color="#FF46AE"/>
|
|
12
|
+
|
|
13
|
+
<stop offset="100%" stop-color="#F9B39A"/>
|
|
14
|
+
</linearGradient>
|
|
15
|
+
|
|
16
|
+
<linearGradient id="Gradient_3" gradientUnits="userSpaceOnUse" x1="233.58749999999998" y1="632.6125" x2="522.2125" y2="273.9875" spreadMethod="pad">
|
|
17
|
+
<stop offset="0%" stop-color="#FF25F3"/>
|
|
18
|
+
|
|
19
|
+
<stop offset="100%" stop-color="#7900AF"/>
|
|
20
|
+
</linearGradient>
|
|
21
|
+
|
|
22
|
+
<linearGradient id="Gradient_4" gradientUnits="userSpaceOnUse" x1="333.6625" y1="651.7" x2="674.4375" y2="504.8" spreadMethod="pad">
|
|
23
|
+
<stop offset="0%" stop-color="#005F73"/>
|
|
24
|
+
|
|
25
|
+
<stop offset="100%" stop-color="#00EFD8"/>
|
|
26
|
+
</linearGradient>
|
|
27
|
+
|
|
28
|
+
<linearGradient id="Gradient_5" gradientUnits="userSpaceOnUse" x1="217.58750000000003" y1="383.4875" x2="304.6125" y2="280.0125" spreadMethod="pad">
|
|
29
|
+
<stop offset="0%" stop-color="#FF625F"/>
|
|
30
|
+
|
|
31
|
+
<stop offset="100%" stop-color="#E3000F"/>
|
|
32
|
+
</linearGradient>
|
|
33
|
+
|
|
34
|
+
<g id="Layer7_0_FILL">
|
|
35
|
+
<path fill="url(#Gradient_1)" stroke="none" d="
|
|
36
|
+
M 211.75 385
|
|
37
|
+
Q 218.2 394.75 233.9 394.45 233.95 394.4 233.9 394.4 266.7 380.6 300.55 301.45 300.7 301.1 300.85 300.8 316.7 270.9 343.25 245.95 284.4 274.1 250.6 301.65 217.05 329.05 208.9 355.35 205.15 375 211.75 385 Z"/>
|
|
38
|
+
</g>
|
|
39
|
+
|
|
40
|
+
<g id="Layer6_0_FILL">
|
|
41
|
+
<path fill="url(#Gradient_2)" stroke="none" d="
|
|
42
|
+
M 552.35 120.45
|
|
43
|
+
Q 552.15 120.3 552 120.2 471.4 84.8 330.85 130
|
|
44
|
+
L 330.45 130
|
|
45
|
+
Q 82.1 223.4 115.5 345.6 147.85 423.25 233.9 394.45 218.2 394.75 211.75 385 205.15 375 208.9 355.35 217.05 329.05 250.6 301.65 284.4 274.1 343.25 245.95 366.6 234.75 394.9 225.4 430.45 213.65 473.9 204.9 474.15 204.8 474.4 204.8 572 188.05 560.55 245
|
|
46
|
+
L 561.1 244.2
|
|
47
|
+
Q 611.05 159.6 552.35 120.45 Z"/>
|
|
48
|
+
</g>
|
|
49
|
+
|
|
50
|
+
<g id="Layer5_0_FILL">
|
|
51
|
+
<path fill="url(#Gradient_3)" stroke="none" d="
|
|
52
|
+
M 474.4 204.8
|
|
53
|
+
Q 474.15 204.8 473.9 204.9 430.45 213.65 394.9 225.4 439.55 224.8 419.05 264 398.55 303.2 343.3 375.55 288.05 447.9 243.25 513.5 207.8 569.05 196.9 615.35 180.3 693.4 262.95 704 288.9 707.3 324.6 704 345.2 702.1 369.05 697.95 275.95 685.3 353.65 546.7 353.75 546.45 355.65 542.6 357.4 538.9 360.8 531.95 367.65 517.7 560.35 245.3
|
|
54
|
+
L 560.55 245
|
|
55
|
+
Q 572 188.05 474.4 204.8 Z"/>
|
|
56
|
+
</g>
|
|
57
|
+
|
|
58
|
+
<g id="Layer4_0_FILL">
|
|
59
|
+
<path fill="url(#Gradient_4)" stroke="none" d="
|
|
60
|
+
M 613.8 590.25
|
|
61
|
+
Q 612.1 587.05 608.95 585.9 605.4 584.55 601.05 586.35 591.5 590.35 571.8 600.8 551.5 611.55 542.5 617.55 538.1 620.5 536.8 624.55 535.6 628.2 537.3 631.45 538.95 634.65 542.5 635.7 546.4 636.85 551 634.8 560.55 630.5 583.65 618 606.65 605.6 612 601.8 614.6 600 615 596.55 615.45 593.3 613.8 590.25
|
|
62
|
+
M 612.15 475.5
|
|
63
|
+
Q 614.65 472.75 614.9 469.05 615.2 465.55 613.35 462.75 611.45 459.8 608 458.9 604.2 457.9 599.5 459.9 579.65 468.25 565.4 481.4 561.55 484.95 561.15 489.15 560.75 492.95 563.15 496.05 565.5 499.05 569.3 499.95 573.45 500.9 577.6 498.8 584.9 495.1 595.9 487.9 608.3 479.75 612.15 475.5
|
|
64
|
+
M 656.45 570.2
|
|
65
|
+
Q 657.65 568.4 657.5 566 657.3 563.6 655.9 561.85 652.4 557.4 645.85 561.2 633.15 568.55 628.6 573.55 624.8 577.75 627.75 582.2 630.65 586.6 635.35 584.7 640.5 582.6 647 578.3 654.2 573.55 656.45 570.2
|
|
66
|
+
M 687.75 476.45
|
|
67
|
+
Q 684.95 471.35 679.6 470 673.05 468.35 664.75 473.3 654.95 478.45 602.6 507.25 552.45 534.85 552.4 534.85 544.45 538.2 540.55 534.3 536.1 529.85 543.1 520.45 543.25 520.25 547.95 514.3 551.2 510.25 551.9 507.65 553.45 501.75 550.15 497.7 546.9 493.65 540.7 493.6 533.9 493.5 526.5 498.35 508.1 510.35 466.6 529.25 419.3 550.75 382.6 561.8 346.8 572.15 355.65 542.6 353.75 546.45 353.65 546.7 275.95 685.3 369.05 697.95 401.4 692.75 442.65 679.3 485.75 665.2 510.85 650.9 514.75 648.6 516.05 645.05 518.55 637.95 505.3 631.6 499.7 627.55 501.8 622.85 503.55 619 511.15 614.1 515.75 611.1 527 605.25 538.4 599.3 543 596.35 586 568.9 622.05 544.25 670.95 510.7 679.55 501.75 688.15 492.75 689.55 486.35 690.6 481.65 687.75 476.45 Z"/>
|
|
68
|
+
</g>
|
|
69
|
+
|
|
70
|
+
<g id="Layer3_0_FILL">
|
|
71
|
+
<path fill="url(#Gradient_5)" stroke="none" d="
|
|
72
|
+
M 211.75 385
|
|
73
|
+
Q 217.9 394.3 232.4 394.45 185.85 360.9 301.85 298.2
|
|
74
|
+
L 300.55 301.45
|
|
75
|
+
Q 300.7 301.1 300.85 300.8 316.7 270.9 343.25 245.95 284.4 274.1 250.6 301.65 217.05 329.05 208.9 355.35 205.15 375 211.75 385 Z"/>
|
|
76
|
+
</g>
|
|
77
|
+
|
|
78
|
+
<g id="Layer2_0_FILL">
|
|
79
|
+
<path fill="#62009F" stroke="none" d="
|
|
80
|
+
M 474.4 204.8
|
|
81
|
+
Q 474.15 204.8 473.9 204.9 430.45 213.65 394.9 225.4 430.05 224.9 424.85 249.05 496.05 211.25 561.4 228.3 556 190.75 474.4 204.8 Z"/>
|
|
82
|
+
</g>
|
|
83
|
+
|
|
84
|
+
<g id="Layer1_0_FILL">
|
|
85
|
+
<path fill="#00576C" stroke="none" d="
|
|
86
|
+
M 383.65 561.45
|
|
87
|
+
Q 383.15 561.6 382.6 561.8 346.8 572.15 355.65 542.6 353.75 546.45 353.65 546.7 276.3 684.7 368.25 697.85 305.4 665.7 383.65 561.45 Z"/>
|
|
88
|
+
</g>
|
|
89
|
+
</defs>
|
|
90
|
+
|
|
91
|
+
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
|
|
92
|
+
<use xlink:href="#Layer7_0_FILL"/>
|
|
93
|
+
</g>
|
|
94
|
+
|
|
95
|
+
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
|
|
96
|
+
<use xlink:href="#Layer6_0_FILL"/>
|
|
97
|
+
</g>
|
|
98
|
+
|
|
99
|
+
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
|
|
100
|
+
<use xlink:href="#Layer5_0_FILL"/>
|
|
101
|
+
</g>
|
|
102
|
+
|
|
103
|
+
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
|
|
104
|
+
<use xlink:href="#Layer4_0_FILL"/>
|
|
105
|
+
</g>
|
|
106
|
+
|
|
107
|
+
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
|
|
108
|
+
<use xlink:href="#Layer3_0_FILL"/>
|
|
109
|
+
</g>
|
|
110
|
+
|
|
111
|
+
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
|
|
112
|
+
<use xlink:href="#Layer2_0_FILL"/>
|
|
113
|
+
</g>
|
|
114
|
+
|
|
115
|
+
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
|
|
116
|
+
<use xlink:href="#Layer1_0_FILL"/>
|
|
117
|
+
</g>
|
|
118
|
+
</svg>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zanejs/icons",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Stencil Component for icon",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"icon",
|
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
"test.watch": "stencil test --spec --e2e --watchAll",
|
|
16
16
|
"generate": "stencil generate",
|
|
17
17
|
"transform": "node scripts/transfer-svg.mjs",
|
|
18
|
-
"stub": "pnpm run build"
|
|
18
|
+
"stub": "pnpm run build",
|
|
19
|
+
"publish": "npm publish"
|
|
19
20
|
},
|
|
20
21
|
"files": [
|
|
21
22
|
"dist/",
|