@refineui/web-icons 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +371 -0
  2. package/package.json +41 -0
  3. package/src/metadata.json +37709 -0
package/README.md ADDED
@@ -0,0 +1,371 @@
1
+ # @refineui/web-icons
2
+
3
+ CSS/Font-based icon system for RefineUI System Icons.
4
+
5
+ ## 📦 Installation
6
+
7
+ ```bash
8
+ npm install @refineui/web-icons
9
+ # or
10
+ yarn add @refineui/web-icons
11
+ # or
12
+ pnpm add @refineui/web-icons
13
+ ```
14
+
15
+ ## 🚀 Quick Start
16
+
17
+ ### HTML Usage
18
+
19
+ ```html
20
+ <!DOCTYPE html>
21
+ <html>
22
+ <head>
23
+ <link
24
+ rel="stylesheet"
25
+ href="node_modules/@refineui/web-icons/dist/refineui-icons.css"
26
+ />
27
+ </head>
28
+ <body>
29
+ <!-- Basic usage -->
30
+ <i class="refineui-icon refineui-icon-home"></i>
31
+
32
+ <!-- With size -->
33
+ <i class="refineui-icon refineui-icon-search refineui-icon--size-20"></i>
34
+
35
+ <!-- With custom color -->
36
+ <i class="refineui-icon refineui-icon-settings" style="color: #0078d4;"></i>
37
+ </body>
38
+ </html>
39
+ ```
40
+
41
+ ### CSS Import
42
+
43
+ ```css
44
+ @import "@refineui/web-icons/dist/refineui-icons.css";
45
+ ```
46
+
47
+ ### JavaScript Import
48
+
49
+ ```javascript
50
+ import "@refineui/web-icons/dist/refineui-icons.css";
51
+ ```
52
+
53
+ ## 🎨 Available Icons
54
+
55
+ ### Icon Categories
56
+
57
+ - **Navigation**: `home`, `search`, `menu`, `back`, `forward`, `up`, `down`, `left`, `right`
58
+ - **Actions**: `add`, `edit`, `delete`, `save`, `cancel`, `refresh`, `download`, `upload`
59
+ - **Communication**: `mail`, `phone`, `chat`, `notification`, `bell`, `message`
60
+ - **Media**: `play`, `pause`, `stop`, `volume`, `mute`, `camera`, `image`, `video`
61
+ - **System**: `settings`, `gear`, `user`, `lock`, `unlock`, `key`, `shield`
62
+ - **Files**: `folder`, `file`, `document`, `image`, `pdf`, `zip`, `download`
63
+ - **And many more...** (434+ icons total)
64
+
65
+ ### Icon Sizes
66
+
67
+ - **16px**: `refineui-icon--size-16`
68
+ - **20px**: `refineui-icon--size-20`
69
+ - **24px**: `refineui-icon--size-24` (default)
70
+ - **32px**: `refineui-icon--size-32`
71
+ - **48px**: `refineui-icon--size-48`
72
+
73
+ ## 🔧 Advanced Usage
74
+
75
+ ### Custom Styling
76
+
77
+ ```css
78
+ .my-custom-icon {
79
+ --refineui-icon-color: #0078d4;
80
+ --refineui-icon-size: 24px;
81
+ --refineui-icon-stroke-width: 1.5;
82
+ }
83
+
84
+ .my-custom-icon:hover {
85
+ --refineui-icon-color: #106ebe;
86
+ transform: scale(1.1);
87
+ transition: all 0.2s ease;
88
+ }
89
+ ```
90
+
91
+ ### CSS Custom Properties
92
+
93
+ ```css
94
+ :root {
95
+ --refineui-icon-primary: #0078d4;
96
+ --refineui-icon-secondary: #605e5c;
97
+ --refineui-icon-success: #107c10;
98
+ --refineui-icon-warning: #ff8c00;
99
+ --refineui-icon-error: #d83b01;
100
+ }
101
+
102
+ .icon-primary {
103
+ --refineui-icon-color: var(--refineui-icon-primary);
104
+ }
105
+
106
+ .icon-secondary {
107
+ --refineui-icon-color: var(--refineui-icon-secondary);
108
+ }
109
+ ```
110
+
111
+ ### Responsive Icons
112
+
113
+ ```css
114
+ .responsive-icon {
115
+ font-size: 16px;
116
+ }
117
+
118
+ @media (min-width: 768px) {
119
+ .responsive-icon {
120
+ font-size: 20px;
121
+ }
122
+ }
123
+
124
+ @media (min-width: 1024px) {
125
+ .responsive-icon {
126
+ font-size: 24px;
127
+ }
128
+ }
129
+ ```
130
+
131
+ ## 🎯 Best Practices
132
+
133
+ ### 1. **Performance**
134
+
135
+ - Use CSS icons for static content
136
+ - Consider using React icons for interactive elements
137
+ - Optimize font loading with `font-display: swap`
138
+
139
+ ### 2. **Accessibility**
140
+
141
+ ```html
142
+ <i
143
+ class="refineui-icon refineui-icon-search"
144
+ aria-label="Search"
145
+ role="button"
146
+ tabindex="0"
147
+ ></i>
148
+ ```
149
+
150
+ ### 3. **Semantic HTML**
151
+
152
+ ```html
153
+ <button class="icon-button">
154
+ <i class="refineui-icon refineui-icon-download"></i>
155
+ <span>Download</span>
156
+ </button>
157
+ ```
158
+
159
+ ### 4. **Consistent Sizing**
160
+
161
+ ```css
162
+ .icon-button .refineui-icon {
163
+ font-size: 16px;
164
+ margin-right: 8px;
165
+ }
166
+
167
+ .navigation .refineui-icon {
168
+ font-size: 20px;
169
+ }
170
+
171
+ .header .refineui-icon {
172
+ font-size: 24px;
173
+ }
174
+ ```
175
+
176
+ ## 📚 Examples
177
+
178
+ ### Navigation Bar
179
+
180
+ ```html
181
+ <nav class="navbar">
182
+ <i class="refineui-icon refineui-icon-menu nav-icon"></i>
183
+ <i class="refineui-icon refineui-icon-search nav-icon"></i>
184
+ <i class="refineui-icon refineui-icon-notification nav-icon"></i>
185
+ <i class="refineui-icon refineui-icon-user nav-icon"></i>
186
+ </nav>
187
+ ```
188
+
189
+ ```css
190
+ .navbar {
191
+ display: flex;
192
+ align-items: center;
193
+ gap: 20px;
194
+ padding: 16px;
195
+ background: #fff;
196
+ border-bottom: 1px solid #e0e0e0;
197
+ }
198
+
199
+ .nav-icon {
200
+ font-size: 20px;
201
+ color: #333;
202
+ cursor: pointer;
203
+ transition: color 0.2s ease;
204
+ }
205
+
206
+ .nav-icon:hover {
207
+ color: #0078d4;
208
+ }
209
+ ```
210
+
211
+ ### Button with Icon
212
+
213
+ ```html
214
+ <button class="icon-button">
215
+ <i class="refineui-icon refineui-icon-download"></i>
216
+ <span>Download</span>
217
+ </button>
218
+ ```
219
+
220
+ ```css
221
+ .icon-button {
222
+ display: inline-flex;
223
+ align-items: center;
224
+ gap: 8px;
225
+ padding: 8px 16px;
226
+ background: #0078d4;
227
+ color: white;
228
+ border: none;
229
+ border-radius: 4px;
230
+ cursor: pointer;
231
+ font-size: 14px;
232
+ }
233
+
234
+ .icon-button .refineui-icon {
235
+ font-size: 16px;
236
+ }
237
+
238
+ .icon-button:hover {
239
+ background: #106ebe;
240
+ }
241
+ ```
242
+
243
+ ### Icon Grid
244
+
245
+ ```html
246
+ <div class="icon-grid">
247
+ <div class="icon-item">
248
+ <i class="refineui-icon refineui-icon-home"></i>
249
+ <span>Home</span>
250
+ </div>
251
+ <div class="icon-item">
252
+ <i class="refineui-icon refineui-icon-search"></i>
253
+ <span>Search</span>
254
+ </div>
255
+ <div class="icon-item">
256
+ <i class="refineui-icon refineui-icon-settings"></i>
257
+ <span>Settings</span>
258
+ </div>
259
+ </div>
260
+ ```
261
+
262
+ ```css
263
+ .icon-grid {
264
+ display: grid;
265
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
266
+ gap: 16px;
267
+ padding: 16px;
268
+ }
269
+
270
+ .icon-item {
271
+ display: flex;
272
+ flex-direction: column;
273
+ align-items: center;
274
+ gap: 8px;
275
+ padding: 16px;
276
+ background: #f5f5f5;
277
+ border-radius: 8px;
278
+ text-align: center;
279
+ }
280
+
281
+ .icon-item .refineui-icon {
282
+ font-size: 24px;
283
+ color: #333;
284
+ }
285
+
286
+ .icon-item span {
287
+ font-size: 12px;
288
+ color: #666;
289
+ }
290
+ ```
291
+
292
+ ## 🔍 Icon Search
293
+
294
+ ### Finding Icons by Name
295
+
296
+ ```javascript
297
+ // Search for icons containing "home"
298
+ const homeIcons = ["home", "home-filled", "home-outline"];
299
+
300
+ // Search for icons containing "arrow"
301
+ const arrowIcons = ["arrow-up", "arrow-down", "arrow-left", "arrow-right"];
302
+ ```
303
+
304
+ ### Icon Categories
305
+
306
+ ```javascript
307
+ const iconCategories = {
308
+ navigation: ["home", "search", "menu", "back", "forward"],
309
+ actions: ["add", "edit", "delete", "save", "cancel"],
310
+ communication: ["mail", "phone", "chat", "notification"],
311
+ media: ["play", "pause", "stop", "volume", "camera"],
312
+ system: ["settings", "gear", "user", "lock", "unlock"],
313
+ files: ["folder", "file", "document", "image", "pdf"],
314
+ };
315
+ ```
316
+
317
+ ## 🛠️ Development
318
+
319
+ ### Building from Source
320
+
321
+ ```bash
322
+ # Clone the repository
323
+ git clone https://github.com/refineui/system-icons.git
324
+ cd system-icons
325
+
326
+ # Install dependencies
327
+ npm install
328
+
329
+ # Build web icons
330
+ npm run generate:web-icons
331
+ npm run build:fonts
332
+ ```
333
+
334
+ ### Adding New Icons
335
+
336
+ 1. Add SVG files to `src/icons/`
337
+ 2. Run `npm run generate:metadata`
338
+ 3. Run `npm run generate:web-icons`
339
+ 4. Test your changes
340
+
341
+ ## 🐛 Troubleshooting
342
+
343
+ ### Common Issues
344
+
345
+ 1. **Icon not displaying**
346
+
347
+ - Check if the icon name is correct
348
+ - Verify the CSS file is loaded
349
+ - Check browser console for errors
350
+
351
+ 2. **Styling issues**
352
+
353
+ - Ensure CSS is properly loaded
354
+ - Check for conflicting styles
355
+ - Verify CSS custom properties
356
+
357
+ 3. **Font loading issues**
358
+ - Check network tab for font requests
359
+ - Verify font file paths
360
+ - Consider using `font-display: swap`
361
+
362
+ ### Getting Help
363
+
364
+ - 📧 Email: support@refineui.com
365
+ - 🐛 Issues: [GitHub Issues](https://github.com/refineui/system-icons/issues)
366
+ - 📖 Documentation: [docs.refineui.com](https://docs.refineui.com)
367
+ - 💬 Community: [Discord](https://discord.gg/refineui)
368
+
369
+ ## 📄 License
370
+
371
+ MIT License - see [LICENSE](LICENSE) file for details.
package/package.json ADDED
@@ -0,0 +1,41 @@
1
+ {
2
+ "name": "@refineui/web-icons",
3
+ "version": "0.1.4",
4
+ "description": "RefineUI System Icons for Web",
5
+ "main": "dist/index.js",
6
+ "module": "dist/index.esm.js",
7
+ "types": "dist/index.d.ts",
8
+ "files": [
9
+ "dist",
10
+ "src/metadata.json"
11
+ ],
12
+ "scripts": {
13
+ "build": "rollup -c && npm run copy-fonts",
14
+ "copy-fonts": "mkdir -p dist/fonts && cp fonts/*.woff2 dist/fonts/ && cp fonts/*.css dist/fonts/",
15
+ "dev": "rollup -c -w",
16
+ "clean": "rimraf dist"
17
+ },
18
+ "devDependencies": {
19
+ "@rollup/plugin-commonjs": "^21.0.0",
20
+ "@rollup/plugin-json": "^4.1.0",
21
+ "@rollup/plugin-node-resolve": "^13.0.0",
22
+ "rimraf": "^3.0.2",
23
+ "rollup": "^2.60.0",
24
+ "rollup-plugin-typescript2": "^0.31.2",
25
+ "typescript": "^4.5.0"
26
+ },
27
+ "keywords": [
28
+ "web",
29
+ "icons",
30
+ "refineui",
31
+ "system-icons",
32
+ "ui",
33
+ "flutter-style"
34
+ ],
35
+ "author": "RefineUI Team",
36
+ "license": "MIT",
37
+ "repository": {
38
+ "type": "git",
39
+ "url": "https://github.com/refineui/system-icons.git"
40
+ }
41
+ }