Icon and IconSelect Components

packages/builder/rollup.config.js

@@ -158,6 +158,13 @@ export default {
           find: "constants",
           replacement: path.resolve(projectRootDir, "src/constants"),
         },
+        {
+          find: "standard-components",
+          replacement: path.resolve(
+            projectRootDir,
+            "../standard-components/src"
+          ),
+        },
       ],
       customResolver,
     }),

packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte

@@ -35,8 +35,6 @@
       c => c._component === componentInstance._component
     ) || {}
 
-  let panelDefinition = {}
-
   $: panelDefinition =
     componentPropDefinition.properties &&
     componentPropDefinition.properties[selectedCategory.value]

packages/builder/src/components/userInterface/IconSelect.svelte

@@ -0,0 +1,29 @@
+<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>

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -6,6 +6,7 @@ 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 { all } from "./propertyCategories.js"
 /* 
@@ -220,16 +221,17 @@ export default {
             settings: [{ label: "URL", key: "url", control: Input }],
           },
         },
-        // {
-        // _component: "@budibase/standard-components/icon",
-        // name: "Icon",
-        // description: "A basic component for displaying icons",
-        // icon: "ri-sun-fill",
-        // children: [],
-        // properties: {
-        // design: { ...all },
-        // },
-        // },
+        {
+          _component: "@budibase/standard-components/iconnew",
+          name: "Icon New",
+          description: "A basic component for displaying icons",
+          icon: "ri-sun-fill",
+          children: [],
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Icon", key: "icon", control: IconSelect }],
+          },
+        },
         {
           _component: "@budibase/standard-components/link",
           name: "Link",

packages/standard-components/components.json

@@ -206,6 +206,12 @@
 			"width": "string"
 		}
 	},
+	"iconnew": {
+		"description": "A HTML icon tag",
+		"props": {
+			"icon": "string"	
+		}
+	},
 	"datatable": {
 		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,

packages/standard-components/package.json

@@ -37,6 +37,7 @@
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
     "@budibase/bbui": "^1.32.0",
+    "@fortawesome/fontawesome-free": "^5.14.0",
     "britecharts": "^2.16.1",
     "d3-selection": "^1.4.2",
     "fast-sort": "^2.2.0",

packages/standard-components/src/IconNew/IconNew.svelte

@@ -0,0 +1,7 @@
+<script>
+  export let icon = ""
+
+  $: console.log("ICON", icon)
+</script>
+
+<i class={`${icon}`} />

packages/standard-components/src/IconNew/index.js

@@ -0,0 +1,4 @@
+import "@fortawesome/fontawesome-free/js/all.js"
+
+export { default as iconnew } from "./IconNew.svelte"
+// export { default as icons } from "./icons.js"

packages/standard-components/src/index.js

@@ -28,3 +28,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"