@leapdev/gui-icons 3.0.0 → 3.0.1

package/dist/icons/social/facebook.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="96px" height="96px" viewBox="0 0 96 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>Export/Facebook</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Export/Facebook" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M69.3333333,24 L26.6666667,24 C25.1939073,24 24,25.1939073 24,26.6666667 L24,69.3333333 C24,70.8060927 25.1939073,72 26.6666667,72 L49.64,72 L49.64,53.44 L43.4066667,53.44 L43.4066667,46.1733333 L49.64,46.1733333 L49.64,40.84 C49.64,34.64 53.4266667,31.26 58.9733333,31.26 C60.8393672,31.2545466 62.704325,31.3502426 64.56,31.5466667 L64.56,38 L60.7333333,38 C57.7266667,38 57.14,39.4333333 57.14,41.5333333 L57.14,46.16 L64.3333333,46.16 L63.4,53.4266667 L57.14,53.4266667 L57.14,72 L69.3333333,72 C70.8060927,72 72,70.8060927 72,69.3333333 L72,26.6666667 C72,25.1939073 70.8060927,24 69.3333333,24 Z" id="Facebook-Logo" fill="#4267B2" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/dist/icons/social/google.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="96px" height="96px" viewBox="0 0 96 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>Export/Google</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Export/Google" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Google-Logo" transform="translate(24.000000, 24.000000)">
+            <path d="M47.04,24.5454545 C47.04,22.8436364 46.8872727,21.2072727 46.6036364,19.6363636 L24,19.6363636 L24,28.92 L36.9163636,28.92 C36.36,31.92 34.6690909,34.4618182 32.1272727,36.1636364 L32.1272727,42.1854545 L39.8836364,42.1854545 C44.4218182,38.0072727 47.04,31.8545455 47.04,24.5454545 L47.04,24.5454545 Z" id="Shape" fill="#4285F4"></path>
+            <path d="M24,48 C30.48,48 35.9127273,45.8509091 39.8836364,42.1854545 L32.1272727,36.1636364 C29.9781818,37.6036364 27.2290909,38.4545455 24,38.4545455 C17.7490909,38.4545455 12.4581818,34.2327273 10.5709091,28.56 L2.55272727,28.56 L2.55272727,34.7781818 C6.50181818,42.6218182 14.6181818,48 24,48 L24,48 Z" id="Shape" fill="#34A853"></path>
+            <path d="M10.5709091,28.56 C10.0909091,27.12 9.81818182,25.5818182 9.81818182,24 C9.81818182,22.4181818 10.0909091,20.88 10.5709091,19.44 L10.5709091,13.2218182 L2.55272727,13.2218182 C0.927272727,16.4618182 0,20.1272727 0,24 C0,27.8727273 0.927272727,31.5381818 2.55272727,34.7781818 L10.5709091,28.56 L10.5709091,28.56 Z" id="Shape" fill="#FBBC05"></path>
+            <path d="M24,9.54545455 C27.5236364,9.54545455 30.6872727,10.7563636 33.1745455,13.1345455 L40.0581818,6.25090909 C35.9018182,2.37818182 30.4690909,0 24,0 C14.6181818,0 6.50181818,5.37818182 2.55272727,13.2218182 L10.5709091,19.44 C12.4581818,13.7672727 17.7490909,9.54545455 24,9.54545455 L24,9.54545455 Z" id="Shape" fill="#EA4335"></path>
+            <polygon id="Shape" points="0 0 48 0 48 48 0 48"></polygon>
+        </g>
+    </g>
+</svg>

package/dist/icons/social/index.js

@@ -0,0 +1,4 @@
+export { default as facebook } from './icons/social/facebook.svg';
+export { default as google } from './icons/social/google.svg';
+export { default as linkedin } from './icons/social/linkedin.svg';
+export { default as microsoft } from './icons/social/microsoft.svg';

package/dist/icons/social/linkedin.svg

