@refineui/web-icons 0.3.17 → 0.3.18

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 (2) hide show
  1. package/README.md +77 -311
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,7 @@
1
1
  # @refineui/web-icons
2
2
 
3
- CSS/Font-based icon system for RefineUI System Icons.
3
+ Framework-agnostic web package for RefineUI System Icons.
4
+ Provides font-based icons and utility functions.
4
5
 
5
6
  ## 📦 Installation
6
7
 
@@ -12,359 +13,124 @@ yarn add @refineui/web-icons
12
13
  pnpm add @refineui/web-icons
13
14
  ```
14
15
 
15
- ## 🚀 Quick Start
16
+ ## 🚀 Usage
16
17
 
17
- ### HTML Usage
18
+ ### 1. Load Font CSS
18
19
 
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
- ```
20
+ You need to load the font CSS once to display icons.
130
21
 
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**
22
+ **HTML**
151
23
 
152
24
  ```html
153
- <button class="icon-button">
154
- <i class="refineui-icon refineui-icon-download"></i>
155
- <span>Download</span>
156
- </button>
25
+ <link
26
+ rel="stylesheet"
27
+ href="node_modules/@refineui/web-icons/dist/fonts/refineui-system-icons.css"
28
+ />
157
29
  ```
158
30
 
159
- ### 4. **Consistent Sizing**
31
+ **CSS**
160
32
 
161
33
  ```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
- }
34
+ @import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";
174
35
  ```
175
36
 
176
- ## 📚 Examples
37
+ **JavaScript**
177
38
 
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>
39
+ ```javascript
40
+ import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";
187
41
  ```
188
42
 
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
- ```
43
+ ### 2. Using HTML Strings (createIconHTML)
210
44
 
211
- ### Button with Icon
45
+ Pass an icon name and style (`regular` | `filled`), and it returns a function that accepts size, color, and className.
46
+ The returned function generates a `<span>` HTML string.
212
47
 
213
- ```html
214
- <button class="icon-button">
215
- <i class="refineui-icon refineui-icon-download"></i>
216
- <span>Download</span>
217
- </button>
218
- ```
48
+ ```javascript
49
+ import { createIconHTML, Add, AddFilled } from "@refineui/web-icons";
219
50
 
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
- }
51
+ // Using createIconHTML directly
52
+ const addIconHTML = createIconHTML("Add", "regular");
53
+ const html = addIconHTML(24, "currentColor", "my-icon");
54
+ // → <span style="font-family: 'RefineUI-System-Icons-Regular'; ...">...</span>
55
+
56
+ // Using named exports (signature: (size?, color?, className?) => string)
57
+ const span24 = Add(24); // regular, size 24
58
+ const span32 = Add(32, "#0078d4", ""); // regular, size 32, custom color
59
+ const span32Filled = AddFilled(32, "red", ""); // filled, size 32
241
60
  ```
242
61
 
243
- ### Icon Grid
62
+ **Named exports**
244
63
 
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
- ```
64
+ - **regular**: `Add`, `Gavel`, `Home`, `Calendar`, etc. (PascalCase)
65
+ - **filled**: `AddFilled`, `GavelFilled`, `HomeFilled`, etc. (name + `Filled`)
261
66
 
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
- ```
67
+ Each export is equivalent to `createIconHTML(name, 'regular'|'filled')`.
291
68
 
292
- ## 🔍 Icon Search
69
+ ### 3. Using Unicode/Class Only (Framework Rendering)
293
70
 
294
- ### Finding Icons by Name
71
+ When rendering directly in React, Vue, etc., you can use `getIconChar` + `getFontFamily` or `getIconClass`.
295
72
 
296
73
  ```javascript
297
- // Search for icons containing "home"
298
- const homeIcons = ["home", "home-filled", "home-outline"];
74
+ import { getIconChar, getFontFamily, getIconClass } from "@refineui/web-icons";
299
75
 
300
- // Search for icons containing "arrow"
301
- const arrowIcons = ["arrow-up", "arrow-down", "arrow-left", "arrow-right"];
302
- ```
303
-
304
- ### Icon Categories
76
+ // Unicode character + font family
77
+ const char = getIconChar("Add", "regular", 24); // The icon character
78
+ const font = getFontFamily("regular"); // 'RefineUI-System-Icons-Regular'
79
+ // <span style={{ fontFamily: font, fontSize: 24 }}>{char}</span>
305
80
 
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
- };
81
+ // CSS class name (when font CSS is loaded)
82
+ const className = getIconClass("Gavel", "regular", 24); // e.g., 'ic_refineui_gavel_24_regular'
83
+ // <span className={className} />
315
84
  ```
