@leapdev/gui-icons 3.0.12 → 3.0.14

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 (165) hide show
  1. package/README.md +197 -15
  2. package/dist/app.js +305 -305
  3. package/dist/icons/.DS_Store +0 -0
  4. package/dist/icons/filled/anticipated-grid-20.svg +1 -1
  5. package/dist/icons/filled/apps.svg +1 -1
  6. package/dist/icons/filled/arrow-dot-down.svg +1 -1
  7. package/dist/icons/filled/arrow-dot-left.svg +1 -1
  8. package/dist/icons/filled/arrow-dot-right.svg +1 -1
  9. package/dist/icons/filled/arrow-dot-up.svg +1 -1
  10. package/dist/icons/filled/arrow-down.svg +1 -1
  11. package/dist/icons/filled/arrow-up.svg +1 -1
  12. package/dist/icons/filled/available-outline.svg +1 -1
  13. package/dist/icons/filled/balance-outline.svg +1 -1
  14. package/dist/icons/filled/balance.svg +1 -1
  15. package/dist/icons/filled/bell-outline.svg +1 -1
  16. package/dist/icons/filled/bell.svg +1 -1
  17. package/dist/icons/filled/binder.svg +1 -1
  18. package/dist/icons/filled/block.svg +1 -1
  19. package/dist/icons/filled/build.svg +1 -1
  20. package/dist/icons/filled/capslock.svg +1 -1
  21. package/dist/icons/filled/chevron-down-circle-outline.svg +1 -1
  22. package/dist/icons/filled/chevron-down-circle.svg +1 -1
  23. package/dist/icons/filled/chevron-down.svg +1 -1
  24. package/dist/icons/filled/chevron-left-circle-outline.svg +1 -1
  25. package/dist/icons/filled/chevron-left-circle.svg +1 -1
  26. package/dist/icons/filled/chevron-left.svg +1 -1
  27. package/dist/icons/filled/chevron-right-circle-outline.svg +1 -1
  28. package/dist/icons/filled/chevron-right-circle.svg +1 -1
  29. package/dist/icons/filled/chevron-right-grid-20.svg +1 -1
  30. package/dist/icons/filled/chevron-right.svg +1 -1
  31. package/dist/icons/filled/chevron-up-circle-outline.svg +1 -1
  32. package/dist/icons/filled/chevron-up-circle.svg +1 -1
  33. package/dist/icons/filled/chevron-up.svg +1 -1
  34. package/dist/icons/filled/city.svg +1 -1
  35. package/dist/icons/filled/clipboard-tick.svg +1 -1
  36. package/dist/icons/filled/clipboard.svg +1 -1
  37. package/dist/icons/filled/close-circle-outline.svg +1 -1
  38. package/dist/icons/filled/close-circle.svg +1 -1
  39. package/dist/icons/filled/cloud.svg +1 -1
  40. package/dist/icons/filled/cog.svg +1 -1
  41. package/dist/icons/filled/coin-circle-outline-euro.svg +1 -1
  42. package/dist/icons/filled/coin-circle-outline.svg +1 -1
  43. package/dist/icons/filled/coin-circle-uk.svg +1 -1
  44. package/dist/icons/filled/coin-circle.svg +1 -1
  45. package/dist/icons/filled/coin-uk.svg +1 -1
  46. package/dist/icons/filled/coin.svg +1 -1
  47. package/dist/icons/filled/comments-outline.svg +1 -1
  48. package/dist/icons/filled/credit-journal.svg +1 -1
  49. package/dist/icons/filled/credit-refund.svg +1 -1
  50. package/dist/icons/filled/critical-date.svg +1 -1
  51. package/dist/icons/filled/disbursement-journal-remove-grid-20.svg +1 -1
  52. package/dist/icons/filled/disbursement-journal-remove.svg +1 -1
  53. package/dist/icons/filled/disbursement-journal.svg +1 -1
  54. package/dist/icons/filled/document-share.svg +1 -1
  55. package/dist/icons/filled/download.svg +1 -1
  56. package/dist/icons/filled/drag.svg +1 -1
  57. package/dist/icons/filled/edit-circle-outline.svg +1 -1
  58. package/dist/icons/filled/edit.svg +1 -1
  59. package/dist/icons/filled/entry-cost-recovery-uk.svg +1 -1
  60. package/dist/icons/filled/entry-cost-recovery.svg +1 -1
  61. package/dist/icons/filled/entry-fee-uk.svg +1 -1
  62. package/dist/icons/filled/entry-fee.svg +1 -1
  63. package/dist/icons/filled/entry-time.svg +1 -1
  64. package/dist/icons/filled/envelope-open-outline.svg +1 -1
  65. package/dist/icons/filled/envelope-open.svg +1 -1
  66. package/dist/icons/filled/envelope-outline.svg +1 -1
  67. package/dist/icons/filled/envelope-sent.svg +1 -1
  68. package/dist/icons/filled/envelope.svg +1 -1
  69. package/dist/icons/filled/equal-bold.svg +1 -1
  70. package/dist/icons/filled/error-circle-outline.svg +1 -1
  71. package/dist/icons/filled/error-circle.svg +1 -1
  72. package/dist/icons/filled/error.svg +1 -1
  73. package/dist/icons/filled/expamnd-less-horiz.svg +1 -1
  74. package/dist/icons/filled/expamnd-less-vert.svg +1 -1
  75. package/dist/icons/filled/expamnd-more-horiz.svg +1 -1
  76. package/dist/icons/filled/expamnd-more-vert.svg +1 -1
  77. package/dist/icons/filled/fee-grid-20.svg +1 -1
  78. package/dist/icons/filled/fee.svg +1 -1
  79. package/dist/icons/filled/file.svg +1 -1
  80. package/dist/icons/filled/fire.svg +1 -1
  81. package/dist/icons/filled/flag-outline.svg +1 -1
  82. package/dist/icons/filled/flag.svg +1 -1
  83. package/dist/icons/filled/folder-cases.svg +1 -1
  84. package/dist/icons/filled/folder-matter.svg +1 -1
  85. package/dist/icons/filled/folder-new.svg +1 -1
  86. package/dist/icons/filled/folder.svg +1 -1
  87. package/dist/icons/filled/forms.svg +1 -1
  88. package/dist/icons/filled/grid.svg +1 -1
  89. package/dist/icons/filled/help-circle.svg +1 -1
  90. package/dist/icons/filled/help.svg +1 -1
  91. package/dist/icons/filled/home.svg +2 -2
  92. package/dist/icons/filled/info-circle-outline.svg +1 -1
  93. package/dist/icons/filled/info-circle.svg +1 -1
  94. package/dist/icons/filled/info.svg +1 -1
  95. package/dist/icons/filled/invoice-grid-20.svg +1 -1
  96. package/dist/icons/filled/invoice.svg +1 -1
  97. package/dist/icons/filled/journal.svg +1 -1
  98. package/dist/icons/filled/launch.svg +1 -1
  99. package/dist/icons/filled/lc-grid-20.svg +1 -1
  100. package/dist/icons/filled/loop.svg +1 -1
  101. package/dist/icons/filled/magnifier.svg +1 -1
  102. package/dist/icons/filled/minimum.svg +1 -1
  103. package/dist/icons/filled/minus-bold.svg +1 -1
  104. package/dist/icons/filled/minus-circle-outline.svg +1 -1
  105. package/dist/icons/filled/minus-circle.svg +1 -1
  106. package/dist/icons/filled/minus.svg +1 -1
  107. package/dist/icons/filled/more-horiz-circle-outline.svg +1 -1
  108. package/dist/icons/filled/more-horiz-circle.svg +1 -1
  109. package/dist/icons/filled/more-horiz.svg +1 -1
  110. package/dist/icons/filled/more-vert.svg +1 -1
  111. package/dist/icons/filled/new-anticipated-grid-20.svg +1 -1
  112. package/dist/icons/filled/new-letter.svg +1 -1
  113. package/dist/icons/filled/other.svg +3 -3
  114. package/dist/icons/filled/pane-combined.svg +1 -1
  115. package/dist/icons/filled/pane-separate.svg +1 -1
  116. package/dist/icons/filled/paperclip-vert.svg +1 -1
  117. package/dist/icons/filled/phone.svg +1 -1
  118. package/dist/icons/filled/plus-bold.svg +1 -1
  119. package/dist/icons/filled/plus-circle-outline.svg +1 -1
  120. package/dist/icons/filled/plus-circle.svg +1 -1
  121. package/dist/icons/filled/plus.svg +1 -1
  122. package/dist/icons/filled/power.svg +1 -1
  123. package/dist/icons/filled/print.svg +1 -1
  124. package/dist/icons/filled/protected-outline-grid-20.svg +2 -2
  125. package/dist/icons/filled/protected-total-outline-grid-20.svg +2 -2
  126. package/dist/icons/filled/radio-check.svg +1 -1
  127. package/dist/icons/filled/radio-uncheck.svg +1 -1
  128. package/dist/icons/filled/receipt.svg +1 -1
  129. package/dist/icons/filled/redo.svg +1 -1
  130. package/dist/icons/filled/refresh.svg +1 -1
  131. package/dist/icons/filled/repeat.svg +1 -1
  132. package/dist/icons/filled/reply.svg +1 -1
  133. package/dist/icons/filled/send-callback-request.svg +2 -2
  134. package/dist/icons/filled/share-case.svg +1 -1
  135. package/dist/icons/filled/share-document.svg +1 -1
  136. package/dist/icons/filled/share-matter.svg +1 -1
  137. package/dist/icons/filled/share.svg +1 -1
  138. package/dist/icons/filled/shield-grid-20.svg +2 -2
  139. package/dist/icons/filled/snow-flower.svg +1 -1
  140. package/dist/icons/filled/sort.svg +1 -1
  141. package/dist/icons/filled/star-outline.svg +1 -1
  142. package/dist/icons/filled/star.svg +1 -1
  143. package/dist/icons/filled/stop-circle-outline.svg +1 -1
  144. package/dist/icons/filled/stop-circle.svg +1 -1
  145. package/dist/icons/filled/stop.svg +1 -1
  146. package/dist/icons/filled/templates.svg +1 -1
  147. package/dist/icons/filled/timer-add.svg +1 -1
  148. package/dist/icons/{doctype → filled}/timesheets-20.svg +4 -4
  149. package/dist/icons/filled/transfer.svg +1 -1
  150. package/dist/icons/filled/triangle-left.svg +1 -1
  151. package/dist/icons/filled/twitter.svg +1 -1
  152. package/dist/icons/filled/undo.svg +1 -1
  153. package/dist/icons/filled/unlock.svg +1 -1
  154. package/dist/icons/filled/upload.svg +1 -1
  155. package/dist/icons/filled/user-anticipated-grid-20.svg +1 -1
  156. package/dist/icons/filled/user-minus.svg +1 -1
  157. package/dist/icons/filled/user-plus.svg +1 -1
  158. package/dist/icons/filled/user-question.svg +1 -1
  159. package/dist/icons/filled/user-tick.svg +1 -1
  160. package/dist/icons/filled/users.svg +1 -1
  161. package/dist/icons/filled/warning-triangle-outline.svg +1 -1
  162. package/dist/icons/sprite-doctype.svg +1 -1
  163. package/dist/icons/sprite-filled.svg +1 -1
  164. package/dist/index.js +1 -1
  165. package/package.json +1 -1