@@ -0,0 +1,9 @@
+<svg width="96px" height="96px" viewBox="0 0 96 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Export/LinkedIn" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="LinkedIn" transform="translate(24.000000, 24.000000)">
+            <path d="M44.141131,0 L3.51856552,0 C1.57737931,0 -2.84217094e-14,1.54933333 -2.84217094e-14,3.45966667 L-2.84217094e-14,44.5363333 C-2.84217094e-14,46.4483333 1.57737931,48 3.51856552,48 L44.141131,48 C46.0856276,48 47.6696276,46.4483333 47.6696276,44.5363333 L47.6696276,3.45966667 C47.6696276,1.54933333 46.0856276,0 44.141131,0" id="Fill-1" fill="#0071A1" mask="url(#mask-2)"></path>
+            <path d="M10.6043586,6.60833333 C12.8646621,6.60833333 14.7015724,8.458 14.7015724,10.735 C14.7015724,13.0136667 12.8646621,14.864 10.6043586,14.864 C8.33809655,14.864 6.50383448,13.0136667 6.50383448,10.735 C6.50383448,8.458 8.33809655,6.60833333 10.6043586,6.60833333 L10.6043586,6.60833333 Z M7.06758621,40.9023333 L14.1381517,40.9023333 L14.1381517,17.9953333 L7.06758621,17.9953333 L7.06758621,40.9023333 Z" id="Fill-4" fill="#FFFFFE" mask="url(#mask-2)"></path>
+            <path d="M18.5723586,17.9953333 L25.3549241,17.9953333 L25.3549241,21.125 L25.4489379,21.125 C26.3923862,19.3243333 28.6987034,17.4253333 32.1384828,17.4253333 C39.2980966,17.4253333 40.6199172,22.1696667 40.6199172,28.3373333 L40.6199172,40.9023333 L33.5543172,40.9023333 L33.5543172,29.7626667 C33.5543172,27.105 33.5059862,23.6883333 29.8804966,23.6883333 C26.2010483,23.6883333 25.6376276,26.5823333 25.6376276,29.5703333 L25.6376276,40.9023333 L18.5723586,40.9023333 L18.5723586,17.9953333" id="Fill-5" fill="#FFFFFE" mask="url(#mask-2)"></path>
+        </g>
+    </g>
+</svg>

package/dist/icons/social/microsoft.svg

@@ -0,0 +1,7 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="96" height="96" fill="white"/>
+<path d="M45 45H24L24 24L45 24V45Z" fill="#FF5722"/>
+<path d="M72 45H51V24L72 24V45Z" fill="#4CAF50"/>
+<path d="M72 72H51V51H72V72Z" fill="#FFC107"/>
+<path d="M45 72H24L24 51H45V72Z" fill="#03A9F4"/>
+</svg>

package/dist/icons/two-tone/index.js