316
85
 
317
- ## 🛠️ Development
86
+ ### 4. IconUtils (Advanced)
318
87
 
319
- ### Building from Source
88
+ Use `IconUtils` for metadata queries, icon search, and support checks.
320
89
 
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
90
+ ```javascript
91
+ import { IconUtils } from "@refineui/web-icons";
328
92
 
329
- # Build web icons
330
- npm run generate:web-icons
331
- npm run build:fonts
93
+ IconUtils.getAllIconNames(); // Array of all icon names
94
+ IconUtils.getSupportedSizes(); // [16, 20, 24, 28, 32, 48]
95
+ IconUtils.getIconInfo("Add"); // Icon metadata
96
+ IconUtils.searchIcons("arrow"); // Icons containing 'arrow' in name/description
97
+ IconUtils.isIconSupported("Add", "regular", 24); // true/false
332
98
  ```
333
99
 
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
100
+ ## 📤 API Summary
340
101
 
341
- ## 🐛 Troubleshooting
102
+ | export | Description |
103
+ |--------|-------------|
104
+ | `createIconHTML(iconName, style)` | Returns `(size?, color?, className?) => string` HTML generator function |
105
+ | `getIconChar(iconName, style?, size?)` | Returns the icon's unicode character |
106
+ | `getIconClass(iconName, style?, size?)` | Returns the icon's CSS class name |
107
+ | `getFontFamily(style?)` | Returns font family string for `'regular'` / `'filled'` |
108
+ | `IconUtils` | Above methods + `getAllIconNames`, `getSupportedSizes`, `getIconInfo`, `searchIcons`, `isIconSupported` |
109
+ | `regular-icons` / `filled-icons` | Named exports per icon (equivalent to `createIconHTML(name, 'regular'|'filled')`) |
110
+ | `IconData` | Type (metadata structure) |
342
111
 
343
- ### Common Issues
112
+ - **Styles**: `'regular'` | `'filled'`
113
+ - **Supported sizes**: `16`, `20`, `24`, `28`, `32`, `48` (px)
114
+ - **Total icons**: 434
344
115
 
345
- 1. **Icon not displaying**
116
+ ## 🎨 CSS Classes (When Font is Loaded)
346
117
 
347
- - Check if the icon name is correct
348
- - Verify the CSS file is loaded
349
- - Check browser console for errors
118
+ When font CSS is loaded, you can use the following classes:
350
119
 
351
- 2. **Styling issues**
120
+ - Base: `.ic_refineui`, `.ic_refineui_regular`, `.ic_refineui_filled`
121
+ - Per icon: `getIconClass('Gavel', 'regular', 24)` → e.g., `ic_refineui_gavel_24_regular`
352
122
 
353
- - Ensure CSS is properly loaded
354
- - Check for conflicting styles
355
- - Verify CSS custom properties
123
+ Font families:
356
124
 
357
- 3. **Font loading issues**
358
- - Check network tab for font requests
359
- - Verify font file paths
360
- - Consider using `font-display: swap`
125
+ - Regular: `RefineUI-System-Icons-Regular`
126
+ - Filled: `RefineUI-System-Icons-Filled`
361
127
 
362
- ### Getting Help
128
+ ## 📁 Package Structure
363
129
 
364
- - 📧 Email: support@pealgornis.com
365
- - 🐛 Issues: [GitHub Issues](https://github.com/pealgornis/refineui-system-icons/issues)
366
- - 💬 Community: [Slack](https://pelagornis.slack.com)
130
+ - `dist/index.js` / `dist/index.esm.js` – Bundle entry points
131
+ - `dist/fonts/refineui-system-icons.css` – Font definitions + icon classes
132
+ - `dist/fonts/*.woff2` – Font files
367
133
 
368
134
  ## 📄 License
369
135
 
370
- MIT License - see [LICENSE](LICENSE) file for details.
136
+ MIT License. See [LICENSE](LICENSE) for details.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@refineui/web-icons",
3
- "version": "0.3.17",
3
+ "version": "0.3.18",
4
4
  "description": "RefineUI System Icons for Web",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",