package/README.md CHANGED
@@ -1,9 +1,5 @@
1
1
  # LEAP GUI Icons
2
2
 
3
- ## Background
4
-
5
- This is source scss of LEAP GUI Icons Toolkit.
6
-
7
3
  ## Quick Start
8
4
 
9
5
  1. Install [Node.js & NPM](https://nodejs.org/en/download/)
@@ -12,26 +8,212 @@ This is source scss of LEAP GUI Icons Toolkit.
12
8
  4. Run `npm run build` in Terminal to build GUI
13
9
  5. Run `npm run start` in Terminal to run GUI
14
10
 
11
+ ## Installing
12
+
13
+ ```bash
14
+ npm install @leapdev/gui-icons
15
+ ```
16
+
15
17
  ## Usage
16
18
 
17
- ### Installing
19
+ After installing the package, you can include the icons in your application.
18
20
 
19
- ```bash
20
- npm install @leapdev/gui-leap-icons
21
+ ### SVG sprites
22
+ Here's an example of how to use a single icon from our SVG sprites in a web application:
23
+
24
+ ```html
25
+ <!DOCTYPE html>
26
+ <html lang="en">
27
+ <head>
28
+ <meta charset="UTF-8" />
29
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
30
+ <title>LEAP GUI Icons Example</title>
31
+ </head>
32
+ <body>
33
+
34
+ <!-- First, include the sprite file -->
35
+ <div style="display: none">
36
+ <object
37
+ id="sprite"
38
+ type="image/svg+xml"
39
+ data="node_modules/@leapdev/gui-icons/dist/icons/sprite-desktop.svg"
40
+ ></object>
41
+ </div>
42
+
43
+ <!-- Then, use the icon -->
44
+ <svg width="16" height="16">
45
+ <use xlink:href="#desktop-Pin"></use>
46
+ </svg>
47
+
48
+ </body>
49
+ </html>
21
50
  ```
22
51
 
23
- ### Basic Usage
52
+ This example demonstrates how to use the 'desktop-Pin' icon from the desktop sprite. Here's what's happening:
24
53
 
54
+ 1. We include the sprite file using an `<object>` tag. This loads the SVG sprite into the document.
55
+ 2. We create an `<svg>` element and use the `<use>` tag to reference the specific icon from the sprite.
56
+ 3. The `xlink:href` attribute points to the id of the icon in the sprite (`#desktop-Pin`).
25
57
 
26
- After installing the package, you can include the icons in your application.
58
+ To use a different icon, simply change the id in the `xlink:href` attribute. For example, to use a 'Preview' icon, you might use `#desktop-Preview`.
27
59
 
28
- Using sprite files:
60
+ Remember to adjust the sprite file path according to your project structure. You may also need to change `sprite-desktop.svg` to the appropriate sprite file for the icon category you're using.
29
61
 
30
- ```bash
31
- import '@leapdev/gui-leap-icons/dist/icons/sprite-doctype.svg';
32
- <svg class="icon icon-lg"><use xlink:href="#icon-id"></use></svg>
62
+ To use different icon sizes, you can adjust the `width` and `height` attributes of the `<svg>` element:
63
+
64
+ \`\`\`html
65
+ <svg width="24" height="24">
66
+ <use xlink:href="#desktop-Pin"></use>
67
+ </svg>
68
+ \`\`\`
69
+
70
+ Make sure to import the necessary sprite files in your application before using the icons: This is handled automatically by including the `<object>` tag in the example above. The `<object>` tag will load the sprite file asynchronously. The Javascript ensures that the icon is only used after the sprite has loaded.
71
+
72
+
73
+ ### Run the SVG sprites example on Stackblitz
74
+
75
+ Here is how you can run the example above on Stackblitz (https://stackblitz.com):
76
+
77
+ ```html
78
+ <!DOCTYPE html>
79
+ <html lang="en">
80
+ <head>
81
+ <meta charset="UTF-8">
82
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
83
+ <title>LEAP GUI Icons Example</title>
84
+ </head>
85
+ <body>
86
+ <div id="icon-container"></div>
87
+
88
+ <script type="module">
89
+ async function loadIcon() {
90
+ // Fetch the SVG sprite file
91
+ const response = await fetch('https://unpkg.com/@leapdev/gui-icons@3.0.13/dist/icons/sprite-desktop.svg');
92
+ const svgText = await response.text();
93
+
94
+ // Add the SVG sprite to the document
95
+ const div = document.createElement('div');
96
+ div.style.display = 'none';
97
+ div.innerHTML = svgText;
98
+ document.body.appendChild(div);
99
+
100
+ // Create and add the icon
101
+ const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
102
+ svg.setAttribute('width', '16');
103
+ svg.setAttribute('height', '16');
104
+
105
+ const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
106
+ use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#desktop-Pin');
107
+ svg.appendChild(use);
108
+
109
+ document.getElementById('icon-container').appendChild(svg);
110
+ }
111
+
112
+ loadIcon();
113
+ </script>
114
+ </body>
115
+ </html>
33
116
  ```
34
117
 
35
- As regular .SVGs
36
118
 
37
- import { doctypeAudio24, filledUser24 } from '@leapdev/gui-leap-icons';
119
+ ### As individual SVGs - React Example
120
+
121
+ Here's an example of how to use individual SVG icons in a React application:
122
+
123
+ \`\`\`jsx
124
+ import React from 'react';
125
+ import { FilledHistory, DesktopPin, DoctypeAudio } from '@leapdev/gui-icons';
126
+
127
+ export default function IconExample() {
128
+ return (
129
+ <div>
130
+ <h1>LEAP GUI Icons Example</h1>
131
+ <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
132
+ <FilledHistory />
133
+ <DesktopPin width={24} height={24} />
134
+ <DoctypeAudio width={32} height={32} />
135
+ </div>
136
+ );
137
+ }
138
+ \`\`\`
139
+
140
+ In this example:
141
+
142
+ 1. Import the icons from the `@leapdev/gui-icons` package.
143
+ 2. Use the icons as React components in your JSX.
144
+ 3. Adjust the size of icons using the `width` and `height` props.
145
+
146
+
147
+ ## Package updates
148
+
149
+ # Doctype Icons
150
+
151
+ The Doctype Icons have been horoughly updated, several icons were added and old styles icons were removed.
152
+
153
+
154
+ ### Icons Added:
155
+
156
+ 1. activity-default-16 and activity-default-24
157
+ 2. audio-28 and audio-sc-28
158
+ 3. blank-document-2-28 and blank-document-template-2-28
159
+ 4. blank-excel-28 and blank-excel-template-28
160
+ 5. blank-fax-28 and blank-fax-template-28
161
+ 6. blank-memo-28 and blank-memo-template-28
162
+ 7. calendar-clock-blue-28, calendar-clock-grey-28, calendar-clock-orange-28
163
+ 8. calendar-flag-blue-28, calendar-flag-grey-28, calendar-flag-orange-28
164
+ 9. code-28 and code-sc-28
165
+ 10. comment-28 and comment-sc-28
166
+ 11. default-28 and default-sc-28
167
+ 12. doc-28 and doc-sc-28
168
+ 13. docm-28
169
+ 14. email-16
170
+ 15. email-attachment-28
171
+ 16. email-draft-28
172
+ 17. email-new-24
173
+ 18. email-no-attachments-24
174
+ 19. email-none-24
175
+ 20. email-open-28
176
+ 21. email-shortcut-24
177
+ 22. excel-28
178
+ 23. fax-28 and fax-template-28
179
+ 24. file-note-28
180
+ 25. filter-28 and filter-sc-28
181
+ 26. folder-28, folder-back-28, folder-back-sc-28
182
+ 27. folder-empty-28 and folder-empty-sc-28
183
+ 28. folder-home-28 and folder-home-sc-28
184
+ 29. folder-new-28 and folder-new-sc-28
185
+ 30. folder-open-28 and folder-open-sc-28
186
+ 31. folder-sc-28
187
+ 32. folder-zip-28 and folder-zip-sc-28
188
+ 33. hyperlink-28
189
+ 34. image-28 and image-sc-28
190
+ 35. infotrack-28, infotrack-new-28, infotrack-sc-28
191
+ 36. new-comment-28
192
+ 37. payment-request
193
+ 38. pdf-28 and pdf-sc-28
194
+ 39. powerpoint-28 and powerpoint-sc-28
195
+ 40. precedent-notification
196
+ 41. rtf-28
197
+ 42. signature-declined-2-28, signature-pending-2-28, signature-request-2-28, signature-signed-2-28
198
+ 43. sms-28
199
+ 44. tasks-28, tasks-blue-28, tasks-blue-tick-28, tasks-grey-28, tasks-grey-tick-28, tasks-orange-28, tasks-orange-tick-28, tasks-tick-28
200
+ 45. tax-invoice-2-16, tax-invoice-2-28, tax-invoice-28, tax-invoice-template-2-28, tax-invoice-template-28
201
+ 46. unknown-type-28
202
+ 47. video-28
203
+
204
+
205
+ ### Icons Removed:
206
+
207
+ 1. clause-precedent-new-24 and clause-precedent-new-16
208
+ 2. email-open-24 and email-open-16
209
+ 3. file note
210
+ 4. unknown and unknown-sc
211
+ 5. zip-file-24 and zip-file-16
212
+
213
+ Note: the doctype icons still have the `doctype-` prefix in the SVG sprites IDs.
214
+
215
+ # LEAP Web Icons
216
+
217
+ sprite-filled.svg has a new icon:
218
+
219
+ 1. timesheets-20