@@ -0,0 +1,82 @@
+export { default as analytics } from './icons/two-tone/analytics.svg';
+export { default as api } from './icons/two-tone/api.svg';
+export { default as apps } from './icons/two-tone/apps.svg';
+export { default as arrowDownCircle } from './icons/two-tone/arrow-down-circle.svg';
+export { default as arrowDown } from './icons/two-tone/arrow-down.svg';
+export { default as arrowLeftCircle } from './icons/two-tone/arrow-left-circle.svg';
+export { default as arrowLeft } from './icons/two-tone/arrow-left.svg';
+export { default as arrowRightCircle16 } from './icons/two-tone/arrow-right-circle-16.svg';
+export { default as arrowRightCircle } from './icons/two-tone/arrow-right-circle.svg';
+export { default as arrowRight } from './icons/two-tone/arrow-right.svg';
+export { default as arrowUpCircle } from './icons/two-tone/arrow-up-circle.svg';
+export { default as arrowUp } from './icons/two-tone/arrow-up.svg';
+export { default as attachments } from './icons/two-tone/attachments.svg';
+export { default as backToBottom } from './icons/two-tone/back-to-bottom.svg';
+export { default as backToTop } from './icons/two-tone/back-to-top.svg';
+export { default as back } from './icons/two-tone/back.svg';
+export { default as bin } from './icons/two-tone/bin.svg';
+export { default as business } from './icons/two-tone/business.svg';
+export { default as calculator } from './icons/two-tone/calculator.svg';
+export { default as calendar } from './icons/two-tone/calendar.svg';
+export { default as cases } from './icons/two-tone/cases.svg';
+export { default as city } from './icons/two-tone/city.svg';
+export { default as close } from './icons/two-tone/close.svg';
+export { default as collapseMenu } from './icons/two-tone/collapse-menu.svg';
+export { default as collapse } from './icons/two-tone/collapse.svg';
+export { default as comment } from './icons/two-tone/comment.svg';
+export { default as contacts } from './icons/two-tone/contacts.svg';
+export { default as correspondence } from './icons/two-tone/correspondence.svg';
+export { default as creditcard } from './icons/two-tone/creditcard.svg';
+export { default as desktop } from './icons/two-tone/desktop.svg';
+export { default as downloadDocument } from './icons/two-tone/download-document.svg';
+export { default as download } from './icons/two-tone/download.svg';
+export { default as edit } from './icons/two-tone/edit.svg';
+export { default as errorCircle } from './icons/two-tone/error-circle.svg';
+export { default as expandMenu } from './icons/two-tone/expand-menu.svg';
+export { default as expand } from './icons/two-tone/expand.svg';
+export { default as feedback } from './icons/two-tone/feedback.svg';
+export { default as files } from './icons/two-tone/files.svg';
+export { default as filter } from './icons/two-tone/filter.svg';
+export { default as firms } from './icons/two-tone/firms.svg';
+export { default as folder } from './icons/two-tone/folder.svg';
+export { default as grid } from './icons/two-tone/grid.svg';
+export { default as infoCircle } from './icons/two-tone/info-circle.svg';
+export { default as instances } from './icons/two-tone/instances.svg';
+export { default as kebabHorizontal } from './icons/two-tone/kebab-horizontal.svg';
+export { default as kebabLoader } from './icons/two-tone/kebab-loader.svg';
+export { default as kebabVertical } from './icons/two-tone/kebab-vertical.svg';
+export { default as list } from './icons/two-tone/list.svg';
+export { default as location } from './icons/two-tone/location.svg';
+export { default as marketplace } from './icons/two-tone/marketplace.svg';
+export { default as matters } from './icons/two-tone/matters.svg';
+export { default as menu } from './icons/two-tone/menu.svg';
+export { default as minusCircle } from './icons/two-tone/minus-circle.svg';
+export { default as mobile } from './icons/two-tone/mobile.svg';
+export { default as more } from './icons/two-tone/more.svg';
+export { default as openExternal } from './icons/two-tone/open-external.svg';
+export { default as panelToggle } from './icons/two-tone/panel-toggle.svg';
+export { default as percentage } from './icons/two-tone/percentage.svg';
+export { default as plusCircle } from './icons/two-tone/plus-circle.svg';
+export { default as point } from './icons/two-tone/point.svg';
+export { default as printer } from './icons/two-tone/printer.svg';
+export { default as product } from './icons/two-tone/product.svg';
+export { default as recent } from './icons/two-tone/recent.svg';
+export { default as reply } from './icons/two-tone/reply.svg';
+export { default as reset } from './icons/two-tone/reset.svg';
+export { default as resources } from './icons/two-tone/resources.svg';
+export { default as search } from './icons/two-tone/search.svg';
+export { default as settings } from './icons/two-tone/settings.svg';
+export { default as signature } from './icons/two-tone/signature.svg';
+export { default as sort } from './icons/two-tone/sort.svg';
+export { default as spinner } from './icons/two-tone/spinner.svg';
+export { default as subscriptions } from './icons/two-tone/subscriptions.svg';
+export { default as support } from './icons/two-tone/support.svg';
+export { default as tickCircle } from './icons/two-tone/tick-circle.svg';
+export { default as tick } from './icons/two-tone/tick.svg';
+export { default as time } from './icons/two-tone/time.svg';
+export { default as upload } from './icons/two-tone/upload.svg';
+export { default as usersOutline } from './icons/two-tone/users-outline.svg';
+export { default as users } from './icons/two-tone/users.svg';
+export { default as warningOutline } from './icons/two-tone/warning-outline.svg';
+export { default as water } from './icons/two-tone/water.svg';
+export { default as web } from './icons/two-tone/web.svg';

