Icon and Icon Select Component

6 years ago · fa88c68c0e
19 changed files with 368 additions and 1724 deletions
--- a/package.json
+++ b/package.json
@ -28,5 +28,8 @@
    "format": "prettier --write \"{,!(node_modules)/**/}*.{js,jsx,svelte}\"",
    "test:e2e": "lerna run cy:test",
    "test:e2e:ci": "lerna run cy:ci"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome": "^1.1.8"
  }
 }
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@ -66,6 +66,7 @@
    "@budibase/bbui": "^1.32.0",
    "@budibase/client": "^0.1.19",
    "@budibase/colorpicker": "^1.0.1",
+    "@fortawesome/fontawesome-free": "^5.14.0",
    "@sentry/browser": "5.19.1",
    "@svelteschool/svelte-forms": "^0.7.0",
    "britecharts": "^2.16.0",
--- a/packages/builder/rollup.config.js
+++ b/packages/builder/rollup.config.js
@ -158,13 +158,6 @@ export default {
          find: "constants",
          replacement: path.resolve(projectRootDir, "src/constants"),
        },
-        {
-          find: "standard-components",
-          replacement: path.resolve(
-            projectRootDir,
-            "../standard-components/src"
-          ),
-        },
      ],
      customResolver,
    }),
--- a/packages/builder/src/components/userInterface/IconSelect.svelte
+++ b/packages/builder/src/components/userInterface/IconSelect.svelte
@ -1,29 +0,0 @@
-<script>
-  import { DropdownMenu, Button } from "@budibase/bbui"
-  import { onMount } from "svelte"
-
-  // import options from "standard-components/IconNew/icons.js"
-
-  let buttonAnchor, dropdown
-
-  onMount(() => {})
-
-  function open() {}
-</script>
-
-<div bind:this={buttonAnchor}>
-  <button on:click={() => alert`eyeooooo`}>Show</button>
-</div>
-<DropdownMenu bind:this={dropdown} anchor={buttonAnchor}>
-  <div class="container">
-    <h1>Hii there</h1>
-  </div>
-</DropdownMenu>
-
-<style>
-  .container {
-    width: 500px;
-    height: 350px;
-    border: 2px solid red;
-  }
-</style>
--- a/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
+++ b/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
@ -0,0 +1,293 @@
+<script>
+  import { DropdownMenu, Button, Input } from "@budibase/bbui"
+  import { createEventDispatcher, tick } from "svelte"
+
+  import icons from "./icons.js"
+
+  const dispatch = createEventDispatcher()
+
+  export let value = ""
+  export let maxIconsPerPage = 30
+
+  let searchTerm = ""
+  let selectedLetter = "A"
+
+  let currentPage = 1
+  let filteredIcons = findIconByTerm(selectedLetter)
+
+  $: dispatch("change", value)
+
+  const alphabet = [
+    "A",
+    "B",
+    "C",
+    "D",
+    "E",
+    "F",
+    "G",
+    "H",
+    "I",
+    "J",
+    "K",
+    "L",
+    "M",
+    "N",
+    "O",
+    "P",
+    "Q",
+    "R",
+    "S",
+    "T",
+    "U",
+    "V",
+    "W",
+    "X",
+    "Y",
+    "Z",
+  ]
+  let buttonAnchor, dropdown
+  let loading = false
+
+  function findIconByTerm(term) {
+    const r = new RegExp(`\^${term}`, "i")
+    return icons.filter(i => r.test(i.label))
+  }
+
+  async function switchLetter(letter) {
+    currentPage = 1
+    searchTerm = ""
+    loading = true
+    selectedLetter = letter
+    filteredIcons = findIconByTerm(letter)
+    await tick()
+    loading = false
+  }
+
+  async function findIconOnPage() {
+    loading = true
+    const iconIdx = filteredIcons.findIndex(i => i.value === value)
+    if (iconIdx !== -1) {
+      currentPage = Math.ceil(iconIdx / maxIconsPerPage)
+    }
+    await tick()
+    loading = false
+  }
+
+  async function setSelectedUI() {
+    if (value) {
+      const letter = displayValue.substring(0, 1)
+      await switchLetter(letter)
+      await findIconOnPage()
+    }
+  }
+
+  async function pageClick(next) {
+    loading = true
+    if (next && currentPage < totalPages) {
+      currentPage++
+    } else if (!next && currentPage > 1) {
+      currentPage--
+    }
+    await tick()
+    loading = false
+  }
+
+  async function searchForIcon(e) {
+    currentPage = 1
+    loading = true
+    filteredIcons = findIconByTerm(searchTerm)
+    await tick()
+    loading = false
+  }
+
+  $: displayValue = value ? value.substring(7) : "Pick Icon"
+
+  $: totalPages = Math.ceil(filteredIcons.length / maxIconsPerPage)
+  $: pageEndIdx = maxIconsPerPage * currentPage
+  $: pagedIcons = filteredIcons.slice(pageEndIdx - maxIconsPerPage, pageEndIdx)
+
+  $: pagerText = `Page ${currentPage} of ${totalPages}`
+</script>
+
+<div bind:this={buttonAnchor}>
+  <Button secondary on:click={dropdown.show}>{displayValue}</Button>
+</div>
+<DropdownMenu
+  bind:this={dropdown}
+  on:open={setSelectedUI}
+  anchor={buttonAnchor}>
+  <div class="container">
+    <div class="search-area">
+      <div class="alphabet-area">
+        {#each alphabet as letter, idx}
+          <span
+            class="letter"
+            class:letter-selected={letter === selectedLetter}
+            on:click={() => switchLetter(letter)}>
+            {letter}
+          </span>
+          {#if idx !== alphabet.length - 1}
+            <span>-</span>
+          {/if}
+        {/each}
+      </div>
+      <div class="search-input">
+        <div class="input-wrapper">
+          <Input bind:value={searchTerm} thin placeholder="Search Icon" />
+        </div>
+        <Button secondary on:click={searchForIcon}>Search</Button>
+      </div>
+      <div class="page-area">
+        <div class="pager">
+          <span on:click={() => pageClick(false)}>
+            <i class="page-btn fas fa-chevron-left" />
+          </span>
+          <span>{pagerText}</span>
+          <span on:click={() => pageClick(true)}>
+            <i class="page-btn fas fa-chevron-right" />
+          </span>
+        </div>
+      </div>
+    </div>
+    {#if pagedIcons.length > 0}
+      <div class="icon-area">
+        {#if !loading}
+          {#each pagedIcons as icon}
+            <div
+              class="icon-container"
+              class:selected={value === icon.value}
+              on:click={() => (value = icon.value)}>
+              <div class="icon-preview">
+                <i class={`${icon.value} fa-3x`} />
+              </div>
+              <div class="icon-label">{icon.label}</div>
+            </div>
+          {/each}
+        {/if}
+      </div>
+    {:else}
+      <div class="no-icons">
+        <h5>
+          {`There is no icons for this ${searchTerm ? 'search' : 'page'}`}
+        </h5>
+      </div>
+    {/if}
+  </div>
+</DropdownMenu>
+
+<style>
+  .container {
+    width: 610px;
+    height: 350px;
+    display: flex;
+    flex-direction: column;
+    padding: 10px 0px 10px 15px;
+    overflow-x: hidden;
+  }
+
+  .search-area {
+    flex: 0 0 80px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .icon-area {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-gap: 5px;
+    justify-content: flex-start;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 10px;
+  }
+
+  .no-icons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .alphabet-area {
+    display: flex;
+    flex-flow: row wrap;
+    padding-bottom: 10px;
+    padding-right: 15px;
+    justify-content: space-around;
+  }
+
+  .loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .search-input {
+    display: flex;
+    flex-flow: row nowrap;
+    width: 100%;
+    padding-right: 15px;
+  }
+
+  .input-wrapper {
+    width: 510px;
+    margin-right: 5px;
+  }
+
+  .page-area {
+    padding: 10px;
+    display: flex;
+    justify-content: center;
+  }
+
+  .letter {
+    color: var(--blue);
+  }
+
+  .letter:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  .letter-selected {
+    text-decoration: underline;
+  }
+
+  .icon-container {
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    border: var(--border-dark);
+  }
+
+  .icon-container:hover {
+    cursor: pointer;
+    background: var(--grey-2);
+  }
+
+  .selected {
+    background: var(--grey-3);
+  }
+
+  .icon-preview {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .icon-label {
+    flex: 0 0 20px;
+    text-align: center;
+    font-size: 12px;
+  }
+
+  .page-btn {
+    color: var(--blue);
+  }
+
+  .page-btn:hover {
+    cursor: pointer;
+  }
+</style>
--- a/packages/builder/src/components/userInterface/IconSelect/icons.js
+++ b/packages/builder/src/components/userInterface/IconSelect/icons.js
--- a/packages/builder/src/components/userInterface/IconSelect/index.js
+++ b/packages/builder/src/components/userInterface/IconSelect/index.js
@ -0,0 +1,3 @@
+import "@fortawesome/fontawesome-free/js/all.js"
+
+export { default as IconSelect } from "./IconSelect.svelte"
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@ -71,7 +71,7 @@

    let temp = runtimeToReadableBinding(bindableProperties, value)

-    return value === undefined && props.defaultValue !== undefined
+    return !value && props.defaultValue !== undefined
      ? props.defaultValue
      : temp
  }
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@ -6,9 +6,10 @@ import ModelViewSelect from "components/userInterface/ModelViewSelect.svelte"
 import ModelViewFieldSelect from "components/userInterface/ModelViewFieldSelect.svelte"
 import Event from "components/userInterface/EventsEditor/EventPropertyControl.svelte"
 import ScreenSelect from "components/userInterface/ScreenSelect.svelte"
-import IconSelect from "components/userInterface/IconSelect.svelte"
+import { IconSelect } from "components/userInterface/IconSelect"

 import { all } from "./propertyCategories.js"
+import Colorpicker from "@budibase/colorpicker"
 /* 
 { label: "N/A ", value: "N/A" },
 { label: "Flex", value: "flex" },
@ -222,14 +223,38 @@ export default {
          },
        },
        {
-          _component: "@budibase/standard-components/iconnew",
-          name: "Icon New",
+          _component: "@budibase/standard-components/icon",
+          name: "Icon",
          description: "A basic component for displaying icons",
          icon: "ri-sun-fill",
          children: [],
          properties: {
-            design: { ...all },
-            settings: [{ label: "Icon", key: "icon", control: IconSelect }],
+            design: {},
+            settings: [
+              { label: "Icon", key: "icon", control: IconSelect },
+              {
+                label: "Size",
+                key: "size",
+                control: OptionSelect,
+                defaultValue: "fa-lg",
+                options: [
+                  { value: "fa-xs", label: "xs" },
+                  { value: "fa-sm", label: "sm" },
+                  { value: "fa-lg", label: "lg" },
+                  { value: "fa-2x", label: "2x" },
+                  { value: "fa-3x", label: "3x" },
+                  { value: "fa-5x", label: "5x" },
+                  { value: "fa-7x", label: "7x" },
+                  { value: "fa-10x", label: "10x" },
+                ],
+              },
+              {
+                label: "Color",
+                key: "color",
+                control: Colorpicker,
+                defaultValue: "#000",
+              },
+            ],
          },
        },
        {
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@ -698,7 +698,6 @@
 "@budibase/client@^0.1.19":
  version "0.1.19"
  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.19.tgz#3906781423ab4626118c981657ecf7a4578c547c"
-  integrity sha512-crxnLgebsh6CR0aMleDahY/1vFPbveG6JuSS/EVZeoBmckzK8hwiUQYQhIlf68nZfzWsCE/M9TX7SJxsrKY3bQ==
  dependencies:
    "@nx-js/compiler-util" "^2.0.0"
    bcryptjs "^2.4.3"
@ -762,6 +761,10 @@
    debug "^3.1.0"
    lodash.once "^4.1.1"

+"@fortawesome/fontawesome-free@^5.14.0":
+  version "5.14.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.14.0.tgz#a371e91029ebf265015e64f81bfbf7d228c9681f"
+
 "@hapi/address@^2.1.2":
  version "2.1.4"
  resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@ -962,7 +965,6 @@
 "@nx-js/compiler-util@^2.0.0":
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/@nx-js/compiler-util/-/compiler-util-2.0.0.tgz#c74c12165fa2f017a292bb79af007e8fce0af297"
-  integrity sha512-AxSQbwj9zqt8DYPZ6LwZdytqnwfiOEdcFdq4l8sdjkZmU2clTht7RDLCI8xvkp7KqgcNaOGlTeCM55TULWruyQ==

 "@polka/url@^0.5.0":
  version "0.5.0"
@ -1393,7 +1395,6 @@ array-equal@^1.0.0:
 array-filter@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
-  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=

 array-union@^2.1.0:
  version "2.1.0"
@ -1452,7 +1453,6 @@ atob@^2.1.2:
 available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
-  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
  dependencies:
    array-filter "^1.0.0"

@ -1533,7 +1533,6 @@ bcrypt-pbkdf@^1.0.0:
 bcryptjs@^2.4.3:
  version "2.4.3"
  resolved "https://registry.yarnpkg.com/bcryptjs/-/bcryptjs-2.4.3.tgz#9ab5627b93e60621ff7cdac5da9733027df1d0cb"
-  integrity sha1-mrVie5PmBiH/fNrF2pczAn3x0Ms=

 binary-extensions@^2.0.0:
  version "2.0.0"
@ -2413,7 +2412,6 @@ decode-uri-component@^0.2.0:
 deep-equal@^2.0.1:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
-  integrity sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA==
  dependencies:
    es-abstract "^1.17.5"
    es-get-iterator "^1.1.0"
@ -2602,7 +2600,6 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
 es-abstract@^1.17.4:
  version "1.17.6"
  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
-  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
  dependencies:
    es-to-primitive "^1.2.1"
    function-bind "^1.1.1"
@ -2619,7 +2616,6 @@ es-abstract@^1.17.4:
 es-abstract@^1.18.0-next.0:
  version "1.18.0-next.0"
  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.0.tgz#b302834927e624d8e5837ed48224291f2c66e6fc"
-  integrity sha512-elZXTZXKn51hUBdJjSZGYRujuzilgXo8vSPQzjGYXLvSlGiCo8VO8ZGV3kjo9a0WNJJ57hENagwbtlRuHuzkcQ==
  dependencies:
    es-to-primitive "^1.2.1"
    function-bind "^1.1.1"
@ -2637,7 +2633,6 @@ es-abstract@^1.18.0-next.0:
 es-get-iterator@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
-  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
  dependencies:
    es-abstract "^1.17.4"
    has-symbols "^1.0.1"
@ -2956,7 +2951,6 @@ for-in@^1.0.2:
 foreach@^2.0.5, foreach@~2.0.1:
  version "2.0.5"
  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
-  integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=

 forever-agent@~0.6.1:
  version "0.6.1"
@ -3330,7 +3324,6 @@ is-accessor-descriptor@^1.0.0:
 is-arguments@^1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
-  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==

 is-arrayish@^0.2.1:
  version "0.2.1"
@ -3339,7 +3332,6 @@ is-arrayish@^0.2.1:
 is-bigint@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
-  integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==

 is-binary-path@~2.1.0:
  version "2.1.0"
@ -3350,7 +3342,6 @@ is-binary-path@~2.1.0:
 is-boolean-object@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
-  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==

 is-buffer@^1.1.5:
  version "1.1.6"
@ -3363,7 +3354,6 @@ is-callable@^1.1.4, is-callable@^1.1.5:
 is-callable@^1.2.0:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.1.tgz#4d1e21a4f437509d25ce55f8184350771421c96d"
-  integrity sha512-wliAfSzx6V+6WfMOmus1xy0XvSgf/dlStkvTfq7F0g4bOIW0PSUbnyse3NhDwdyYS1ozfUtAAySqTws3z9Eqgg==

 is-ci@^2.0.0:
  version "2.0.0"
@ -3451,7 +3441,6 @@ is-installed-globally@^0.3.2:
 is-map@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
-  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==

 is-module@^1.0.0:
  version "1.0.0"
@ -3460,12 +3449,10 @@ is-module@^1.0.0:
 is-negative-zero@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
-  integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=

 is-number-object@^1.0.3:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
-  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==

 is-number@^3.0.0:
  version "3.0.0"
@ -3526,14 +3513,12 @@ is-regex@^1.0.5:
 is-regex@^1.1.0, is-regex@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
-  integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
  dependencies:
    has-symbols "^1.0.1"

 is-set@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
-  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==

 is-stream@^1.1.0:
  version "1.1.0"
@ -3546,7 +3531,6 @@ is-stream@^2.0.0:
 is-string@^1.0.4, is-string@^1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
-  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==

 is-symbol@^1.0.2:
  version "1.0.3"
@ -3557,7 +3541,6 @@ is-symbol@^1.0.2:
 is-typed-array@^1.1.3:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
-  integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
  dependencies:
    available-typed-arrays "^1.0.0"
    es-abstract "^1.17.4"
@ -3571,12 +3554,10 @@ is-typedarray@~1.0.0:
 is-weakmap@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
-  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==

 is-weakset@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
-  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==

 is-windows@^1.0.2:
  version "1.0.2"
@ -3601,7 +3582,6 @@ isarray@1.0.0, isarray@~1.0.0:
 isarray@^2.0.5:
  version "2.0.5"
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==

 isbuffer@~0.0.0:
  version "0.0.0"
@ -4419,7 +4399,6 @@ ltgt@^2.1.2:
 lunr@^2.3.5:
  version "2.3.9"
  resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.9.tgz#18b123142832337dd6e964df1a5a7707b25d35e1"
-  integrity sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==

 magic-string@^0.22.5:
  version "0.22.5"
@ -4721,12 +4700,10 @@ object-inspect@^1.7.0:
 object-inspect@^1.8.0:
  version "1.8.0"
  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
-  integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==

 object-is@^1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
-  integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
  dependencies:
    define-properties "^1.1.3"
    es-abstract "^1.17.5"
@ -5244,7 +5221,6 @@ regex-not@^1.0.0, regex-not@^1.0.2:
 regexp.prototype.flags@^1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
-  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
  dependencies:
    define-properties "^1.1.3"
    es-abstract "^1.17.0-next.1"
@ -5252,7 +5228,6 @@ regexp.prototype.flags@^1.3.0:
 regexparam@^1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
-  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==

 regexpu-core@^4.7.0:
  version "4.7.0"
@ -5654,14 +5629,12 @@ shellwords@^0.1.1:
 shortid@^2.2.15, shortid@^2.2.8:
  version "2.2.15"
  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
-  integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
  dependencies:
    nanoid "^2.1.0"

 side-channel@^1.0.2:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
-  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
  dependencies:
    es-abstract "^1.18.0-next.0"
    object-inspect "^1.8.0"
@ -6033,7 +6006,6 @@ svelte@3.23.x:
 svelte@^3.9.2:
  version "3.25.0"
  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.25.0.tgz#e7f89d11a2223ac02d29f75f82b2a9cca7fd7a54"
-  integrity sha512-CUfq+YTC5Q0tBg7Q9X/QxNutdEYp7ogdbcTZF3mrowOlp3+OF1ZexHwI0Io2VqFSDxht7TlA2lTIQC4RnhR1MQ==

 symbol-observable@^1.1.0:
  version "1.2.0"
@ -6369,7 +6341,6 @@ whatwg-url@^8.0.0:
 which-boxed-primitive@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
-  integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
  dependencies:
    is-bigint "^1.0.0"
    is-boolean-object "^1.0.0"
@ -6380,7 +6351,6 @@ which-boxed-primitive@^1.0.1:
 which-collection@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
-  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
  dependencies:
    is-map "^2.0.1"
    is-set "^2.0.1"
@ -6394,7 +6364,6 @@ which-module@^2.0.0:
 which-typed-array@^1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
-  integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
  dependencies:
    available-typed-arrays "^1.0.2"
    es-abstract "^1.17.5"
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@ -199,17 +199,9 @@
 	"icon": {
 		"description": "A HTML icon tag",
 		"props": {
-			"url": "string",
-			"className": "string",
-			"description": "string",
-			"height": "string",
-			"width": "string"
-		}
-	},
-	"iconnew": {
-		"description": "A HTML icon tag",
-		"props": {
-			"icon": "string"	
+			"icon": "string",	
+			"size": {"type": "string", "default": "fa-lg"},
+			"color": {"type": "string", "default": "#000"}
 		}
 	},
 	"datatable": {
--- a/packages/standard-components/dist/index.js.map
+++ b/packages/standard-components/dist/index.js.map
--- a/packages/standard-components/src/Icon.svelte
+++ b/packages/standard-components/src/Icon.svelte
@ -1,9 +1,9 @@
-<script>
-  export let icon = ""
-  export let fontSize = "1em"
-  export let _bb
-
-  $: style = { fontSize }
-</script>
-
-<i class={icon} {style} />
+<script>
+  import "@fortawesome/fontawesome-free/js/all.js"
+
+  export let icon = ""
+  export let size = "fa-lg"
+  export let color = "#000"
+</script>
+
+<i style={`color: ${color};`} class={`${icon} ${size}`} />
--- a/packages/standard-components/src/IconNew/IconNew.svelte
+++ b/packages/standard-components/src/IconNew/IconNew.svelte
@ -1,7 +0,0 @@
-<script>
-  export let icon = ""
-
-  $: console.log("ICON", icon)
-</script>
-
-<i class={`${icon}`} />
--- a/packages/standard-components/src/IconNew/free-icons.txt
+++ b/packages/standard-components/src/IconNew/free-icons.txt
--- a/packages/standard-components/src/IconNew/index.js
+++ b/packages/standard-components/src/IconNew/index.js
@ -1,4 +0,0 @@
-import "@fortawesome/fontawesome-free/js/all.js"
-
-export { default as iconnew } from "./IconNew.svelte"
-// export { default as icons } from "./icons.js"
--- a/packages/standard-components/src/IconOld.svelte
+++ b/packages/standard-components/src/IconOld.svelte
@ -0,0 +1,9 @@
+<script>
+  export let icon = ""
+  export let fontSize = "1em"
+  export let _bb
+
+  $: style = { fontSize }
+</script>
+
+<i class={icon} {style} />
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@ -12,7 +12,6 @@ export { default as login } from "./Login.svelte"
 export { default as saveRecordButton } from "./Templates/saveRecordButton"
 export { default as link } from "./Link.svelte"
 export { default as image } from "./Image.svelte"
-export { default as icon } from "./Icon.svelte"
 export { default as Navigation } from "./Navigation.svelte"
 export { default as datatable } from "./DataTable.svelte"
 export { default as dataform } from "./DataForm.svelte"
@ -28,4 +27,4 @@ export { default as cardhorizontal } from "./CardHorizontal.svelte"
 export { default as recorddetail } from "./RecordDetail.svelte"
 export { default as datepicker } from "./DatePicker.svelte"
 export * from "./Chart"
-export * from "./IconNew"
+export { default as icon } from "./Icon.svelte"
--- a/yarn.lock
+++ b/yarn.lock
@ -79,6 +79,16 @@
    lodash "^4.17.13"
    to-fast-properties "^2.0.0"

+"@fortawesome/fontawesome-common-types@^0.1.7":
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz#4336c4b06d0b5608ff1215464b66fcf9f4795284"
+
+"@fortawesome/fontawesome@^1.1.8":
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome/-/fontawesome-1.1.8.tgz#75fe66a60f95508160bb16bd781ad7d89b280f5b"
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.1.7"
+
 "@lerna/add@3.14.0":
  version "3.14.0"
  resolved "https://registry.yarnpkg.com/@lerna/add/-/add-3.14.0.tgz#799d416e67d48c285967abf883be746557aefa48"