fix: core shows only Lucide icons: the default bulk delete action, scaffolded menu items, date pickers, select, login prompt and skeletons no longer use flowbite icons and inline SVG AdminForth/2005

Author: ivictbor

adminforth/commands/createApp/templates/index.ts.hbs

@@ -70,7 +70,7 @@ export const admin = new AdminForth({
     { type: 'heading', label: 'SYSTEM' },
     {
       label: 'Users',
-      icon: 'flowbite:user-solid',
+      icon: 'lucide:user',
       resourceId: 'adminuser'
     },
   ],

adminforth/commands/createResource/injectResourceIntoIndex.js

@@ -18,7 +18,7 @@ export async function injectResourceIntoIndex({
   table,
   resourceId,
   label,
-  icon = "flowbite:user-solid",
+  icon = "lucide:user",
 }) {
   let code = await fs.readFile(indexFilePath, "utf-8");
   const ast = recast.parse(code, { parser });

adminforth/commands/createResource/main.js

@@ -59,6 +59,6 @@ export default async function createResource(args) {
     table: resourceId,
     resourceId: resourceId,
     label: toTitleCase(table.table),
-    icon: "flowbite:user-solid",
+    icon: "lucide:user",
   });
  }

adminforth/design/system-concepts.md

@@ -38,6 +38,7 @@ Below `sm` (640px) a Dialog or Modal docks to the bottom edge as a sheet: full w
 - Use Lucide: `@iconify-prerendered/vue-lucide` in components (`IconPencil`, `IconTrash2`), `lucide:<name>` in config (`icon: 'lucide:download'`).
 - 16px (`w-4 h-4`) in controls and menus. Icons are muted (`text-lightInputIconColor`), destructive items color their icon too.
 - Don't add icons from other sets; replace flowbite, heroicons and humbleicons icons with Lucide when you touch a component. The old sets stay installed because apps and older plugins still import them.
+- Don't draw icons with inline `<svg>` or keep them as own `.vue` files, take the Lucide component. Inline SVG is only for graphics which are not icons: the two-tone `Spinner` ring, the `Toast` timer ring, charts.
 
 ## Moving off flowbite
 

adminforth/modules/configValidator.ts

