replace remix icons in NavItem component

packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte

@@ -20,10 +20,11 @@
   {#each $automationStore.automations as automation, idx}
     <NavItem
       border={idx > 0}
-      icon="ri-stackshare-line"
+      icon="ShareAndroid"
       text={automation.name}
       selected={automation._id === selectedAutomationId}
-      on:click={() => selectAutomation(automation)}>
+      on:click={() => selectAutomation(automation)}
+    >
       <EditAutomationPopover {automation} />
     </NavItem>
   {/each}

packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte

@@ -33,22 +33,25 @@
         border={idx > 0}
         text={datasource.name}
         selected={$datasources.selected === datasource._id}
-        on:click={() => selectDatasource(datasource)}>
+        on:click={() => selectDatasource(datasource)}
+      >
         <div class="datasource-icon" slot="icon">
           <svelte:component
             this={ICONS[datasource.source]}
             height="18"
-            width="18" />
+            width="18"
+          />
         </div>
         <EditDatasourcePopover {datasource} />
       </NavItem>
-      {#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
+      {#each $queries.list.filter((query) => query.datasourceId === datasource._id) as query}
         <NavItem
           indentLevel={1}
-          icon="ri-eye-line"
+          icon="SQLQuery"
           text={query.name}
           selected={$queries.selected === query._id}
-          on:click={() => onClickQuery(query)}>
+          on:click={() => onClickQuery(query)}
+        >
           <EditQueryPopover {query} />
         </NavItem>
       {/each}

packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte

@@ -34,10 +34,11 @@
     {#each $tables.list as table, idx}
       <NavItem
         border={idx > 0}
-        icon={`ri-${table._id === TableNames.USERS ? 'user' : 'table'}-line`}
+        icon={table._id === TableNames.USERS ? "UserGroup" : "Table"}
         text={table.name}
         selected={selectedView === `all_${table._id}`}
-        on:click={() => selectTable(table)}>
+        on:click={() => selectTable(table)}
+      >
         {#if table._id !== TableNames.USERS}
           <EditTablePopover {table} />
         {/if}
@@ -48,9 +49,11 @@
           icon="ri-eye-line"
           text={viewName}
           selected={selectedView === viewName}
-          on:click={() => onClickView(table, viewName)}>
+          on:click={() => onClickView(table, viewName)}
+        >
           <EditViewPopover
-            view={{ name: viewName, ...table.views[viewName] }} />
+            view={{ name: viewName, ...table.views[viewName] }}
+          />
         </NavItem>
       {/each}
     {/each}

packages/builder/src/components/common/NavItem.svelte

@@ -35,7 +35,7 @@
 
     <slot name="icon" />
     {#if icon}
-      <div class="icon"><i class={icon} /></div>
+      <div class="icon"><Icon s name={icon} /></div>
     {/if}
     <div class="text">{text}</div>
     {#if withActions}

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte

@@ -35,11 +35,11 @@
     route.subpaths[selectedScreen?.routing?.route] !== undefined
   $: routeOpened = routeManuallyOpened || routeSelected || hasSearchMatch
 
-  const changeScreen = screenId => {
+  const changeScreen = (screenId) => {
     store.actions.screens.select(screenId)
   }
 
-  const getAllScreens = route => {
+  const getAllScreens = (route) => {
     let screens = []
     Object.entries(route.subpaths).forEach(([route, subpath]) => {
       Object.entries(subpath.screens).forEach(([role, id]) => {
@@ -51,7 +51,7 @@
 
   const getFilteredScreens = (screens, searchString) => {
     return screens.filter(
-      screen => !searchString || screen.route.includes(searchString)
+      (screen) => !searchString || screen.route.includes(searchString)
     )
   }
 
@@ -65,23 +65,25 @@
 
 {#if !noSearchMatch}
   <NavItem
-    icon="ri-folder-line"
+    icon="FolderOutline"
     text={path}
     on:click={toggleManuallyOpened}
     opened={routeOpened}
     {border}
-    withArrow={route.subpaths} />
+    withArrow={route.subpaths}
+  />
 
   {#if routeOpened}
     {#each filteredScreens as screen (screen.id)}
       <NavItem
-        icon="ri-artboard-2-line"
+        icon="WebPage"
         indentLevel={indent || 1}
         selected={$store.selectedScreenId === screen.id}
         opened={$store.selectedScreenId === screen.id}
         text={ROUTE_NAME_MAP[screen.route]?.[screen.role] || screen.route}
         withArrow={route.subpaths}
-        on:click={() => changeScreen(screen.id)}>
+        on:click={() => changeScreen(screen.id)}
+      >
         <ScreenDropdownMenu screenId={screen.id} />
       </NavItem>
       {#if selectedScreen?._id === screen.id}
@@ -89,7 +91,8 @@
           level={1}
           components={selectedScreen.props._children}
           currentComponent={$selectedComponent}
-          {dragDropStore} />
+          {dragDropStore}
+        />
       {/if}
     {/each}
   {/if}

packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte

@@ -93,11 +93,6 @@
     </Tab>
     <Tab title="Layouts">
       <div class="tab-content-padding">
-        <i
-          on:click={modal.show}
-          data-cy="new-layout"
-          class="ri-add-circle-fill"
-        />
         {#each $store.layouts as layout, idx (layout._id)}
           <Layout {layout} border={idx > 0} />
         {/each}

packages/builder/src/components/design/NavigationPanel/Layout.svelte

@@ -1,20 +1,13 @@
 <script>
-  import { goto } from "@roxi/routify"
-  import { FrontendTypes } from "constants"
   import ComponentTree from "./ComponentNavigationTree/ComponentTree.svelte"
   import LayoutDropdownMenu from "./ComponentNavigationTree/LayoutDropdownMenu.svelte"
   import initDragDropStore from "./ComponentNavigationTree/dragDropStore"
   import NavItem from "components/common/NavItem.svelte"
-  import { last } from "lodash/fp"
+  import { store, selectedComponent } from "builderStore"
-  import { store, currentAsset, selectedComponent } from "builderStore"
-  import { writable } from "svelte/store"
 
   export let layout
   export let border
 
-  let confirmDeleteDialog
-  let componentToDelete = ""
-
   const dragDropStore = initDragDropStore()
 
   const selectLayout = () => {
@@ -24,12 +17,13 @@
 
 <NavItem
   {border}
-  icon="ri-layout-3-line"
+  icon="ClassicGridView"
   text={layout.name}
   withArrow
   selected={$store.selectedLayoutId === layout._id}
   opened={$store.selectedLayoutId === layout._id}
-  on:click={selectLayout}>
+  on:click={selectLayout}
+>
   <LayoutDropdownMenu {layout} />
 </NavItem>
 
@@ -37,5 +31,6 @@
   <ComponentTree
     components={layout.props._children}
     currentComponent={$selectedComponent}
-    {dragDropStore} />
+    {dragDropStore}
+  />
 {/if}