package/dist/illustrations/orion/index.js

@@ -0,0 +1,18 @@
+export { default as accessCloud } from './illustrations/orion/access-cloud.svg';
+export { default as collaboration } from './illustrations/orion/collaboration.svg';
+export { default as doc } from './illustrations/orion/doc.svg';
+export { default as emailVerify } from './illustrations/orion/email-verify.svg';
+export { default as facebook } from './illustrations/orion/facebook.svg';
+export { default as google } from './illustrations/orion/google.svg';
+export { default as linkedin } from './illustrations/orion/linkedin.svg';
+export { default as noResultDetailsData } from './illustrations/orion/no-result-details-data.svg';
+export { default as noResultDocumentComments } from './illustrations/orion/no-result-document-comments.svg';
+export { default as noResultDocumentDetails } from './illustrations/orion/no-result-document-details.svg';
+export { default as noResultFileTooLarge } from './illustrations/orion/no-result-file-too-large.svg';
+export { default as noResultNoComments } from './illustrations/orion/no-result-no-comments.svg';
+export { default as noResultNoTrustData } from './illustrations/orion/no-result-no-trust-data.svg';
+export { default as noResultServerError } from './illustrations/orion/no-result-server-error.svg';
+export { default as onboardingCommentReply } from './illustrations/orion/onboarding-comment-reply.svg';
+export { default as onboardingShareDocuments } from './illustrations/orion/onboarding-share-documents.svg';
+export { default as onboardingWelcomeLawconnect } from './illustrations/orion/onboarding-welcome-lawconnect.svg';
+export { default as safeDoc } from './illustrations/orion/safe-doc.svg';

package/dist/illustrations/sirius/index.js

@@ -0,0 +1,18 @@
+export { default as anticipatedpaymentsEuro } from './illustrations/sirius/AnticipatedPayments-Euro.svg';
+export { default as anticipatedpaymentsPound } from './illustrations/sirius/AnticipatedPayments-Pound.svg';
+export { default as anticipatedpayments } from './illustrations/sirius/AnticipatedPayments.svg';
+export { default as border } from './illustrations/sirius/Border.svg';
+export { default as creditledgerEuro } from './illustrations/sirius/CreditLedger-Euro.svg';
+export { default as creditledgerPound } from './illustrations/sirius/CreditLedger-Pound.svg';
+export { default as creditledger } from './illustrations/sirius/CreditLedger.svg';
+export { default as default } from './illustrations/sirius/Default.svg';
+export { default as nocorrespondance } from './illustrations/sirius/NoCorrespondance.svg';
+export { default as nounscheduledcriticaldates } from './illustrations/sirius/NoUnscheduledCriticalDates.svg';
+export { default as nounsheduledtasks } from './illustrations/sirius/NoUnsheduledTasks.svg';
+export { default as paymentsanddebtorsEuro } from './illustrations/sirius/PaymentsAndDebtors-Euro.svg';
+export { default as paymentsanddebtorsPound } from './illustrations/sirius/PaymentsAndDebtors-Pound.svg';
+export { default as paymentsanddebtors } from './illustrations/sirius/PaymentsAndDebtors.svg';
+export { default as timeandfees } from './illustrations/sirius/TimeAndFees.svg';
+export { default as trustfundsEuro } from './illustrations/sirius/TrustFunds-Euro.svg';
+export { default as trustfundsPound } from './illustrations/sirius/TrustFunds-Pound.svg';
+export { default as trustfunds } from './illustrations/sirius/TrustFunds.svg';

