@refineui/web-icons 0.3.17 → 0.3.19

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 +73 -310
  2. package/package.json +12 -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,121 @@ 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
- ```
20
+ You need to load the font CSS once to display icons.
40
21
 
41
- ### CSS Import
42
-
43
- ```css
44
- @import "@refineui/web-icons/dist/refineui-icons.css";
45
- ```
46
-
47
- ### JavaScript Import
22
+ **With a bundler (recommended)**
48
23
 
49
24
  ```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
- }
25
+ import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";
109
26
  ```
110
27
 
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**
28
+ Bundlers (Vite, Webpack, Parcel, etc.) resolve this path via the package `exports` field.
134
29
 
135
- - Use CSS icons for static content
136
- - Consider using React icons for interactive elements
137
- - Optimize font loading with `font-display: swap`
30
+ **Without a bundler (plain HTML)**
138
31
 
139
- ### 2. **Accessibility**
32
+ The package does not expose a URL you can use directly in `href`. Copy the CSS (and fonts) from `node_modules/@refineui/web-icons/dist/fonts/` into your project’s static folder (e.g. `public/` or `static/`) and link it:
140
33
 
141
34
  ```html
142
- <i
143
- class="refineui-icon refineui-icon-search"
144
- aria-label="Search"
145
- role="button"
146
- tabindex="0"
147
- ></i>
35
+ <link rel="stylesheet" href="/path/to/your-copy/refineui-system-icons.css" />
148
36
  ```
149
37
 
150
- ### 3. **Semantic HTML**
38
+ Or use a CDN if you publish the file there.
151
39
 
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
- ```
40
+ ### 2. Using HTML Strings (createIconHTML)
175
41
 
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
- ```
42
+ Pass an icon name and style (`regular` | `filled`), and it returns a function that accepts size, color, and className.
43
+ The returned function generates a `<span>` HTML string.
210
44
 
211
- ### Button with Icon
45
+ ```javascript
46
+ import { createIconHTML, Add, AddFilled } from "@refineui/web-icons";
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
+ // Using createIconHTML directly
49
+ const addIconHTML = createIconHTML("Add", "regular");
50
+ const html = addIconHTML(24, "currentColor", "my-icon");
51
+ // → <span style="font-family: 'RefineUI-System-Icons-Regular'; ...">...</span>
219
52
 
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
- }
53
+ // Using named exports (signature: (size?, color?, className?) => string)
54
+ const span24 = Add(24); // regular, size 24
55
+ const span32 = Add(32, "#0078d4", ""); // regular, size 32, custom color
56
+ const span32Filled = AddFilled(32, "red", ""); // filled, size 32
241
57
  ```
242
58
 
243
- ### Icon Grid
59
+ **Named exports**
244
60
 
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
- ```
61
+ - **regular**: `Add`, `Gavel`, `Home`, `Calendar`, etc. (PascalCase)
62
+ - **filled**: `AddFilled`, `GavelFilled`, `HomeFilled`, etc. (name + `Filled`)
261
63
 
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
- ```
64
+ Each export is equivalent to `createIconHTML(name, 'regular'|'filled')`.
291
65
 
292
- ## 🔍 Icon Search
66
+ ### 3. Using Unicode/Class Only (Framework Rendering)
293
67
 
294
- ### Finding Icons by Name
68
+ When rendering directly in React, Vue, etc., you can use `getIconChar` + `getFontFamily` or `getIconClass`.
295
69
 
296
70
  ```javascript
297
- // Search for icons containing "home"
298
- const homeIcons = ["home", "home-filled", "home-outline"];
71
+ import { getIconChar, getFontFamily, getIconClass } from "@refineui/web-icons";
299
72
 
300
- // Search for icons containing "arrow"
301
- const arrowIcons = ["arrow-up", "arrow-down", "arrow-left", "arrow-right"];
302
- ```
73
+ // Unicode character + font family
74
+ const char = getIconChar("Add", "regular", 24); // The icon character
75
+ const font = getFontFamily("regular"); // 'RefineUI-System-Icons-Regular'
76
+ // <span style={{ fontFamily: font, fontSize: 24 }}>{char}</span>
303
77
 
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
- };
78
+ // CSS class name (when font CSS is loaded)
79
+ const className = getIconClass("Gavel", "regular", 24); // e.g., 'ic_refineui_gavel_24_regular'
80
+ // <span className={className} />
315
81
  ```
316
82
 
317
- ## 🛠️ Development
318
-
319
- ### Building from Source
83
+ ### 4. IconUtils (Advanced)
320
84
 
