docs: examples use Lucide icons instead of flowbite, like the core does AdminForth/2005

Author: ivictbor

documentation/docs/tutorial/001-gettingStarted.md

@@ -487,7 +487,7 @@ export const admin = new AdminForth({
 //diff-add
       label: 'Core',
 //diff-add
-      icon: 'flowbite:brain-solid',
+      icon: 'lucide:brain',
 //diff-add
       open: true,
 //diff-add
@@ -499,7 +499,7 @@ export const admin = new AdminForth({
 //diff-add
           label: 'Apartments',
 //diff-add
-          icon: 'flowbite:home-solid',
+          icon: 'lucide:house',
 //diff-add
           resourceId: 'aparts',
 //diff-add
@@ -518,12 +518,12 @@ export const admin = new AdminForth({
     },
     {
       label: 'Users',
-      icon: 'flowbite:user-solid',
+      icon: 'lucide:user',
       resourceId: 'adminuser'
     },
     {
       label: "Apartments",
-      icon: "flowbite:user-solid",
+      icon: "lucide:user",
       //diff-remove
       resourceId: "apartments",
       //diff-add

documentation/docs/tutorial/01-helloWorld.md

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

documentation/docs/tutorial/03-Customization/06-customPages.md

@@ -284,29 +284,29 @@ menu: [
 //diff-add
       homepage: true,
 //diff-add
-      icon: 'flowbite:chart-pie-solid',
+      icon: 'lucide:chart-pie',
 //diff-add
       component: '@@/Dashboard.vue',
 //diff-add
     },
     {
       label: 'Core',
-      icon: 'flowbite:brain-solid',
+      icon: 'lucide:brain',
       open: true,
       children: [
         {
 //diff-remove
           homepage: true,  
           label: 'Apartments',
-          icon: 'flowbite:home-solid',
+          icon: 'lucide:house',
           resourceId: 'aparts',
         },
       ]
     },
 ```
 
 
-> ☝️ To find icon go to https://icon-sets.iconify.design/flowbite/?query=chart, click on icon you like and copy name:
+> ☝️ To find icon go to https://icon-sets.iconify.design/lucide/?query=chart, click on icon you like and copy name:
 ![Iconify icon select](image-icon-select.png)
 
 You might notice that in mounted hook page fetches custom endpoint '/api/dashboard-stats'. 
@@ -601,7 +601,7 @@ export const admin = new AdminForth({
         //diff-add
         slug: "users-settings",
         //diff-add
-        icon:"flowbite:user-solid"
+        icon:"lucide:user"
         //diff-add
       },
       //diff-add
@@ -611,7 +611,7 @@ export const admin = new AdminForth({
         //diff-add
         component: "@@/MySecrets.vue",
         //diff-add
-        icon: "flowbite:lock-solid"
+        icon: "lucide:lock"
         //diff-add
       }
       //diff-add

documentation/docs/tutorial/03-Customization/07-alert.md

@@ -132,7 +132,7 @@ menu: [
 //diff-add
     label: 'Alerts',
 //diff-add
-    icon: 'flowbite:bell-active-alt-solid',
+    icon: 'lucide:bell-ring',
 //diff-add
     component: '@@/Alerts.vue',
 //diff-add

documentation/docs/tutorial/03-Customization/09-Actions.md

@@ -17,7 +17,7 @@ Here's how to add a custom action:
     actions: [
       {
         name: 'Auto submit',  // Display name of the action
-        icon: 'flowbite:play-solid',  // Icon to display (using Flowbite icons)
+        icon: 'lucide:play',  // Icon to display (using Lucide icons)
 
         // Control who can see/use this action
         allowed: ({ adminUser, standardAllowedActions }) => {
@@ -49,7 +49,7 @@ Here's how to add a custom action:
 ### Action Configuration Options
 
 - `name`: Display name of the action
-- `icon`: Icon to show (using Flowbite icon set)
+- `icon`: Icon to show (using Lucide icon set)
 - `allowed`: Function to control access to the action
 - `action`: Handler function that executes when action is triggered for a **single** record
 - `bulkHandler`: Handler function that executes when the action is triggered for **multiple** records at once (see [Dedicated bulk handler](#dedicated-bulk-handler))
@@ -125,7 +125,7 @@ For operations that only apply to multiple selected records, use `options.bulkAc
     bulkActions: [
       {
         label: 'Send Invitation',
-        icon: 'flowbite:envelope-solid',
+        icon: 'lucide:mail',
         confirm: 'Are you sure you want to send invitation emails?',
         allowed: async ({ adminUser }) => adminUser.dbUser.role === 'superadmin',
         action: async ({ selectedIds }) => {
@@ -203,7 +203,7 @@ Instead of defining an `action` handler, you can specify a `url` that the user w
 ```ts title="./resources/apartments.ts"
 {
   name: 'View details',
-  icon: 'flowbite:eye-solid',
+  icon: 'lucide:eye',
   url: '/resource/aparts',  // URL to redirect to
   showIn: {
     list: true,
@@ -226,7 +226,7 @@ To open the URL in a new tab, append `target=_blank` as a query parameter. If th
 ```ts
 {
   name: 'View on Google',
-  icon: 'flowbite:external-link-solid',
+  icon: 'lucide:external-link',
   url: 'https://google.com/search?q=apartment&target=_blank',
   showIn: {
     list: true,
@@ -240,7 +240,7 @@ Example to generate dynamic URL:
 ```ts
 {
   name: 'View on Google',
-  icon: 'flowbite:external-link-solid',
+  icon: 'lucide:external-link',
   url: async ({record, recordId, adminUser, resource }) => `https://google.com/search?q=Apartment ${record.title}`,
   showIn: {
     list: true,
@@ -262,7 +262,7 @@ However, rearely you might also like to decide whether to redirect only after pe
 ```ts
 {
   name: 'View on Google',
-  icon: 'flowbite:external-link-solid',
+  icon: 'lucide:external-link',
   action: async ({ recordId }) => {
     if (await testSomething(recordId)) {
         return { ok: true, redirectUrl: 'https://google.com/search?q=apartment' };
@@ -290,7 +290,7 @@ Below we wrap a "Mark as listed" action.
     actions: [
       {
         name: 'Mark as listed',
-        icon: 'flowbite:eye-solid',
+        icon: 'lucide:eye',
         // UI wrapper for the built-in action button
         //diff-add
         customComponent: {
@@ -386,7 +386,7 @@ Backend handler: read the payload via `extra`.
     actions: [
       {
         name: 'Toggle listed',
-        icon: 'flowbite:eye-solid',
+        icon: 'lucide:eye',
         showIn: { list: false, listThreeDotsMenu: false, showButton: true, showThreeDotsMenu: true },
         // The payload from emit('callAction', { asListed: true|false }) arrives here as `extra`
         customComponent: {
@@ -417,7 +417,7 @@ actions: [
   //diff-add
   id: 'testToggle listedAction',
   name: 'Toggle listed',
-  icon: 'flowbite:eye-solid',
+  icon: 'lucide:eye',
   ...  
   }
 ]

documentation/docs/tutorial/03-Customization/10-menuConfiguration.md

@@ -11,7 +11,7 @@ Adminforth uses [Iconify](https://iconify.design/) icons everywhere, including t
 
 You can set an icon for each menu item using the `icon` field.
 
-You can use any icon from the [Iconify Gallery](https://icon-sets.iconify.design/) in the format `<setname>:<icon>`. For example, `flowbite:brain-solid`.
+You can use any icon from the [Iconify Gallery](https://icon-sets.iconify.design/) in the format `<setname>:<icon>`. For example, `lucide:brain`. AdminForth itself uses [Lucide](https://icon-sets.iconify.design/lucide/) icons, so they match the rest of the admin panel.
 
 ![Icons for AdminForth](image-14.png)
 
@@ -30,24 +30,24 @@ E.g. create group "Blog" with Items who link to resource "posts" and "categories
     menu: [
       {
         label: 'Blog',
-        icon: 'flowbite:brain-solid',
+        icon: 'lucide:brain',
         open: true,
         children: [
           {
             label: 'Posts',
-            icon: 'flowbite:book-open-outline',
+            icon: 'lucide:book-open',
             resourceId: 'posts',
           },
           {
             label: 'Categories',
-            icon: 'flowbite:folder-duplicate-outline',
+            icon: 'lucide:folders',
             resourceId: 'categories',
           },
         ],
       },
       {
         label: 'Users',
-        icon: 'flowbite:folder-duplicate-outline',
+        icon: 'lucide:folders',
         resourceId: 'adminuser',
       },
     ],
@@ -72,7 +72,7 @@ async modifyResourceConfig(adminforth, resourceConfig) {
       itemId: 'dashboard',
       type: 'page',
       label: 'Dashboard',
-      icon: 'flowbite:chart-pie-solid',
+      icon: 'lucide:chart-pie',
       path: '/dashboard',
       component: this.componentPath('Dashboard.vue'),
     },
@@ -143,7 +143,7 @@ async modifyResourceConfig(adminforth, resourceConfig) {
           itemId: 'dashboardsMenu',
           type: 'group',
           label: 'Dashboards',
-          icon: 'flowbite:chart-pie-solid',
+          icon: 'lucide:chart-pie',
           children: dashboards.map((dashboard) => ({
             itemId: `dashboard-${dashboard.id}`,
             type: 'page',
@@ -155,7 +155,7 @@ async modifyResourceConfig(adminforth, resourceConfig) {
       },
     ];
   }, {
-    icons: ['flowbite:chart-pie-solid'],
+    icons: ['lucide:chart-pie'],
   });
 }
 ```
@@ -198,7 +198,7 @@ To do it use `visible` field in the menu item configuration:
   menu: [
     {
       label: 'Categories',
-      icon: 'flowbite:folder-duplicate-outline',
+      icon: 'lucide:folders',
       resourceId: 'categories',
 //diff-add
       visible: adminUser => adminUser.dbUser.role === 'admin'
@@ -222,7 +222,7 @@ You can put one or several gaps between menu items:
   menu: [
     {
       label: 'Posts',
-      icon: 'flowbite:book-open-outline',
+      icon: 'lucide:book-open',
       resourceId: 'posts',
     },
     {
@@ -233,7 +233,7 @@ You can put one or several gaps between menu items:
     },
     {
       label: 'Categories',
-      icon: 'flowbite:folder-duplicate-outline',
+      icon: 'lucide:folders',
       resourceId: 'categories',
     },
   ],
@@ -251,15 +251,15 @@ To split menu items with a line you can use a divider:
   menu: [
     {
       label: 'Posts',
-      icon: 'flowbite:book-open-outline',
+      icon: 'lucide:book-open',
       resourceId: 'posts',
     },
     {
       type: 'divider',
     },
     {
       label: 'Categories',
-      icon: 'flowbite:folder-duplicate-outline',
+      icon: 'lucide:folders',
       resourceId: 'categories',
     },
   ]
@@ -283,12 +283,12 @@ You can add a heading to the menu:
     },
     {
       label: 'Posts',
-      icon: 'flowbite:book-open-outline',
+      icon: 'lucide:book-open',
       resourceId: 'posts',
     },
     {
       label: 'Categories',
-      icon: 'flowbite:folder-duplicate-outline',
+      icon: 'lucide:folders',
       resourceId: 'categories',
     },
   ],
@@ -308,7 +308,7 @@ You can add a badge near the menu item title (e.g. to get count of unread messag
   menu: [
     {
       label: 'Posts',
-      icon: 'flowbite:book-open-outline',
+      icon: 'lucide:book-open',
       resourceId: 'posts',
       badge: async (adminUser: AdminUser) => {
         return 10
@@ -336,7 +336,7 @@ Most times you need to refresh the badge from some backend API or hook. To do th
   menu: [
     {
       label: 'Posts',
-      icon: 'flowbite:book-open-outline',
+      icon: 'lucide:book-open',
       resourceId: 'posts',
 //diff-add
       itemId: 'postsMenuItem',
@@ -422,7 +422,7 @@ You can use the url property to override default navigation. This is useful for
 menu: [
     {
       label: 'Posts',
-      icon: 'flowbite:book-open-outline',
+      icon: 'lucide:book-open',
       resourceId: 'posts',
       //diff-add
       url: '/resource/aparts?filter__country__in=["DE"]',  
@@ -450,7 +450,7 @@ async modifyResourceConfig(adminforth, resourceConfig) {
       itemId: 'dashboard',
       type: 'page',
       label: 'Dashboard',
-      icon: 'flowbite:chart-pie-solid',
+      icon: 'lucide:chart-pie',
       path: '/dashboard',
       component: this.componentPath('Dashboard.vue'),
     },
@@ -521,7 +521,7 @@ async modifyResourceConfig(adminforth, resourceConfig) {
           itemId: 'dashboardsMenu',
           type: 'group',
           label: 'Dashboards',
-          icon: 'flowbite:chart-pie-solid',
+          icon: 'lucide:chart-pie',
           children: dashboards.map((dashboard) => ({
             itemId: `dashboard-${dashboard.id}`,
             type: 'page',
@@ -533,7 +533,7 @@ async modifyResourceConfig(adminforth, resourceConfig) {
       },
     ];
   }, {
-    icons: ['flowbite:chart-pie-solid'],
+    icons: ['lucide:chart-pie'],
   });
 }
 ```

documentation/docs/tutorial/03-Customization/16-websocket.md

@@ -57,7 +57,7 @@ Create a component `PropertyCost.vue`:
         <template #tooltip>
           <div class="text-sm">Your total property cost</div>
         </template>
-        <IconDollarOutline class="text-2xl opacity-50" />
+        <IconDollarSign class="text-2xl opacity-50" />
         <div class="text-2xl text-gray-900 dark:text-white"> {{totalCost}}</div>
       </Tooltip>
   </div>
@@ -67,7 +67,7 @@ Create a component `PropertyCost.vue`:
 import { onMounted, onUnmounted, Ref } from 'vue';
 import { ref } from 'vue';
 import websocket from '@/websocket';
-import { IconDollarOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconDollarSign } from '@iconify-prerendered/vue-lucide';
 import { Tooltip } from '@/afcl';
 
 import type { AdminUser } from '@/types/Common';

documentation/docs/tutorial/09-Plugins/02-TwoFactorsAuth.md

@@ -328,7 +328,7 @@ options: {
   actions: [
     {
       name: 'Auto submit',
-      icon: 'flowbite:play-solid',
+      icon: 'lucide:play',
       allowed: () => true,
       action: async ({ recordId, adminUser, adminforth, response, extra }) => {
         //diff-add