package/dist/images/bylawyers/index.js

@@ -0,0 +1,7 @@
+export { default as authHeaderLogoDark } from './images/bylawyers/auth-header-logo-dark.svg';
+export { default as authHeaderLogo } from './images/bylawyers/auth-header-logo.svg';
+export { default as headerLogoShort } from './images/bylawyers/header-logo-short.svg';
+export { default as headerLogo } from './images/bylawyers/header-logo.svg';
+export { default as unsupportedDocument } from './images/bylawyers/unsupported-document.svg';
+export { default as waCity } from './images/bylawyers/wa-city.svg';
+export { default as waEmptyDots } from './images/bylawyers/wa-empty-dots.svg';

package/dist/images/doctype/1x/index.js

@@ -0,0 +1,8 @@
+export { default as doctypeClausePrecedent16 } from './images/doctype/1x/doctype-clause-precedent-16.png';
+export { default as doctypeClausePrecedent24 } from './images/doctype/1x/doctype-clause-precedent-24.png';
+export { default as doctypeClausePrecedentNew16 } from './images/doctype/1x/doctype-clause-precedent-new-16.png';
+export { default as doctypeClausePrecedentNew24 } from './images/doctype/1x/doctype-clause-precedent-new-24.png';
+export { default as doctypeZipFile16 } from './images/doctype/1x/doctype-zip-file-16.png';
+export { default as doctypeZipFolder16 } from './images/doctype/1x/doctype-zip-folder-16.png';
+export { default as doctypeZipFolder24 } from './images/doctype/1x/doctype-zip-folder-24.png';
+export { default as doctypeZippedFile24 } from './images/doctype/1x/doctype-zipped-file-24.png';

package/dist/images/doctype/2x/index.js

@@ -0,0 +1,8 @@
+export { default as doctypeClausePrecedent162x } from './images/doctype/2x/doctype-clause-precedent-16@2x.png';
+export { default as doctypeClausePrecedent242x } from './images/doctype/2x/doctype-clause-precedent-24@2x.png';
+export { default as doctypeClausePrecedentNew162x } from './images/doctype/2x/doctype-clause-precedent-new-16@2x.png';
+export { default as doctypeClausePrecedentNew242x } from './images/doctype/2x/doctype-clause-precedent-new-24@2x.png';
+export { default as doctypeZipFile162x } from './images/doctype/2x/doctype-zip-file-16@2x.png';
+export { default as doctypeZipFolder162x } from './images/doctype/2x/doctype-zip-folder-16@2x.png';
+export { default as doctypeZipFolder242x } from './images/doctype/2x/doctype-zip-folder-24@2x.png';
+export { default as doctypeZippedFile242x } from './images/doctype/2x/doctype-zipped-file-24@2x.png';

package/dist/images/lawconnect/favicons/index.js

@@ -0,0 +1,7 @@
+export { default as favicon128 } from './images/lawconnect/favicons/favicon-128.png';
+export { default as favicon152 } from './images/lawconnect/favicons/favicon-152.png';
+export { default as favicon167 } from './images/lawconnect/favicons/favicon-167.png';
+export { default as favicon180 } from './images/lawconnect/favicons/favicon-180.png';
+export { default as favicon192 } from './images/lawconnect/favicons/favicon-192.png';
+export { default as favicon196 } from './images/lawconnect/favicons/favicon-196.png';
+export { default as favicon32 } from './images/lawconnect/favicons/favicon-32.png';

package/dist/images/lawconnect/index.js

@@ -0,0 +1,2 @@
+export { default as headerLogoShort } from './images/lawconnect/header-logo-short.svg';
+export { default as powerbyLawconnect } from './images/lawconnect/powerby-lawconnect.svg';

package/dist/images/lawconnect/logos/index.js