321
- ```bash
322
- # Clone the repository
323
- git clone https://github.com/refineui/system-icons.git
324
- cd system-icons
85
+ Use `IconUtils` for metadata queries, icon search, and support checks.
325
86
 
326
- # Install dependencies
327
- npm install
87
+ ```javascript
88
+ import { IconUtils } from "@refineui/web-icons";
328
89
 
329
- # Build web icons
330
- npm run generate:web-icons
331
- npm run build:fonts
90
+ IconUtils.getAllIconNames(); // Array of all icon names
91
+ IconUtils.getSupportedSizes(); // [16, 20, 24, 28, 32, 48]
92
+ IconUtils.getIconInfo("Add"); // Icon metadata
93
+ IconUtils.searchIcons("arrow"); // Icons containing 'arrow' in name/description
94
+ IconUtils.isIconSupported("Add", "regular", 24); // true/false
332
95
  ```
333
96
 
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
97
+ ## 📤 API Summary
340
98
 
341
- ## 🐛 Troubleshooting
99
+ | export | Description |
100
+ |--------|-------------|
101
+ | `createIconHTML(iconName, style)` | Returns `(size?, color?, className?) => string` HTML generator function |
102
+ | `getIconChar(iconName, style?, size?)` | Returns the icon's unicode character |
103
+ | `getIconClass(iconName, style?, size?)` | Returns the icon's CSS class name |
104
+ | `getFontFamily(style?)` | Returns font family string for `'regular'` / `'filled'` |
105
+ | `IconUtils` | Above methods + `getAllIconNames`, `getSupportedSizes`, `getIconInfo`, `searchIcons`, `isIconSupported` |
106
+ | `regular-icons` / `filled-icons` | Named exports per icon (equivalent to `createIconHTML(name, 'regular'|'filled')`) |
107
+ | `IconData` | Type (metadata structure) |
342
108
 
343
- ### Common Issues
109
+ - **Styles**: `'regular'` | `'filled'`
110
+ - **Supported sizes**: `16`, `20`, `24`, `28`, `32`, `48` (px)
111
+ - **Total icons**: 434
344
112
 
345
- 1. **Icon not displaying**
113
+ ## 🎨 CSS Classes (When Font is Loaded)
346
114
 
347
- - Check if the icon name is correct
348
- - Verify the CSS file is loaded
349
- - Check browser console for errors
115
+ When font CSS is loaded, you can use the following classes:
350
116
 
351
- 2. **Styling issues**
117
+ - Base: `.ic_refineui`, `.ic_refineui_regular`, `.ic_refineui_filled`
118
+ - Per icon: `getIconClass('Gavel', 'regular', 24)` → e.g., `ic_refineui_gavel_24_regular`
352
119
 
353
- - Ensure CSS is properly loaded
354
- - Check for conflicting styles
355
- - Verify CSS custom properties
120
+ Font families:
356
121
 
357
- 3. **Font loading issues**
358
- - Check network tab for font requests
359
- - Verify font file paths
360
- - Consider using `font-display: swap`
122
+ - Regular: `RefineUI-System-Icons-Regular`
123
+ - Filled: `RefineUI-System-Icons-Filled`
361
124
 
362
- ### Getting Help
125
+ ## 📁 Package Structure
363
126
 
364
- - 📧 Email: support@pealgornis.com
365
- - 🐛 Issues: [GitHub Issues](https://github.com/pealgornis/refineui-system-icons/issues)
366
- - 💬 Community: [Slack](https://pelagornis.slack.com)
127
+ - `dist/index.js` / `dist/index.esm.js` – Bundle entry points
128
+ - `dist/fonts/refineui-system-icons.css` – Font definitions + icon classes
129
+ - `dist/fonts/*.woff2` – Font files
367
130
 
368
131
  ## 📄 License
369
132
 
370
- MIT License - see [LICENSE](LICENSE) file for details.
133
+ MIT License. See [LICENSE](LICENSE) for details.
package/package.json CHANGED
@@ -1,10 +1,21 @@
1
1
  {
2
2
  "name": "@refineui/web-icons",
3
- "version": "0.3.17",
3
+ "version": "0.3.19",
4
4
  "description": "RefineUI System Icons for Web",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",
7
7
  "types": "dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "import": "./dist/index.esm.js",
11
+ "require": "./dist/index.js",
12
+ "types": "./dist/index.d.ts"
13
+ },
14
+ "./dist/fonts/refineui-system-icons.css": "./dist/fonts/refineui-system-icons.css",
15
+ "./dist/fonts/refineui-system-icons-regular.css": "./dist/fonts/refineui-system-icons-regular.css",
16
+ "./dist/fonts/refineui-system-icons-filled.css": "./dist/fonts/refineui-system-icons-filled.css",
17
+ "./package.json": "./package.json"
18
+ },
8
19
  "files": [
9
20
  "dist",
10
21
  "src/metadata.json"