@@ -270,7 +270,7 @@ export default class ConfigValidator implements IConfigValidator {
 
     bulkActions.push({
       label: `Delete checked`,
-      icon: 'flowbite:trash-bin-outline',
+      icon: 'lucide:trash-2',
       confirm: {
         title: 'Are you sure you want to delete selected items?',
         message: 'Deleting {count} item. This process is irreversible. | Deleting {count} items. This process is irreversible.',

adminforth/spa/src/afcl/DatePicker.vue

@@ -22,7 +22,7 @@
         <div>
           <div class="relative">
             <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-              <IconTime class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon bg-lightDatePickerButtonBackground dark:bg-darkDatePickerButtonBackground"/>
+              <IconClock class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon bg-lightDatePickerButtonBackground dark:bg-darkDatePickerButtonBackground"/>
             </div>
             <input v-model="startTime" type="time" id="start-time" step="1"
                    class="af-pick-time-button bg-lightDatePickerButtonBackground border border-lightDatePickerButtonBorder text-lightDatePickerButtonText text-sm rounded-default block w-full px-2.5 py-1.5 leading-5 shadow-customLight focus:outline-none focus:ring-[3px] focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder dark:bg-darkInputBackground dark:border-darkInputBorder dark:placeholder-darkInputPlaceholderText dark:text-darkDatePickerButtonText focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
@@ -35,12 +35,7 @@
               class="text-lightDatePickerExpandText dark:text-darkDatePickerExpandText text-[13px] font-medium hover:underline p-0 inline-flex items-center gap-0.5 mb-2"
               :class="{hidden: column.type !== 'datetime'}"
               @click="toggleTimeInputs">{{ showTimeInputs ? $t('Hide time') : $t('Show time') }}
-        <svg class="w-4 h-4" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
-             xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-             fill="none" viewBox="0 0 24 24">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="m8 10 4 4 4-4"/>
-        </svg>
+        <IconChevronDown class="w-4 h-4" :class="{'rotate-180': showTimeInputs}"/>
       </button>
     </div>
   </div>
@@ -53,8 +48,7 @@ import utc from 'dayjs/plugin/utc';
 import {useCoreStore} from '@/stores/core';
 import {FLEXIBLE_DATEPICKER_FORMAT} from '@/utils/dateUtils';
 
-import IconCalendar from "@/components/icons/IconCalendar.vue";
-import IconTime from "@/components/icons/IconTime.vue";
+import { IconCalendar, IconChevronDown, IconClock } from '@iconify-prerendered/vue-lucide';
 
 const coreStore = useCoreStore();
 dayjs.extend(utc)

adminforth/spa/src/afcl/Select.vue

@@ -106,14 +106,7 @@
             class="z-index-100 flex-shrink-0 ml-1 h-4 w-4 -mr-1 rounded-full inline-flex items-center justify-center text-lightDropdownMultipleSelectIcon hover:text-lightDropdownMultipleSelectIconHover dark:text-darkDropdownMultipleSelectIcon dark:hover:text-darkDropdownMultipleSelectIconHover focus:outline-none focus:text-lightDropdownMultipleSelectIconFocus focus:bg-lightDropdownMultipleSelectIconFocusBackground dark:focus:text-darkDropdownMultipleSelectIconFocus dark:focus:bg-darkDropdownMultipleSelectIconFocusBackground"
           >
             <span class="sr-only">{{ $t('Remove item') }}</span>
-            <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="1.5"
-                d="M1 1l6 6m0-6L1 7"
-              />
-            </svg>
+            <IconX class="h-3 w-3" />
           </button>
         </div> 
       </template>
@@ -123,7 +116,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch, nextTick, useId,type PropType, type Ref } from 'vue';
-import { IconChevronDown } from '@iconify-prerendered/vue-lucide';
+import { IconChevronDown, IconX } from '@iconify-prerendered/vue-lucide';
 import { useElementSize } from '@vueuse/core'
 
 type ISingleSelectModelValue = string | number | boolean | null;

adminforth/spa/src/afcl/Skeleton.vue

@@ -1,22 +1,15 @@
 <template>
     <div v-if="type === 'image'" role="status" class="flex animate-pulse items-center justify-center bg-lightSkeletonBackgroundColor rounded dark:bg-darkSkeletonBackgroundColor">
-        <svg class="w-10 h-10 text-lightSkeletonIconColor dark:text-darkSkeletonIconColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
-            <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
-        </svg>
+        <IconImage class="w-10 h-10 text-lightSkeletonIconColor dark:text-darkSkeletonIconColor" />
     </div>
     <div v-else-if="type === 'video'" role="status" class="flex items-center justify-center max-w-sm bg-lightSkeletonBackgroundColor rounded-lg animate-pulse dark:bg-darkSkeletonBackgroundColor">
-        <svg class="w-10 h-10 text-lightSkeletonIconColor dark:text-darkSkeletonIconColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
-            <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"/>
-            <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM9 13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2Zm4 .382a1 1 0 0 1-1.447.894L10 13v-2l1.553-1.276a1 1 0 0 1 1.447.894v2.764Z"/>
-        </svg>
+        <IconVideo class="w-10 h-10 text-lightSkeletonIconColor dark:text-darkSkeletonIconColor" />
         <span class="sr-only">Loading...</span>
     </div>
-    <svg v-else-if="type === 'avatar'" class="me-3 animate-pulse text-lightSkeletonIconColor dark:text-darkSkeletonBackgroundColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-        <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
-    </svg>
-    <div 
-        v-else-if="type === 'input'" 
-        role="input" 
+    <IconCircleUserRound v-else-if="type === 'avatar'" class="me-3 animate-pulse text-lightSkeletonIconColor dark:text-darkSkeletonBackgroundColor" />
+    <div
+        v-else-if="type === 'input'"
+        role="input"
         :class="['animate-pulse bg-lightSkeletonBackgroundColor dark:bg-darkSkeletonBackgroundColor rounded-default', $attrs.class]"
     ></div>
     <div v-else role="status" class="flex items-center justify-center animate-pulse bg-lightSkeletonIconColor rounded-full dark:bg-darkSkeletonBackgroundColor">
@@ -25,7 +18,9 @@
 </template>
 
 <script setup lang="ts">
+import { IconCircleUserRound, IconImage, IconVideo } from '@iconify-prerendered/vue-lucide';
+
 defineProps<{
     type?: string,
 }>();
-</script>
+</script>

adminforth/spa/src/components/CustomDateRangePicker.vue

@@ -27,7 +27,7 @@
         <div>
           <div class="relative">
             <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-              <IconTime class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon bg-lightDatePickerButtonBackground dark:bg-darkDatePickerButtonBackground"/>
+              <IconClock class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon bg-lightDatePickerButtonBackground dark:bg-darkDatePickerButtonBackground"/>
             </div>
 
             <input v-model="startTime" type="time" id="start-time"
@@ -39,7 +39,7 @@
         <div>
           <div class="relative">
             <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-              <IconTime class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon bg-lightDatePickerButtonBackground dark:bg-darkDatePickerButtonBackground"/>
+              <IconClock class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon bg-lightDatePickerButtonBackground dark:bg-darkDatePickerButtonBackground"/>
             </div>
 
             <input v-model="endTime" type="time" id="end-time"
@@ -53,12 +53,7 @@
               class="text-lightPrimary dark:text-darkPrimary text-[13px] font-medium hover:underline p-0 inline-flex items-center gap-0.5 mb-2"
               :class="{hidden: column.type !== 'datetime'}"
               @click="toggleTimeInputs">{{ showTimeInputs ? $t('Hide time') : $t('Show time') }}
-        <svg class="w-4 h-4" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
-             xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-             fill="none" viewBox="0 0 24 24">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="m8 10 4 4 4-4"/>
-        </svg>
+        <IconChevronDown class="w-4 h-4" :class="{'rotate-180': showTimeInputs}"/>
       </button>
     </div>
   </div>
@@ -71,8 +66,7 @@ import utc from 'dayjs/plugin/utc';
 import {useCoreStore} from '@/stores/core';
 import {FLEXIBLE_DATEPICKER_FORMAT} from '@/utils';
 
-import IconCalendar from "@/components/icons/IconCalendar.vue";
-import IconTime from "@/components/icons/IconTime.vue";
+import { IconCalendar, IconChevronDown, IconClock } from '@iconify-prerendered/vue-lucide';
 
 const coreStore = useCoreStore();
 dayjs.extend(utc)