npm - @leapdev/gui-icons - Versions diffs - 3.0.13 → 3.0.15 - Mend

@leapdev/gui-icons 3.0.13 → 3.0.15

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 (175) hide show

package/README.md +376 -15
package/dist/app.js +131 -43
package/dist/icons/.DS_Store +0 -0
package/dist/icons/doctype/blank-document-24.svg +7 -0
package/dist/icons/doctype/blank-fax-24.svg +8 -0
package/dist/icons/doctype/clause-precedent-new-24.svg +8 -0
package/dist/icons/doctype/code-24.svg +7 -0
package/dist/icons/doctype/email-open-24.svg +4 -0
package/dist/icons/doctype/fax-24.svg +8 -0
package/dist/icons/doctype/file-note-24.svg +6 -0
package/dist/icons/doctype/signature-request-24.svg +10 -0
package/dist/icons/filled/anticipated-grid-20.svg +1 -1
package/dist/icons/filled/apps.svg +1 -1
package/dist/icons/filled/arrow-dot-down.svg +1 -1
package/dist/icons/filled/arrow-dot-left.svg +1 -1
package/dist/icons/filled/arrow-dot-right.svg +1 -1
package/dist/icons/filled/arrow-dot-up.svg +1 -1
package/dist/icons/filled/arrow-down.svg +1 -1
package/dist/icons/filled/arrow-up.svg +1 -1
package/dist/icons/filled/available-outline.svg +1 -1
package/dist/icons/filled/balance-outline.svg +1 -1
package/dist/icons/filled/balance.svg +1 -1
package/dist/icons/filled/bell-outline.svg +1 -1
package/dist/icons/filled/bell.svg +1 -1
package/dist/icons/filled/binder.svg +1 -1
package/dist/icons/filled/block.svg +1 -1
package/dist/icons/filled/build.svg +1 -1
package/dist/icons/filled/capslock.svg +1 -1
package/dist/icons/filled/chevron-down-circle-outline.svg +1 -1
package/dist/icons/filled/chevron-down-circle.svg +1 -1
package/dist/icons/filled/chevron-down.svg +1 -1
package/dist/icons/filled/chevron-left-circle-outline.svg +1 -1
package/dist/icons/filled/chevron-left-circle.svg +1 -1
package/dist/icons/filled/chevron-left.svg +1 -1
package/dist/icons/filled/chevron-right-circle-outline.svg +1 -1
package/dist/icons/filled/chevron-right-circle.svg +1 -1
package/dist/icons/filled/chevron-right-grid-20.svg +1 -1
package/dist/icons/filled/chevron-right.svg +1 -1
package/dist/icons/filled/chevron-up-circle-outline.svg +1 -1
package/dist/icons/filled/chevron-up-circle.svg +1 -1
package/dist/icons/filled/chevron-up.svg +1 -1
package/dist/icons/filled/city.svg +1 -1
package/dist/icons/filled/clipboard-tick.svg +1 -1
package/dist/icons/filled/clipboard.svg +1 -1
package/dist/icons/filled/close-circle-outline.svg +1 -1
package/dist/icons/filled/close-circle.svg +1 -1
package/dist/icons/filled/cloud.svg +1 -1
package/dist/icons/filled/cog.svg +1 -1
package/dist/icons/filled/coin-circle-outline-euro.svg +1 -1
package/dist/icons/filled/coin-circle-outline.svg +1 -1
package/dist/icons/filled/coin-circle-uk.svg +1 -1
package/dist/icons/filled/coin-circle.svg +1 -1
package/dist/icons/filled/coin-uk.svg +1 -1
package/dist/icons/filled/coin.svg +1 -1
package/dist/icons/filled/comments-outline.svg +1 -1
package/dist/icons/filled/credit-journal.svg +1 -1
package/dist/icons/filled/credit-refund.svg +1 -1
package/dist/icons/filled/critical-date.svg +1 -1
package/dist/icons/filled/disbursement-journal-remove-grid-20.svg +1 -1
package/dist/icons/filled/disbursement-journal-remove.svg +1 -1
package/dist/icons/filled/disbursement-journal.svg +1 -1
package/dist/icons/filled/document-share.svg +1 -1
package/dist/icons/filled/download.svg +1 -1
package/dist/icons/filled/drag.svg +1 -1
package/dist/icons/filled/edit-circle-outline.svg +1 -1
package/dist/icons/filled/edit.svg +1 -1
package/dist/icons/filled/entry-cost-recovery-uk.svg +1 -1
package/dist/icons/filled/entry-cost-recovery.svg +1 -1
package/dist/icons/filled/entry-fee-uk.svg +1 -1
package/dist/icons/filled/entry-fee.svg +1 -1
package/dist/icons/filled/entry-time.svg +1 -1
package/dist/icons/filled/envelope-open-outline.svg +1 -1
package/dist/icons/filled/envelope-open.svg +1 -1
package/dist/icons/filled/envelope-outline.svg +1 -1
package/dist/icons/filled/envelope-sent.svg +1 -1
package/dist/icons/filled/envelope.svg +1 -1
package/dist/icons/filled/equal-bold.svg +1 -1
package/dist/icons/filled/error-circle-outline.svg +1 -1
package/dist/icons/filled/error-circle.svg +1 -1
package/dist/icons/filled/error.svg +1 -1
package/dist/icons/filled/expamnd-less-horiz.svg +1 -1
package/dist/icons/filled/expamnd-less-vert.svg +1 -1
package/dist/icons/filled/expamnd-more-horiz.svg +1 -1
package/dist/icons/filled/expamnd-more-vert.svg +1 -1
package/dist/icons/filled/fee-grid-20.svg +1 -1
package/dist/icons/filled/fee.svg +1 -1
package/dist/icons/filled/file.svg +1 -1
package/dist/icons/filled/fire.svg +1 -1
package/dist/icons/filled/flag-outline.svg +1 -1
package/dist/icons/filled/flag.svg +1 -1
package/dist/icons/filled/folder-cases.svg +1 -1
package/dist/icons/filled/folder-matter.svg +1 -1
package/dist/icons/filled/folder-new.svg +1 -1
package/dist/icons/filled/folder.svg +1 -1
package/dist/icons/filled/forms.svg +1 -1
package/dist/icons/filled/grid.svg +1 -1
package/dist/icons/filled/help-circle.svg +1 -1
package/dist/icons/filled/help.svg +1 -1
package/dist/icons/filled/home.svg +2 -2
package/dist/icons/filled/info-circle-outline.svg +1 -1
package/dist/icons/filled/info-circle.svg +1 -1
package/dist/icons/filled/info.svg +1 -1
package/dist/icons/filled/invoice-grid-20.svg +1 -1
package/dist/icons/filled/invoice.svg +1 -1
package/dist/icons/filled/journal.svg +1 -1
package/dist/icons/filled/launch.svg +1 -1
package/dist/icons/filled/lc-grid-20.svg +1 -1
package/dist/icons/filled/loop.svg +1 -1
package/dist/icons/filled/magnifier.svg +1 -1
package/dist/icons/filled/minimum.svg +1 -1
package/dist/icons/filled/minus-bold.svg +1 -1
package/dist/icons/filled/minus-circle-outline.svg +1 -1
package/dist/icons/filled/minus-circle.svg +1 -1
package/dist/icons/filled/minus.svg +1 -1
package/dist/icons/filled/more-horiz-circle-outline.svg +1 -1
package/dist/icons/filled/more-horiz-circle.svg +1 -1
package/dist/icons/filled/more-horiz.svg +1 -1
package/dist/icons/filled/more-vert.svg +1 -1
package/dist/icons/filled/new-anticipated-grid-20.svg +1 -1
package/dist/icons/filled/new-letter.svg +1 -1
package/dist/icons/filled/other.svg +3 -3
package/dist/icons/filled/pane-combined.svg +1 -1
package/dist/icons/filled/pane-separate.svg +1 -1
package/dist/icons/filled/paperclip-vert.svg +1 -1
package/dist/icons/filled/phone.svg +1 -1
package/dist/icons/filled/plus-bold.svg +1 -1
package/dist/icons/filled/plus-circle-outline.svg +1 -1
package/dist/icons/filled/plus-circle.svg +1 -1
package/dist/icons/filled/plus.svg +1 -1
package/dist/icons/filled/power.svg +1 -1
package/dist/icons/filled/print.svg +1 -1
package/dist/icons/filled/protected-outline-grid-20.svg +2 -2
package/dist/icons/filled/protected-total-outline-grid-20.svg +2 -2
package/dist/icons/filled/radio-check.svg +1 -1
package/dist/icons/filled/radio-uncheck.svg +1 -1
package/dist/icons/filled/receipt.svg +1 -1
package/dist/icons/filled/redo.svg +1 -1
package/dist/icons/filled/refresh.svg +1 -1
package/dist/icons/filled/repeat.svg +1 -1
package/dist/icons/filled/reply.svg +1 -1
package/dist/icons/filled/send-callback-request.svg +2 -2
package/dist/icons/filled/share-case.svg +1 -1
package/dist/icons/filled/share-document.svg +1 -1
package/dist/icons/filled/share-matter.svg +1 -1
package/dist/icons/filled/share.svg +1 -1
package/dist/icons/filled/shield-grid-20.svg +2 -2
package/dist/icons/filled/snow-flower.svg +1 -1
package/dist/icons/filled/sort.svg +1 -1
package/dist/icons/filled/star-outline.svg +1 -1
package/dist/icons/filled/star.svg +1 -1
package/dist/icons/filled/stop-circle-outline.svg +1 -1
package/dist/icons/filled/stop-circle.svg +1 -1
package/dist/icons/filled/stop.svg +1 -1
package/dist/icons/filled/templates.svg +1 -1
package/dist/icons/filled/timer-add.svg +1 -1
package/dist/icons/filled/timesheets-20.svg +4 -4
package/dist/icons/filled/transfer.svg +1 -1
package/dist/icons/filled/triangle-left.svg +1 -1
package/dist/icons/filled/twitter.svg +1 -1
package/dist/icons/filled/undo.svg +1 -1
package/dist/icons/filled/unlock.svg +1 -1
package/dist/icons/filled/upload.svg +1 -1
package/dist/icons/filled/user-anticipated-grid-20.svg +1 -1
package/dist/icons/filled/user-minus.svg +1 -1
package/dist/icons/filled/user-plus.svg +1 -1
package/dist/icons/filled/user-question.svg +1 -1
package/dist/icons/filled/user-tick.svg +1 -1
package/dist/icons/filled/users.svg +1 -1
package/dist/icons/filled/warning-triangle-outline.svg +1 -1
package/dist/icons/sprite-doctype.svg +1 -1
package/dist/icons/sprite-filled.svg +1 -1
package/dist/icons/sprite-sas.svg +1 -1
package/dist/illustrations/sprite-sirius-empty-states.svg +1 -1
package/dist/index.js +8 -0
package/package.json +1 -2