@@ -0,0 +1,18 @@
+export { default as lawconnectIconReverse } from './images/lawconnect/logos/lawconnect-icon-reverse.png';
+export { default as lawconnectIconReverse } from './images/lawconnect/logos/lawconnect-icon-reverse.svg';
+export { default as lawconnectIconSkyBlue } from './images/lawconnect/logos/lawconnect-icon-sky-blue.png';
+export { default as lawconnectIconSkyBlue } from './images/lawconnect/logos/lawconnect-icon-sky-blue.svg';
+export { default as lawconnectLcon } from './images/lawconnect/logos/lawconnect-lcon.png';
+export { default as lawconnectLcon } from './images/lawconnect/logos/lawconnect-lcon.svg';
+export { default as lawconnectLogoReverseMono } from './images/lawconnect/logos/lawconnect-logo-reverse-mono.png';
+export { default as lawconnectLogoReverseMono } from './images/lawconnect/logos/lawconnect-logo-reverse-mono.svg';
+export { default as lawconnectLogoReverse } from './images/lawconnect/logos/lawconnect-logo-reverse.png';
+export { default as lawconnectLogoReverse } from './images/lawconnect/logos/lawconnect-logo-reverse.svg';
+export { default as lawconnectLogo } from './images/lawconnect/logos/lawconnect-logo.png';
+export { default as lawconnectLogo } from './images/lawconnect/logos/lawconnect-logo.svg';
+export { default as lawconnectPoweredbyLogoMono } from './images/lawconnect/logos/lawconnect-poweredby-logo-mono.png';
+export { default as lawconnectPoweredbyLogoMono } from './images/lawconnect/logos/lawconnect-poweredby-logo-mono.svg';
+export { default as lawconnectPoweredbyLogoReverseMono } from './images/lawconnect/logos/lawconnect-poweredby-logo-reverse-mono.png';
+export { default as lawconnectPoweredbyLogoReverseMono } from './images/lawconnect/logos/lawconnect-poweredby-logo-reverse-mono.svg';
+export { default as lawconnectPoweredbyLogo } from './images/lawconnect/logos/lawconnect-poweredby-logo.png';
+export { default as lawconnectPoweredbyLogo } from './images/lawconnect/logos/lawconnect-poweredby-logo.svg';

package/dist/images/leap/index.js

@@ -0,0 +1,5 @@
+export { default as authHeaderLogoDark } from './images/leap/auth-header-logo-dark.svg';
+export { default as authHeaderLogo } from './images/leap/auth-header-logo.svg';
+export { default as headerLogoShort } from './images/leap/header-logo-short.svg';
+export { default as headerLogo } from './images/leap/header-logo.svg';
+export { default as searchBg } from './images/leap/search-bg.svg';

package/dist/images/titlex/index.js

@@ -0,0 +1,4 @@
+export { default as authHeaderLogoDark } from './images/titlex/auth-header-logo-dark.svg';
+export { default as authHeaderLogo } from './images/titlex/auth-header-logo.svg';
+export { default as headerLogoShort } from './images/titlex/header-logo-short.svg';
+export { default as headerLogo } from './images/titlex/header-logo.svg';

package/dist/index.html

