From a653f7de70f3c406fc0741e84d2d8b93d2245eee Mon Sep 17 00:00:00 2001
From: Arthur Monney <monneylobe@gmail.com>
Date: Tue, 25 Jul 2023 07:20:52 +0200
Subject: [PATCH] Add icon attribute (#215)

* Update github sponsor link

* Add icon to attribute

* fix code formatting

* Remove debugger

* :recycle: Apply Refactoring

---------

Co-authored-by: mckenziearts <mckenziearts@users.noreply.github.com>
---
 .github/FUNDING.yml                           |  3 +-
 packages/admin/config/admin.php               | 21 +++++
 packages/admin/config/components.php          | 10 ---
 packages/admin/public/css/shopper.css         | 73 +++++++++++++++---
 packages/admin/public/mix-manifest.json       |  2 +-
 packages/admin/resources/lang/en/layout.php   | 10 +++
 packages/admin/resources/lang/fr/layout.php   | 10 +++
 .../views/components/dropdown.blade.php       |  2 +-
 .../views/components/forms/input.blade.php    |  2 +-
 .../views/components/icons/contrast.blade.php |  4 +
 .../components/attributes/_form.blade.php     | 19 +++--
 .../components/attributes/values.blade.php    | 12 ++-
 .../components/forms/icon-picker.blade.php    | 73 ++++++++++++++++++
 .../{ => components}/forms/trix.blade.php     |  0
 .../forms/uploads/multiple.blade.php          |  4 +-
 .../forms/uploads/single.blade.php            |  0
 .../Livewire/Components/Attributes/Create.php |  2 +
 .../Livewire/Components/Attributes/Edit.php   |  3 +
 .../Components/Attributes/UseForm.php         |  8 ++
 .../Livewire/Components/Forms/IconPicker.php  | 77 +++++++++++++++++++
 .../Http/Livewire/Components/Forms/Trix.php   |  4 +-
 .../Components/Forms/Uploads/Multiple.php     |  4 +-
 .../Components/Forms/Uploads/Single.php       |  4 +-
 packages/admin/src/ShopperServiceProvider.php |  9 ++-
 packages/admin/src/Traits/CanBeCacheable.php  | 70 +++++++++++++++++
 .../src/Traits/HasCollectionPaginate.php      | 27 +++++++
 packages/admin/tailwind.config.js             | 10 +++
 .../2023_07_25_044432_add_icon_column.php     | 24 ++++++
 packages/core/src/Models/Attribute.php        | 18 +++--
 29 files changed, 448 insertions(+), 57 deletions(-)
 create mode 100644 packages/admin/resources/views/components/icons/contrast.blade.php
 create mode 100644 packages/admin/resources/views/livewire/components/forms/icon-picker.blade.php
 rename packages/admin/resources/views/livewire/{ => components}/forms/trix.blade.php (100%)
 rename packages/admin/resources/views/livewire/{ => components}/forms/uploads/multiple.blade.php (92%)
 rename packages/admin/resources/views/livewire/{ => components}/forms/uploads/single.blade.php (100%)
 create mode 100644 packages/admin/src/Http/Livewire/Components/Forms/IconPicker.php
 create mode 100644 packages/admin/src/Traits/CanBeCacheable.php
 create mode 100644 packages/admin/src/Traits/HasCollectionPaginate.php
 create mode 100644 packages/core/database/migrations/2023_07_25_044432_add_icon_column.php

diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
index 2216b7366..baa2db7e2 100644
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -1,3 +1,2 @@
 # These are supported funding model platforms
-
-open_collective: shopperlabs
+github: mckenziearts
diff --git a/packages/admin/config/admin.php b/packages/admin/config/admin.php
index eb6118d27..db920653c 100644
--- a/packages/admin/config/admin.php
+++ b/packages/admin/config/admin.php
@@ -86,4 +86,25 @@
 
     ],
 
+    /*
+    |--------------------------------------------------------------------------
+    | Caching
+    |--------------------------------------------------------------------------
+    |
+    | This section lets you configure the caching option of the icon picker component.
+    |
+    | Since icon packs are often packed with a lots of icons,
+    | searching through all of them can take quite a lot of time, which is
+    | why the plugin caches each field with it's configuration and search queries.
+    |
+    | This section let's you configure how caching should be done or disable it
+    | if you wish.
+    |
+    */
+
+    'icon-picker' => [
+        'cache' => true,
+        'duration' => '7 days',
+    ],
+
 ];
diff --git a/packages/admin/config/components.php b/packages/admin/config/components.php
index 8a90f1453..68f23f3b9 100644
--- a/packages/admin/config/components.php
+++ b/packages/admin/config/components.php
@@ -87,16 +87,6 @@
 
     'search' => Components\Search::class,
 