package/README.md CHANGED Viewed

@@ -1,9 +1,5 @@
 # LEAP GUI Icons
-## Background
-This is source scss of LEAP GUI Icons Toolkit.
 ## Quick Start
 1. Install [Node.js & NPM](https://nodejs.org/en/download/)
@@ -12,26 +8,391 @@ This is source scss of LEAP GUI Icons Toolkit.
 4. Run `npm run build` in Terminal to build GUI
 5. Run `npm run start` in Terminal to run GUI
+## Installing
+```bash
+npm install @leapdev/gui-icons
+```
 ## Usage
-### Installing
+After installing the package, you can include the icons in your application.
-```bash
-npm install @leapdev/gui-leap-icons
+### SVG sprites
+Here's an example of how to use a single icon from our SVG sprites in a web application:
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LEAP GUI Icons Example</title>
+  </head>
+  <body>
+    <!-- First, include the sprite file -->
+    <div style="display: none">
+      <object
+        id="sprite"
+        type="image/svg+xml"
+        data="node_modules/@leapdev/gui-icons/dist/icons/sprite-desktop.svg"
+      ></object>
+    </div>
+    <!-- Then, use the icon -->
+    <svg width="16" height="16">
+      <use xlink:href="#desktop-Pin"></use>
+    </svg>
+  </body>
+</html>
 ```
-### Basic Usage
+This example demonstrates how to use the 'desktop-Pin' icon from the desktop sprite. Here's what's happening:
+1. We include the sprite file using an `<object>` tag. This loads the SVG sprite into the document.
+2. We create an `<svg>` element and use the `<use>` tag to reference the specific icon from the sprite.
+3. The `xlink:href` attribute points to the id of the icon in the sprite (`#desktop-Pin`).
-After installing the package, you can include the icons in your application.
+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`.
-Using sprite files:
+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.
-```bash
-import '@leapdev/gui-leap-icons/dist/icons/sprite-doctype.svg';
-<svg class="icon icon-lg"><use xlink:href="#icon-id"></use></svg>
+To use different icon sizes, you can adjust the `width` and `height` attributes of the `<svg>` element:
+\`\`\`html
+<svg width="24" height="24">
+    <use xlink:href="#desktop-Pin"></use>
+</svg>
+\`\`\`
+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.
+### Run the SVG sprites example on Stackblitz
+Here is how you can run the example above on Stackblitz (https://stackblitz.com):
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LEAP GUI Icons Example</title>
+</head>
+<body>
+    <div id="icon-container"></div>
+    <script type="module">
+        async function loadIcon() {
+            // Fetch the SVG sprite file
+            const response = await fetch('https://unpkg.com/@leapdev/gui-icons@3.0.13/dist/icons/sprite-desktop.svg');
+            const svgText = await response.text();
+            // Add the SVG sprite to the document
+            const div = document.createElement('div');
+            div.style.display = 'none';
+            div.innerHTML = svgText;
+            document.body.appendChild(div);
+            // Create and add the icon
+            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svg.setAttribute('width', '16');
+            svg.setAttribute('height', '16');
+            const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+            use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#desktop-Pin');
+            svg.appendChild(use);
+            document.getElementById('icon-container').appendChild(svg);
+        }
+        loadIcon();
+    </script>
+</body>
+</html>
 ```
-As regular .SVGs
-import { doctypeAudio24, filledUser24 } from '@leapdev/gui-leap-icons';
+### As individual SVGs - React Example
+Here's an example of how to use individual SVG icons in a React application:
+\`\`\`jsx
+import React from 'react';
+import { FilledHistory, DesktopPin, DoctypeAudio } from '@leapdev/gui-icons';
+export default function IconExample() {
+  return (
+    <div>
+      <h1>LEAP GUI Icons Example</h1>
+      <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
+        <FilledHistory />
+        <DesktopPin width={24} height={24} />
+        <DoctypeAudio width={32} height={32} />
+    </div>
+  );
+}
+\`\`\`
+In this example:
+1. Import the icons from the `@leapdev/gui-icons` package.
+2. Use the icons as React components in your JSX.
+3. Adjust the size of icons using the `width` and `height` props.
+## Package updates
+# Doctype Icons
+The Doctype Icons have been thoroughly updated, several icons were added and old styles icons were removed.
+### Icons Added in version 3.0.14:
+activity-default-16
+activity-default-24
+audio-28
+audio-sc-28
+blank-document-2-28
+blank-document-28
+blank-document-template-2-28
+blank-document-template-28
+blank-excel-28
+blank-excel-template-28
+blank-fax-28
+blank-fax-template-28
+blank-memo-28
+blank-memo-template-28
+bylawyers-16
+bylawyers-24
+calendar-clock-blue-28
+calendar-clock-grey-28
+calendar-clock-orange-28
+calendar-flag-blue-28
+calendar-flag-grey-28
+calendar-flag-orange-28
+code-28
+code-sc-28
+comment-28
+comment-sc-28
+default-28
+default-sc-28
+doc-28
+doc-sc-28
+docm-28
+email-16
+email-attachment-28
+email-create-28
+email-default-28
+email-draft-16
+email-draft-24
+email-draft-28
+email-new-16
+email-new-24
+email-no-attachments-24
+email-none-16
+email-none-24
+email-open-28
+email-received-28
+email-sent-28
+email-shortcut-24
+excel-28
+fax-28
+fax-template-28
+file-note-28
+filter-28
+filter-sc-28
+folder-28
+folder-back-28
+folder-back-sc-28
+folder-collaboration-16
+folder-empty-28
+folder-empty-sc-28
+folder-home-28
+folder-home-sc-28
+folder-new-28
+folder-new-sc-28
+folder-open-28
+folder-open-sc-28
+folder-sc-28
+folder-zip-16
+folder-zip-24
+folder-zip-28
+folder-zip-sc-16
+folder-zip-sc-24
+folder-zip-sc-28
+hyperlink-16
+hyperlink-28
+image-28
+image-sc-28
+infotrack-28
+infotrack-new-28
+infotrack-sc-28
+new-comment-28
+new-email-16
+payment-request
+pdf-28
+pdf-sc-28
+phone-call-16
+phone-call-24powerpoint-16
+powerpoint-28
+powerpoint-sc-16
+powerpoint-sc-28
+ppt-sc-24
+precedent-notification-16
+precedent-notification
+rtf-28
+scanned-doc-16
+scanned-doc-24
+shared-folder-16
+shared-folder-24
+signature-declined-2-28
+signature-declined-28
+signature-pending-2-28
+signature-pending-28
+signature-request-2-28
+signature-request-28
+signature-signed-2-28
+signature-signed-28
+sms-28
+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
+tax-invoice-2-16
+tax-invoice-2-28
+tax-invoice-28
+tax-invoice-template-2-28
+tax-invoice-template-28
+text-16
+text-24
+text-sc-16
+text-sc-24
+trust-statement-16
+trust-statement-24
+unknown-24
+unknown-text-16
+unknown-type-24
+unknown-type-28
+video-16
+video-28
+video-call-16
+video-call-24
+word-16
+word-24
+word-sc-16
+word-sc-24
+zip-folder-sc-16
+zip-folder-sc-24
+zyphta-16
+### Icons Removed in version 3.0.14:
+appointment
+audio-sc
+audio
+blank-document-16
+blank-document-24
+blank-document
+blank-excel-16
+blank-excel-24
+blank-excel
+blank-fax-16
+blank-fax-24
+blank-fax
+blank-letter
+clause-precedent-new-16
+clause-precedent-new-24
+code-16
+code-24
+code-sc-16
+code-sc-24
+code-sc
+code
+comment-sc-16
+comment-sc-24
+comment-sc
+comment
+default-sc
+default
+doc-sc
+doc
+email-attachment-16
+email-create
+email-default
+email-open-16
+email-open-24
+email-open
+email-received
+email-sent
+excel
+fax-24
+fax
+file note
+file-note-16
+file-note-24
+filter-sc
+filter
+folder-back-sc
+folder-back
+folder-collaboration
+folder-empty-sc
+folder-empty
+folder-home-sc
+folder-home
+folder-new-sc
+folder-new
+folder-open-sc
+folder-open
+folder-sc
+folder
+image-sc
+image
+infotrack-new
+infotrack-sc
+infotrack
+letter
+memo
+new-comment
+pdf-sc
+pdf
+signature-declined-16
+signature-declined-24
+signature-declined
+signature-pending-16
+signature-pending-24
+signature-pending
+signature-request-16
+signature-request-24
+signature-request
+signature-signed-16
+signature-signed-24
+signature-signed
+sms-sc-16
+sms-sc-24
+sms-sc
+sms
+tasks-16
+tasks-24
+tasks
+tax-invoice
+unknown-sc
+unknown
+zip-file-16
+zip-file-24
+Note: the doctype icons still have the `doctype-` prefix in the SVG sprites IDs.
+# LEAP Web Icons
+sprite-filled.svg has a new icon:
+timesheets-20