@@ -16,7 +16,7 @@
         margin-bottom: 1em;
       }
       .jumbotron { 
-        background-image: url(./images/leap/search-bg.svg);
+        background-image: url(images/leap/search-bg.svg);
         background-size: auto 31.25rem;
         background-position: center center;
         background-repeat: repeat;
@@ -52,12 +52,9 @@
     </style>
   </head>
   <body class="bg-light"> 
-    <div refs="sprites" class="d-none sprites">  
-      <!-- Sprites will be injected here by webpack -->
-    </div>
     <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top border-bottom">
       <a class="navbar-brand" href="#">
-        <img src="./images/leap/header-logo.svg" class="navbar-brand-img" height="30" alt="LEAP">
+        <img src="images/leap/header-logo.svg" class="navbar-brand-img" height="30" alt="LEAP">
       </a>
     </nav>
     <div id="app"> 
@@ -73,13 +70,13 @@
                 </div>
                 <div class="form-group col-md-3">
                   <select v-model="selected" class="form-control">
-                    <option>filled</option>
-                    <option>twotone</option>
-                    <option>doctype</option>
-                    <option>desktop</option>
-                    <option>social</option>
-                    <option>sas</option>
-                    <option>empty-states</option>
+                    <option value="filled">Filled</option>
+                    <option value="two-tone">Two Tone</option>
+                    <option value="doctype">Doctype</option>
+                    <option value="desktop">Desktop</option>
+                    <option value="social">Social</option>
+                    <option value="content-app">SAS</option>
+                    <option value="empty-states">Empty States</option>
                   </select>
                 </div>
               </div> 
@@ -89,97 +86,17 @@
       </div>  
       <section class="container"> 
         <div class="row">
-          <div class="col-6 col-md-3 col-lg-3" v-for="icon in filteredList">
+          <div class="col-6 col-md-3 col-lg-3" v-for="icon in filteredList" :key="icon.name">
             <div class="card bg-white mb-3">
               <div class="card-body text-center">
-                <svg class='x-icon x-icon-xxl mb-3'>
-                  <use :xlink:href="'#'+ icon"></use>
-                </svg>
-                <p class="card-text">#{{icon}}</p>
+                <img :src="icon.src" class="x-icon x-icon-xxl mb-3" :alt="icon.name">
+                <p class="card-text">#{{ icon.name }}</p>
               </div>
             </div>
           </div>
         </div> 
       </section>
     </div>
-  <script defer src="/app.530a4d17910a66086f22.js"></script></body>
-  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
-  <script>
-    var app = new Vue({
-      el: '#app',
-      data: {
-          currentIcon: '',
-          search: '',
-          selected: 'filled',
-          filledIcons: [],
-          twotoneIcons: [],
-          desktopIcons: [],
-          siriusEmptyStates: [],
-          icons: []
-      }, 
-      mounted: function() {
-        this.getIcons();
-      },
-      methods: {
-        getIcons: function () {
-          const svgs = document.querySelectorAll('.sprites svg');  
-          svgs.forEach(svg => {
-            const category = svg.id.split('-')[1];
-            const collection = svg.querySelectorAll('symbol');
-            collection.forEach(symbol => {
-              const iconId = symbol.id;
-              this.icons.push(iconId);
-              switch(category) {
-                case 'filled':
-                  this.filledIcons.push(iconId);
-                  break;
-                case 'two-tone':
-                  this.twotoneIcons.push(iconId);
-                  break;
-                case 'desktop':
-                  this.desktopIcons.push(iconId);
-                  break;
-                case 'sirius-empty-states':
-                  this.siriusEmptyStates.push(iconId);
-                  break;
-              }
-            });
-          });
-        },
-        getIcon(item) {
-          this.currentIcon = item
-        }
-      },
-      computed: {
-        filteredList() {
-          if (this.selected == 'filled') {
-            return this.filledIcons.filter(item => {
-              return item.toLowerCase().includes(this.search.toLowerCase())
-            })
-          }
-          else if (this.selected == 'twotone') {
-            return this.twotoneIcons.filter(item => {
-              return item.toLowerCase().includes(this.search.toLowerCase())
-            })
-          } else if (this.selected == 'desktop') {
-            return this.desktopIcons.filter(item => {
-              return item.toLowerCase().includes(this.search.toLowerCase())
-            })
-          } else if (this.selected == 'empty-states') {
-            return this.siriusEmptyStates.filter(item => {
-              return item.toLowerCase().includes(this.search.toLowerCase())
-            })
-          } else {
-            return this.icons.filter(item => {
-              if(this.selected)  { 
-                return item.toLowerCase().includes(this.search.toLowerCase()) && item.startsWith(this.selected)
-              } else {
-                return item.toLowerCase().includes(this.search.toLowerCase())
-              }
-            })
-          } 
-        }
-      }
-    }) 
-  </script>
+  <script defer src="/app.ffbf0587a4e8b497d73f.js"></script></body>
+  <script src="https://unpkg.com/vue@3.2.37/dist/vue.global.prod.js"></script>
 </html>