-    /*
-    |--------------------------------------------------------------------------
-    | Forms Livewire Components
-    |--------------------------------------------------------------------------
-    */
-
-    'forms.trix' => Components\Forms\Trix::class,
-    'forms.uploads.multiple' => Components\Forms\Uploads\Multiple::class,
-    'forms.uploads.single' => Components\Forms\Uploads\Single::class,
-
     /*
     |--------------------------------------------------------------------------
     | Modals Livewire Components
diff --git a/packages/admin/public/css/shopper.css b/packages/admin/public/css/shopper.css
index 8989254f4..f31f156d6 100644
--- a/packages/admin/public/css/shopper.css
+++ b/packages/admin/public/css/shopper.css
@@ -4375,9 +4375,6 @@ html {
 .mr-2{
   margin-right: 0.5rem;
 }
-.mr-2\.5{
-  margin-right: 0.625rem;
-}
 .mr-3{
   margin-right: 0.75rem;
 }
@@ -4743,6 +4740,9 @@ html {
 .shrink-0{
   flex-shrink: 0;
 }
+.flex-grow{
+  flex-grow: 1;
+}
 .grow{
   flex-grow: 1;
 }
@@ -4839,6 +4839,23 @@ html {
 .transform-gpu{
   transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+@keyframes progress{
+
+  0%{
+    background-position: -150% 0,-150% 0;
+  }
+
+  66%{
+    background-position: 250% 0,-150% 0;
+  }
+
+  100%{
+    background-position: 250% 0, 250% 0;
+  }
+}
+.animate-progress{
+  animation: progress 2s ease-in-out infinite;
+}
 @keyframes pulse{
 
   50%{
@@ -5061,6 +5078,10 @@ html {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
 }
+.gap-x-1\.5{
+  -moz-column-gap: 0.375rem;
+       column-gap: 0.375rem;
+}
 .gap-x-2{
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
@@ -5079,6 +5100,9 @@ html {
 .gap-y-2{
   row-gap: 0.5rem;
 }
+.gap-y-4{
+  row-gap: 1rem;
+}
 .gap-y-5{
   row-gap: 1.25rem;
 }
@@ -5280,6 +5304,10 @@ html {
   border-bottom-right-radius: 0.75rem;
   border-bottom-left-radius: 0.75rem;
 }
+.rounded-l-lg{
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
 .rounded-l-md{
   border-top-left-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
@@ -5288,6 +5316,10 @@ html {
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
 }
+.rounded-r-lg{
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
 .rounded-r-md{
   border-top-right-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
@@ -5308,14 +5340,6 @@ html {
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
 }
-.rounded-l-lg{
-  border-top-left-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
-}
-.rounded-r-lg{
-  border-top-right-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
-}
 .rounded-bl{
   border-bottom-left-radius: 0.25rem;
 }
@@ -5870,6 +5894,9 @@ html {
 .bg-secondary-50\/50{
   background-color: rgb(248 250 252 / 0.5);
 }
+.bg-secondary-50\/70{
+  background-color: rgb(248 250 252 / 0.7);
+}
 .bg-secondary-500{
   --tw-bg-opacity: 1;
   background-color: rgb(100 116 139 / var(--tw-bg-opacity));
@@ -6053,6 +6080,11 @@ html {
   --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.from-primary-500{
+  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .to-primary-100{
   --tw-gradient-to: #dbeafe var(--tw-gradient-to-position);
 }
@@ -6068,6 +6100,9 @@ html {
 .bg-center{
   background-position: center;
 }
+.bg-no-repeat{
+  background-repeat: no-repeat;
+}
 .fill-secondary-50{
   fill: #f8fafc;
 }
@@ -7138,6 +7173,9 @@ html {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(71 85 105 / var(--tw-ring-opacity));
 }
+.ring-secondary-900\/10{
+  --tw-ring-color: rgb(15 23 42 / 0.1);
+}
 .ring-sky-500{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(14 165 233 / var(--tw-ring-opacity));
@@ -9245,6 +9283,10 @@ html {
   background-color: rgb(51 65 85 / 0.6);
 }
 
+:is(.dark .dark\:bg-secondary-700\/70){
+  background-color: rgb(51 65 85 / 0.7);
+}
+
 :is(.dark .dark\:bg-secondary-800){
   --tw-bg-opacity: 1;
   background-color: rgb(30 41 59 / var(--tw-bg-opacity));
@@ -9560,6 +9602,10 @@ html {
   --tw-ring-color: rgb(180 83 9 / var(--tw-ring-opacity));
 }
 
+:is(.dark .dark\:ring-black\/10){
+  --tw-ring-color: rgb(0 0 0 / 0.1);
+}
+
 :is(.dark .dark\:ring-blue-700){
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(29 78 216 / var(--tw-ring-opacity));
@@ -9684,6 +9730,11 @@ html {
   --tw-ring-color: rgb(30 41 59 / var(--tw-ring-opacity));
 }
 
+:is(.dark .dark\:ring-secondary-900){
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(15 23 42 / var(--tw-ring-opacity));
+}
+
 :is(.dark .dark\:ring-sky-700){
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(3 105 161 / var(--tw-ring-opacity));
diff --git a/packages/admin/public/mix-manifest.json b/packages/admin/public/mix-manifest.json
index edd2ee91c..6bc183cda 100644
--- a/packages/admin/public/mix-manifest.json
+++ b/packages/admin/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
     "/js/shopper.js": "/js/shopper.js?id=d1ea52e06df0561b2c642b3e813e53a0",
-    "/css/shopper.css": "/css/shopper.css?id=337058200bc2544cbf2d40ac751a7745"
+    "/css/shopper.css": "/css/shopper.css?id=986bc9f401859a6e7f00c9ef3df0579b"
 }
diff --git a/packages/admin/resources/lang/en/layout.php b/packages/admin/resources/lang/en/layout.php
index c3b252fe3..f68cb7920 100644
--- a/packages/admin/resources/lang/en/layout.php
+++ b/packages/admin/resources/lang/en/layout.php
@@ -121,6 +121,14 @@
             'ga_json' => 'Json Account Credentials',
             'gtag' => 'Your Google Tag Manager account ID',
             'pixel_id' => 'Your Facebook Pixel account ID',
+            'icon' => 'Icon',
+            'text_field' => 'Text field :type',
+            'richtext' => 'Rich text',
+            'select' => 'Select',
+            'checkbox' => 'Checkbox',
+            'radio' => 'Radio',
+            'colorpicker' => 'Color picker',
+            'datepicker' => 'Date picker',
         ],
 
         'placeholder' => [
@@ -136,6 +144,8 @@
             'search_by' => 'Search by :label',
             'leave_comment' => 'Leave notes for this customer',
             'search_payment' => 'Search payment by provider name',
+            'icon_placeholder' => 'Search for an icon',
+            'no_icon' => 'No icon selected',
         ],
 
         'actions' => [
diff --git a/packages/admin/resources/lang/fr/layout.php b/packages/admin/resources/lang/fr/layout.php
index 9aa69fdb6..b22e06d99 100644
--- a/packages/admin/resources/lang/fr/layout.php
+++ b/packages/admin/resources/lang/fr/layout.php
@@ -121,6 +121,14 @@
             'ga_json' => 'Références du compte en Json',
             'gtag' => 'ID de compte Google Tag Manager',
             'pixel_id' => 'ID du compte Facebook Pixel',
+            'icon' => 'Icône',
+            'text_field' => 'Champ de texte :type',
+            'richtext' => 'Rich Text',
+            'select' => 'Select',
+            'checkbox' => 'Checkbox',
+            'radio' => 'Radio',
+            'colorpicker' => 'Choix de couleurs',
+            'datepicker' => 'Date',
         ],
 
         'placeholder' => [
@@ -136,6 +144,8 @@
             'search_by' => 'Rechercher par :label',
             'leave_comment' => 'Laisser des notes pour ce client',
             'search_payment' => 'Recherche de paiement par nom de fournisseur',
+            'icon_placeholder' => 'Rechercher une icône',
+            'no_icon' => 'Pas d\'icône sélectionnée',
         ],
 
         'actions' => [
diff --git a/packages/admin/resources/views/components/dropdown.blade.php b/packages/admin/resources/views/components/dropdown.blade.php
index da45072aa..e57e4404a 100644
--- a/packages/admin/resources/views/components/dropdown.blade.php
+++ b/packages/admin/resources/views/components/dropdown.blade.php
@@ -42,7 +42,7 @@
          x-transition:leave="transition ease-in duration-75"
             x-transition:leave-start="transform opacity-100 scale-100"
             x-transition:leave-end="transform opacity-0 scale-95"
-         class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}"
+         class="absolute z-50 mt-2 {{ $width }} rounded-lg shadow-lg {{ $alignmentClasses }}"
          style="display: none;"
          role="menu"
          @click="open = false">
diff --git a/packages/admin/resources/views/components/forms/input.blade.php b/packages/admin/resources/views/components/forms/input.blade.php
index 22f097f3f..cc490e87f 100644
--- a/packages/admin/resources/views/components/forms/input.blade.php
+++ b/packages/admin/resources/views/components/forms/input.blade.php
@@ -1 +1 @@
-<input {!! $attributes->merge(['class' => 'block w-full dark:bg-secondary-700 dark:text-white placeholder-secondary-500 dark:placeholder-secondary-400 rounded-md shadow-sm border-secondary-300 dark:border-secondary-700 focus:ring-primary-500 focus:border-primary-500 sm:text-sm']) !!} />
+<input {{ $attributes->merge(['class' => 'block w-full dark:bg-secondary-700 text-secondary-900 dark:text-white placeholder-secondary-500 dark:placeholder-secondary-400 rounded-md shadow-sm border-secondary-300 dark:border-secondary-700 focus:ring-primary-500 focus:border-primary-500 sm:text-sm']) }} />
diff --git a/packages/admin/resources/views/components/icons/contrast.blade.php b/packages/admin/resources/views/components/icons/contrast.blade.php
new file mode 100644
index 000000000..9baf58666
--- /dev/null
+++ b/packages/admin/resources/views/components/icons/contrast.blade.php
@@ -0,0 +1,4 @@
+<svg {{ $attributes }} fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 5.09V18.92A6.92 6.92 0 0 0 18.919 12c0-3.816-3.103-6.91-6.919-6.91Z" />
+    <path d="M12 .938C5.888.938.937 5.888.937 12c0 6.113 4.95 11.063 11.063 11.063S23.063 18.113 23.063 12C23.063 5.888 18.113.937 12 .937Zm0 19.359A8.294 8.294 0 0 1 3.703 12 8.294 8.294 0 0 1 12 3.703 8.294 8.294 0 0 1 20.297 12 8.294 8.294 0 0 1 12 20.297Z" />
+</svg>
diff --git a/packages/admin/resources/views/livewire/components/attributes/_form.blade.php b/packages/admin/resources/views/livewire/components/attributes/_form.blade.php
index dc8716738..7f5376ddc 100644
--- a/packages/admin/resources/views/livewire/components/attributes/_form.blade.php
+++ b/packages/admin/resources/views/livewire/components/attributes/_form.blade.php
@@ -2,10 +2,10 @@
     <div class="sm:col-span-4">
         <x-shopper::card class="p-4 sm:p-5 grid gap-4 sm:grid-cols-2 sm:gap-6">
             <x-shopper::forms.group :label="__('shopper::layout.forms.label.name')" for="name" class="sm:col-span-1" :error="$errors->first('name')" isRequired>
-                <x-shopper::forms.input wire:model="name" id="name" type="text" autocomplete="off" />
+                <x-shopper::forms.input wire:model.lazy="name" id="name" type="text" autocomplete="off" />
             </x-shopper::forms.group>
             <x-shopper::forms.group for="type" :label="__('shopper::layout.forms.label.type')" class="sm:col-span-1">
-                <x-shopper::forms.select wire:model="type" id="type">
+                <x-shopper::forms.select wire:model.defer="type" id="type">
                     @foreach($fields as $key => $field)
                         <option value="{{ $key }}">{{ $field }}</option>
                     @endforeach
@@ -25,7 +25,7 @@
             <div class="sm:col-span-2 flex items-center space-x-4">
                 <div class="relative flex items-start">
                     <div class="flex items-center h-5">
-                        <x-shopper::forms.checkbox wire:model="isSearchable" id="is_searchable" />
+                        <x-shopper::forms.checkbox wire:model.defer="isSearchable" id="is_searchable" />
                     </div>
                     <div class="ml-3 text-sm leading-5">
                         <x-shopper::label for="is_searchable" :value="__('shopper::layout.forms.label.is_searchable')" />
@@ -36,7 +36,7 @@
                 </div>
                 <div class="relative flex items-start">
                     <div class="flex items-center h-5">
-                        <x-shopper::forms.checkbox wire:model="isFilterable" id="is_filterable" />
+                        <x-shopper::forms.checkbox wire:model.defer="isFilterable" id="is_filterable" />
                     </div>
                     <div class="ml-3 text-sm leading-5">
                         <x-shopper::label for="is_filterable" :value="__('shopper::layout.forms.label.is_filterable')" />
@@ -50,10 +50,13 @@
     </div>
     <div class="sm:col-span-2">
         <aside class="sticky top-6 space-y-5">
-            <x-shopper::card class="overflow-hidden divide-y divide-secondary-200 dark:divide-secondary-700">
-                <x-shopper::forms.group :label="__('shopper::layout.forms.label.slug')" for="slug" class="p-4 sm:p-5" :error="$errors->first('slug')" isRequired>
-                    <x-shopper::forms.input wire:model="slug" id="slug" type="text" autocomplete="off" />
-                </x-shopper::forms.group>
+            <x-shopper::card class="divide-y divide-secondary-200 dark:divide-secondary-700">
+                <div class="p-4 sm:p-5 space-y-5">
+                    <x-shopper::forms.group :label="__('shopper::layout.forms.label.slug')" for="slug" :error="$errors->first('slug')" isRequired>
+                        <x-shopper::forms.input wire:model.defer="slug" id="slug" type="text" autocomplete="off" />
+                    </x-shopper::forms.group>
+                    <livewire:shopper-forms.icon-picker :value="$icon" />
+                </div>
                 <div class="p-4 sm:p-5">
                     <div class="relative flex items-start">
                         <div class="flex items-center h-5">
diff --git a/packages/admin/resources/views/livewire/components/attributes/values.blade.php b/packages/admin/resources/views/livewire/components/attributes/values.blade.php
index 885507e7c..e2aef051a 100644
--- a/packages/admin/resources/views/livewire/components/attributes/values.blade.php
+++ b/packages/admin/resources/views/livewire/components/attributes/values.blade.php
@@ -58,9 +58,13 @@
                                         </td>
                                         <td class="px-6 py-4 flex items-center space-x-3 whitespace-no-wrap text-sm leading-5 text-secondary-500 dark:text-secondary-400">
                                             @if($v->attribute->type === 'colorpicker')
-                                                <div class="shrink-0 w-2.5 h-2.5 rounded-full" style="background-color: {{ $v->key }}" aria-hidden="true"></div>
+                                                <span class="inline-flex items-center gap-x-2 rounded-full px-2 py-1 text-xs font-medium text-secondary-700 ring-1 ring-inset ring-secondary-200 dark:text-secondary-300 dark:ring-secondary-700">
+                                                    <x-shopper::icons.contrast class="h-5 w-5" style="color: {{ $v->key }}" />
+                                                    <kb>{{ $v->key }}</kb>
+                                                </span>
+                                            @else
+                                                <span>{{ $v->key }}</span>
                                             @endif
-                                            <span>{{ $v->key }}</span>
                                         </td>
                                         <td class="px-6 py-4 whitespace-no-wrap text-right text-sm leading-5 font-medium">
                                             <div class="flex-1 flex justify-end items-center space-x-4">
@@ -86,8 +90,8 @@ class="text-secondary-500 hover:text-secondary-600 dark:text-secondary-400 dark:
                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                                                 </svg>
                                                 <span class="text-xl font-medium text-secondary-500 dark:text-secondary-400">
-                                                            {{ __('shopper::words.no_values') }}
-                                                        </span>
+                                                    {{ __('shopper::words.no_values') }}
+                                                </span>
                                             </div>
                                         </td>
                                     </tr>
diff --git a/packages/admin/resources/views/livewire/components/forms/icon-picker.blade.php b/packages/admin/resources/views/livewire/components/forms/icon-picker.blade.php
new file mode 100644
index 000000000..67d16ca4c
--- /dev/null
+++ b/packages/admin/resources/views/livewire/components/forms/icon-picker.blade.php
@@ -0,0 +1,73 @@
+<div x-data="{ show: false }" @click.outside="show = false" class="relative">
+    <x-shopper::label for="icon" :value="__('shopper::layout.forms.label.icon')" />
+    <div class="mt-2 flex rounded-md shadow-sm">
+        <div class="relative flex flex-grow items-stretch focus-within:z-10">
+            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                @if($value)
+                    <x-dynamic-component :component="$value" class="h-5 w-5 text-secondary-500 dark:text-secondary-400" />
+                @else
+                    <x-untitledui-face-frown class="h-5 w-5 text-secondary-400 dark:text-secondary-500" />
+                @endif
+            </div>
+            <x-shopper::forms.input
+                type="text"
+                name="icon"
+                id="icon"
+                wire:model="value"
+                class="rounded-none rounded-l-md pl-10"
+                :placeholder="__('shopper::layout.forms.placeholder.no_icon')"
+                readonly
+            />
+        </div>
+        <button @click="show = !show" type="button" class="relative -ml-px inline-flex items-center gap-x-1.5 rounded-r-md px-3 py-2 text-sm ring-1 ring-inset ring-secondary-300 hover:bg-secondary-50 dark:ring-secondary-700 dark:hover:bg-secondary-800">
+            <x-untitledui-chevron-selector-vertical class="h-5 w-5 text-secondary-400 dark:text-secondary-500" />
+        </button>
+    </div>
+    <div x-show="show" x-cloak
+         x-transition:enter="transition ease-out duration-200"
+         x-transition:enter-start="transform opacity-0 scale-95"
+         x-transition:enter-end="transform opacity-100 scale-100"
+         x-transition:leave="transition ease-in duration-75"
+         x-transition:leave-start="transform opacity-100 scale-100"
+         x-transition:leave-end="transform opacity-0 scale-95"
+         class="absolute right-0 z-10 mt-2 w-full max-w-sm overflow-hidden origin-top-right rounded-lg bg-white dark:bg-secondary-800 shadow-lg ring-1 ring-black dark:ring-secondary-900 ring-opacity-5 focus:outline-none"
+         role="menu"
+    >
+        <div>
+            <div class="relative">
+                <div class="flex items-center px-4 py-3 bg-secondary-50/70 dark:bg-secondary-700/70 backdrop-blur-sm ring-1 ring-secondary-900/10 dark:ring-black/10">
+                    <x-shopper::forms.input
+                        type="search"
+                        wire:model.debounce.550ms="search"
+                        class="dark:bg-secondary-800"
+                        :placeholder="__('shopper::layout.forms.placeholder.icon_placeholder')"
+                    />
+                </div>
+                <div wire:loading class="absolute inset-x-0 bottom-0 h-1 w-full bg-no-repeat bg-gradient-to-r from-primary-500 to-primary-600 animate-progress rounded-full" style="background-size: 60% 100%;"></div>
+            </div>
+            <div class="max-h-64 overflow-hidden overflow-y-scroll scrolling py-4 px-3 space-y-5">
+                <div class="grid grid-cols-6 gap-x-3 gap-y-4">
+                    @foreach($icons as $icon)
+                        <button
+                            type="button"
+                            title="{{ $icon }}"
+                            wire:click="selectedIcon('{{ $icon }}')"
+                            @class([
+                                'inline-flex items-center justify-center text-sm leading-5 p-2 rounded-lg',
+                                'text-secondary-500 dark:text-secondary-400 hover:bg-secondary-50 hover:text-secondary-700 dark:hover:text-white dark:hover:bg-secondary-700' => $value !== $icon,
+                                'bg-primary-500 text-white' => $value === $icon,
+                            ])
+                        >
+                            <x-dynamic-component :component="$icon" class="w-5 h-5" />
+                        </button>
+                    @endforeach
+                </div>
+                @if($icons->hasMorePages())
+                    <button wire:click.prevent="loadMore" class="inline-flex items-center justify-center w-full text-sm leading-5 text-secondary-500 dark:text-secondary-500">
+                        {{ __('Load more') }}
+                    </button>
+                @endif
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/packages/admin/resources/views/livewire/forms/trix.blade.php b/packages/admin/resources/views/livewire/components/forms/trix.blade.php
similarity index 100%
rename from packages/admin/resources/views/livewire/forms/trix.blade.php
rename to packages/admin/resources/views/livewire/components/forms/trix.blade.php
diff --git a/packages/admin/resources/views/livewire/forms/uploads/multiple.blade.php b/packages/admin/resources/views/livewire/components/forms/uploads/multiple.blade.php
similarity index 92%
rename from packages/admin/resources/views/livewire/forms/uploads/multiple.blade.php
rename to packages/admin/resources/views/livewire/components/forms/uploads/multiple.blade.php
index c2fe130fd..2767c7e45 100644
--- a/packages/admin/resources/views/livewire/forms/uploads/multiple.blade.php
+++ b/packages/admin/resources/views/livewire/components/forms/uploads/multiple.blade.php
@@ -52,9 +52,7 @@ class="absolute inset-0 z-50 w-full h-full outline-none opacity-0 cursor-pointer
                     <img class="h-full w-full object-cover" src="{{ $file->temporaryUrl() }}" alt="" />
                     <div class="absolute h-full w-full flex items-center justify-center opacity-0 hover:opacity-100 focus-within:opacity-100 inset-0 bg-secondary-800 bg-opacity-75 transition duration-150 ease-in-out">
                         <button wire:click="removeUpload('files', '{{ $file->getFilename() }}')" type="button" class="inline-flex p-2 border-2 border-transparent text-white rounded-full hover:text-secondary-100 focus:outline-none focus:text-secondary-100 focus:bg-secondary-600 transition duration-150 ease-in-out">
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                            </svg>
+                            <x-untitledui-trash-03 class="w-5 h-5" />
                         </button>
                     </div>
                 </li>
diff --git a/packages/admin/resources/views/livewire/forms/uploads/single.blade.php b/packages/admin/resources/views/livewire/components/forms/uploads/single.blade.php
similarity index 100%
rename from packages/admin/resources/views/livewire/forms/uploads/single.blade.php
rename to packages/admin/resources/views/livewire/components/forms/uploads/single.blade.php
diff --git a/packages/admin/src/Http/Livewire/Components/Attributes/Create.php b/packages/admin/src/Http/Livewire/Components/Attributes/Create.php
index b84dbe177..34bd0e686 100644
--- a/packages/admin/src/Http/Livewire/Components/Attributes/Create.php
+++ b/packages/admin/src/Http/Livewire/Components/Attributes/Create.php
@@ -15,6 +15,8 @@ class Create extends AbstractBaseComponent implements HasForm
 
     public string $model = Attribute::class;
 
+    protected $listeners = ['selectedIcon'];
+
     public function store(): void
     {
         $attribute = $this->save($this->model);
diff --git a/packages/admin/src/Http/Livewire/Components/Attributes/Edit.php b/packages/admin/src/Http/Livewire/Components/Attributes/Edit.php
index 342ceac65..ae123226c 100644
--- a/packages/admin/src/Http/Livewire/Components/Attributes/Edit.php
+++ b/packages/admin/src/Http/Livewire/Components/Attributes/Edit.php
@@ -16,6 +16,8 @@ class Edit extends AbstractBaseComponent implements HasForm
 
     public Attribute $attribute;
 
+    protected $listeners = ['selectedIcon'];
+
     public function mount(Attribute $attribute): void
     {
         $this->attribute = $attribute;
@@ -23,6 +25,7 @@ public function mount(Attribute $attribute): void
         $this->name = $attribute->name;
         $this->slug = $attribute->slug;
         $this->type = $attribute->type;
+        $this->icon = $attribute->icon;
         $this->description = $attribute->description;
         $this->isEnabled = $attribute->is_enabled;
         $this->isSearchable = $attribute->is_searchable;
diff --git a/packages/admin/src/Http/Livewire/Components/Attributes/UseForm.php b/packages/admin/src/Http/Livewire/Components/Attributes/UseForm.php
index 0fef91882..f70eb45d4 100644
--- a/packages/admin/src/Http/Livewire/Components/Attributes/UseForm.php
+++ b/packages/admin/src/Http/Livewire/Components/Attributes/UseForm.php
@@ -17,6 +17,8 @@ trait UseForm
 
     public string $type = 'text';
 
+    public ?string $icon = null;
+
     public ?string $description = null;
 
     public bool $isEnabled = false;
@@ -43,6 +45,11 @@ public function updatedName(string $value): void
         $this->slug = str_slug($value);
     }
 
+    public function selectedIcon(string $icon): void
+    {
+        $this->icon = $icon;
+    }
+
     public function save(Model|string $model): mixed
     {
         $this->validate($this->rules());
@@ -55,6 +62,7 @@ public function save(Model|string $model): mixed
             'is_enabled' => $this->isEnabled,
             'is_searchable' => $this->isSearchable,
             'is_filterable' => $this->isFilterable,
+            'icon' => $this->icon,
         ];
 
         return $this->attributeId ? $model->update($values) : $model::query()->create($values);
diff --git a/packages/admin/src/Http/Livewire/Components/Forms/IconPicker.php b/packages/admin/src/Http/Livewire/Components/Forms/IconPicker.php
new file mode 100644
index 000000000..f3a64d324
--- /dev/null
+++ b/packages/admin/src/Http/Livewire/Components/Forms/IconPicker.php
@@ -0,0 +1,77 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Shopper\Http\Livewire\Components\Forms;
+
+use BladeUI\Icons\Factory as IconFactory;
+use Illuminate\Contracts\View\View;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\App;
+use Illuminate\Support\Facades\File;
+use Livewire\Component;
+use Shopper\Traits\CanBeCacheable;
+use Shopper\Traits\HasCollectionPaginate;
+
+final class IconPicker extends Component
+{
+    use CanBeCacheable;
+    use HasCollectionPaginate;
+
+    public ?string $value = null;
+
+    public string $search = '';
+
+    public $perPage = 60;
+
+    public function mount(string $value = null): void
+    {
+        $this->value = $value;
+    }
+
+    public function loadMore(): void
+    {
+        $this->perPage += 30;
+    }
+
+    public function selectedIcon(string $icon): void
+    {
+        $this->value = $icon;
+        $this->emitUp('selectedIcon', $icon);
+    }
+
+    private function loadIcons(): Collection
+    {
+        $sets = $this->tryCache(
+            key: 'icon-picker.fields',
+            callback: function (): Collection {
+                $iconsFactory = App::make(IconFactory::class);
+
+                return collect($iconsFactory->all());
+            }
+        );
+
+        $icons = [];
+
+        foreach ($sets as $set) {
+            $prefix = $set['prefix'];
+
+            foreach ($set['paths'] as $path) {
+                foreach (File::files($path) as $file) {
+
+                    $filename = $prefix . '-' . $file->getFilenameWithoutExtension();
+                    $icons[] = $filename;
+                }
+            }
+        }
+
+        return collect($icons)->filter(fn (string $icon) => str_contains($icon, $this->search));
+    }
+
+    public function render(): View
+    {
+        return view('shopper::livewire.components.forms.icon-picker', [
+            'icons' => $this->paginate($this->loadIcons(), $this->perPage),
+        ]);
+    }
+}
diff --git a/packages/admin/src/Http/Livewire/Components/Forms/Trix.php b/packages/admin/src/Http/Livewire/Components/Forms/Trix.php
index 560388a38..b104ce77e 100644
--- a/packages/admin/src/Http/Livewire/Components/Forms/Trix.php
+++ b/packages/admin/src/Http/Livewire/Components/Forms/Trix.php
@@ -7,7 +7,7 @@
 use Illuminate\Contracts\View\View;
 use Livewire\Component;
 
-class Trix extends Component
+final class Trix extends Component
 {
     public string $trixId;
 
@@ -26,6 +26,6 @@ public function updatedValue(string $value): void
 
     public function render(): View
     {
-        return view('shopper::livewire.forms.trix');
+        return view('shopper::livewire.components.forms.trix');
     }
 }
diff --git a/packages/admin/src/Http/Livewire/Components/Forms/Uploads/Multiple.php b/packages/admin/src/Http/Livewire/Components/Forms/Uploads/Multiple.php
index f4ae7d91a..a2b8672e6 100644
--- a/packages/admin/src/Http/Livewire/Components/Forms/Uploads/Multiple.php
+++ b/packages/admin/src/Http/Livewire/Components/Forms/Uploads/Multiple.php
@@ -10,7 +10,7 @@
 use Livewire\WithFileUploads;
 use Spatie\MediaLibrary\MediaCollections\Models\Media;
 
-class Multiple extends Component
+final class Multiple extends Component
 {
     use WithFileUploads;
 
@@ -60,6 +60,6 @@ public function removeMedia(int $id): void
 
     public function render(): View
     {
-        return view('shopper::livewire.forms.uploads.multiple');
+        return view('shopper::livewire.components.forms.uploads.multiple');
     }
 }
diff --git a/packages/admin/src/Http/Livewire/Components/Forms/Uploads/Single.php b/packages/admin/src/Http/Livewire/Components/Forms/Uploads/Single.php
index b273f6cc1..84f7040a8 100644
--- a/packages/admin/src/Http/Livewire/Components/Forms/Uploads/Single.php
+++ b/packages/admin/src/Http/Livewire/Components/Forms/Uploads/Single.php
@@ -10,7 +10,7 @@
 use Livewire\WithFileUploads;
 use Spatie\MediaLibrary\MediaCollections\Models\Media;
 
-class Single extends Component
+final class Single extends Component
 {
     use WithFileUploads;
 
@@ -55,6 +55,6 @@ public function removeMedia(int $id): void
 
     public function render(): View
     {
-        return view('shopper::livewire.forms.uploads.single');
+        return view('shopper::livewire.components.forms.uploads.single');
     }
 }
diff --git a/packages/admin/src/ShopperServiceProvider.php b/packages/admin/src/ShopperServiceProvider.php
index 8b0b5d164..5f695f14d 100644
--- a/packages/admin/src/ShopperServiceProvider.php
+++ b/packages/admin/src/ShopperServiceProvider.php
@@ -16,6 +16,7 @@
 use Shopper\Contracts\TwoFactorLoginResponse as TwoFactorLoginResponseContract;
 use Shopper\Core\Shopper;
 use Shopper\Core\Traits\HasRegisterConfigAndMigrationFiles;
+use Shopper\Http\Livewire\Components;
 use Shopper\Http\Livewire\Pages;
 use Shopper\Http\Middleware\Authenticate;
 use Shopper\Http\Responses\FailedTwoFactorLoginResponse;
@@ -107,19 +108,23 @@ protected function bootLivewireComponents(): void
 
         foreach (array_merge(
             config('shopper.components', []),
-            $this->getLivewirePagesComponents()
+            $this->getLivewireComponents()
         ) as $alias => $component) {
             Livewire::component("shopper-$alias", $component);
         }
     }
 
-    protected function getLivewirePagesComponents(): array
+    protected function getLivewireComponents(): array
     {
         return [
             'auth.login' => Pages\Auth\Login::class,
             'auth.password' => Pages\Auth\ForgotPassword::class,
             'auth.password-reset' => Pages\Auth\ResetPassword::class,
             'initialize' => Pages\Initialization::class,
+            'forms.trix' => Components\Forms\Trix::class,
+            'forms.icon-picker' => Components\Forms\IconPicker::class,
+            'forms.uploads.multiple' => Components\Forms\Uploads\Multiple::class,
+            'forms.uploads.single' => Components\Forms\Uploads\Single::class,
         ];
     }
 
diff --git a/packages/admin/src/Traits/CanBeCacheable.php b/packages/admin/src/Traits/CanBeCacheable.php
new file mode 100644
index 000000000..0311d7889
--- /dev/null
+++ b/packages/admin/src/Traits/CanBeCacheable.php
@@ -0,0 +1,70 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Shopper\Traits;
+
+use Closure;
+use DateInterval;
+use DateTimeInterface;
+use Illuminate\Support\Facades\Cache;
+
+trait CanBeCacheable
+{
+    protected null|bool|Closure $cacheable = null;
+
+    protected null|int|DateInterval|DateTimeInterface|Closure $cacheDuration = null;
+
+    protected array $evaluationParametersToRemove = [];
+
+    public function cacheable(bool|Closure $cacheable = true): static
+    {
+        $this->cacheable = $cacheable;
+
+        return $this;
+    }
+
+    public function getCacheable(): bool
+    {
+        $cacheable = $this->cacheable ?? config('shopper.admin.icon-picker.cache', true);
+
+        return $this->evaluate($cacheable);
+    }
+
+    public function cacheDuration(int|DateInterval|DateTimeInterface|Closure $cacheDuration): static
+    {
+        $this->cacheDuration = $cacheDuration;
+
+        return $this;
+    }
+
+    public function getCacheDuration()
+    {
+        $duration = $this->cacheDuration ?? now()->add(config('shopper.admin.icon-picker.duration', '7 days'));
+
+        return $this->evaluate($duration);
+    }
+
+    protected function tryCache(string $key, Closure $callback)
+    {
+        if (! $this->getCacheable()) {
+            return $callback->call($this);
+        }
+
+        return Cache::remember($key, $this->getCacheDuration(), $callback);
+    }
+
+    public function evaluate($value, array $parameters = [], array $exceptParameters = [])
+    {
+        $this->evaluationParametersToRemove = $exceptParameters;
+
+        if ($value instanceof Closure) {
+            return app()->call(
+                $value,
+                array_merge([], $parameters),
+            );
+        }
+
+        return $value;
+    }
+}
diff --git a/packages/admin/src/Traits/HasCollectionPaginate.php b/packages/admin/src/Traits/HasCollectionPaginate.php
new file mode 100644
index 000000000..250bf4c21
--- /dev/null
+++ b/packages/admin/src/Traits/HasCollectionPaginate.php
@@ -0,0 +1,27 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Shopper\Traits;
+
+use Illuminate\Pagination\LengthAwarePaginator;
+use Illuminate\Pagination\Paginator;
+use Illuminate\Support\Collection;
+
+trait HasCollectionPaginate
+{
+    public function paginate($items, $perPage = 15, $page = null, $options = []): LengthAwarePaginator
+    {
+        $page = $page ?: (Paginator::resolveCurrentPage() ?: 1);
+
+        $items = $items instanceof Collection ? $items : Collection::make($items);
+
+        return new LengthAwarePaginator(
+            items: $items->forPage($page, $perPage),
+            total: $items->count(),
+            perPage: $perPage,
+            currentPage: $page,
+            options: $options
+        );
+    }
+}
diff --git a/packages/admin/tailwind.config.js b/packages/admin/tailwind.config.js
index c7eaa8943..75a2e2afe 100644
--- a/packages/admin/tailwind.config.js
+++ b/packages/admin/tailwind.config.js
@@ -35,6 +35,16 @@ module.exports = {
         danger: colors.red,
         info: colors.sky,
       },
+      animation: {
+        progress: 'progress 2s ease-in-out infinite',
+      },
+      keyframes: {
+        progress: {
+          '0%': { backgroundPosition: '-150% 0,-150% 0' },
+          '66%': { backgroundPosition: '250% 0,-150% 0' },
+          '100%': { backgroundPosition: '250% 0, 250% 0' },
+        },
+      },
       inset: {
         '-0.5': '-0.125rem',
       },
diff --git a/packages/core/database/migrations/2023_07_25_044432_add_icon_column.php b/packages/core/database/migrations/2023_07_25_044432_add_icon_column.php
new file mode 100644
index 000000000..798b93fd3
--- /dev/null
+++ b/packages/core/database/migrations/2023_07_25_044432_add_icon_column.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+use Shopper\Core\Helpers\Migration;
+
+return new class() extends Migration
+{
+    public function up(): void
+    {
+        Schema::table($this->getTableName('attributes'), function (Blueprint $table): void {
+            $table->string('icon')->nullable();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table($this->getTableName('attributes'), function (Blueprint $table): void {
+            $table->dropColumn('icon');
+        });
+    }
+};
diff --git a/packages/core/src/Models/Attribute.php b/packages/core/src/Models/Attribute.php
index 42d733279..39450bfbe 100644
--- a/packages/core/src/Models/Attribute.php
+++ b/packages/core/src/Models/Attribute.php
@@ -18,6 +18,7 @@
  * @property-read bool $is_enabled
  * @property-read bool $is_searchable
  * @property-read bool $is_filterable
+ * @property-read string|null $icon
  */
 class Attribute extends Model
 {
@@ -32,6 +33,7 @@ class Attribute extends Model
         'is_enabled',
         'is_searchable',
         'is_filterable',
+        'icon',
     ];
 
     protected $casts = [
@@ -57,14 +59,14 @@ public function getTypeFormattedAttribute(): string
     public static function typesFields(): array
     {
         return [
-            'text' => __('Text field :type', ['type' => '(input)']),
-            'number' => __('Text field :type', ['type' => '(number)']),
-            'richtext' => __('Richtext'),
-            'select' => __('Select'),
-            'checkbox' => __('Checkbox'),
-            'radio' => __('Radio'),
-            'colorpicker' => __('Color picker'),
-            'datepicker' => __('Date picker'),
+            'text' => __('shopper::layout.forms.label.text_field', ['type' => '(input)']),
+            'number' => __('shopper::layout.forms.label.text_field', ['type' => '(number)']),
+            'richtext' => __('shopper::layout.forms.label.richtext'),
+            'select' => __('shopper::layout.forms.label.select'),
+            'checkbox' => __('shopper::layout.forms.label.checkbox'),
+            'radio' => __('shopper::layout.forms.label.radio'),
+            'colorpicker' => __('shopper::layout.forms.label.colorpicker'),
+            'datepicker' => __('shopper::layout.forms.label.datepicker'),
         ];
     }