Refactor code

README.md

@@ -9,11 +9,12 @@ Convenient Heroicons selection field for MoonShine
 
 ```bash
 composer require bugo/moonshine-heroicons-field
+php artisan vendor:publish --tag=blade-heroicons --force
 ```
 
 ## Configuration
 
-You can specify `outline` or `solid` (default) style for icons:
+You can specify desired style for icons:
 
 `.env`:
 
@@ -28,6 +29,13 @@ php artisan vendor:publish --tag=heroicons-field
 ```
 
 ```php
+/*
+ * Possible values:
+ * 's', 'solid' - Solid 24x24, Solid fill
+ * 'o', 'outline' - Outline 24x24, 1.5px stroke
+ * 'm', 'mini' - Mini 20x20, Solid fill
+ * 'c', 'micro' - Micro 16x16, Solid fill
+ */
 return [
     'style' => env('HEROICONS_STYLE', 'solid'),
 ];
@@ -55,7 +63,9 @@ class CustomResource extends ModelResource
     public function fields(): array
     {
         return [
-            Icon::make('Icon')->searchable(),
+            Icon::make('Icon')
+                ->searchable()
+                ->style('mini'),
         ];
     }
 }

composer.json

@@ -15,7 +15,8 @@
     }
   ],
   "require": {
-    "php": "^8.1|^8.2"
+    "php": "^8.1|^8.2",
+    "blade-ui-kit/blade-heroicons": "^2.3"
   },
   "require-dev": {
     "moonshine/moonshine": "^2.10.0",

config/heroicons-field.php

@@ -1,5 +1,12 @@
 <?php
 
+/*
+ * Possible values:
+ * 's', 'solid' - Solid 24x24, Solid fill
+ * 'o', 'outline' - Outline 24x24, 1.5px stroke
+ * 'm', 'mini' - Mini 20x20, Solid fill
+ * 'c', 'micro' - Micro 16x16, Solid fill
+ */
 return [
-    'style' => env('HEROICONS_STYLE', 'solid'), // 'solid', 'outline'
+    'style' => env('HEROICONS_STYLE', 'solid'),
 ];

src/Fields/Icon.php

@@ -9,22 +9,25 @@
  * @copyright 2024 Bugo
  * @license https://opensource.org/licenses/MIT MIT
  *
- * @version 0.1
+ * @version 0.2
  */
 
 namespace Bugo\MoonShineHeroicons\Fields;
 
 use Closure;
 use Illuminate\Support\Facades\Cache;
-use MoonShine\Components\Icon as IconComponent;
 use MoonShine\Fields\Select;
+use MoonShine\Fields\Preview;
 
 class Icon extends Select
 {
+    protected string $style;
+
     public function __construct(Closure|string|null $label = null, ?string $column = null, ?Closure $formatted = null)
     {
         parent::__construct($label, $column, $formatted);
 
+        $this->style = $this->getStyle();
         $this->options = $this->getCustomOptions();
         $this->optionProperties = fn() => $this->getCustomOptionProperties();
     }
@@ -41,25 +44,47 @@ public function optionProperties(array|Closure $data): static
 
     public function getCustomOptions(): array
     {
-        return Cache::rememberForever('heroicons-field-options', function () {
-            $items = glob(base_path('vendor/moonshine/moonshine/resources/views/ui/icons/heroicons/*.blade.php'));
-            $items = array_map(fn($item) => basename($item, '.blade.php'), $items);
+        return Cache::rememberForever("heroicons-$this->style-field-options", function () {
+            $items = glob(public_path("vendor/blade-heroicons/$this->style-*.svg"));
+            $items = array_map(fn($item) => substr(basename($item, '.svg'), 2), $items);
 
             return array_combine($items, $items);
         });
     }
 
     public function getCustomOptionProperties(): array
     {
-        return Cache::rememberForever('heroicons-field-option-properties', function () {
-            $style = config('heroicons-field.style');
-            $link = "https://raw.githubusercontent.com/tailwindlabs/heroicons/master/optimized/24/$style/%s.svg";
+        return Cache::rememberForever("heroicons-$this->style-field-option-properties", function () {
+            $link = asset("vendor/blade-heroicons/$this->style-%s.svg");
 
             return array_map(fn($item) => ['image' => sprintf($link, $item)], $this->getCustomOptions());
         });
     }
 
+    public function style(string $style): static
+    {
+        $this->style = $this->getShortStyle($style);
+
+        return $this;
+    }
+
+    protected function getShortStyle(string $style): string
+    {
+        return match ($style) {
+            'o', 'outline' => 'o',
+            'm', 'mini'    => 'm',
+            'c', 'micro'   => 'c',
+            default        => 's'
+        };
+    }
+
+    protected function getStyle(): string
+    {
+        return $this->style ?? $this->getShortStyle(config('heroicons-field.style'));
+    }
+
     /**
+     * @inheritDoc
      * @codeCoverageIgnore
      */
     protected function resolvePreview(): string
@@ -70,12 +95,11 @@ protected function resolvePreview(): string
             return '';
         }
 
-        $style = str_replace('solid', '', (string) config('heroicons-field.style'));
-
         $icons = array_filter(explode(',', $value));
 
-        $result = array_map(fn($icon) => IconComponent::make("heroicons.$style.$icon")->render(), $icons);
+        $result = array_map(fn($icon) => svg("heroicon-$this->style-$icon", 'h-6 w-6')->toHtml(), $icons);
 
-        return '<div class="flex items-center">' . implode('', $result) . '</div>';
+        return (string) Preview::make(formatted: static fn() => implode('', $result))
+            ->setAttribute('class', 'flex items-center');
     }
 }

src/Providers/IconServiceProvider.php

@@ -9,7 +9,7 @@
  * @copyright 2024 Bugo
  * @license https://opensource.org/licenses/MIT MIT
  *
- * @version 0.1
+ * @version 0.2
  */
 
 namespace Bugo\MoonShineHeroicons\Providers;

tests/Unit/IconFieldTest.php

@@ -118,4 +118,15 @@
             ->name('archive-box-arrow-up')
             ->toBe('icon_multiple[archive-box-arrow-up]');
     });
+
+	it('style', function(): void {
+		expect($this->field->style('s')->toValue())
+			->toBe($this->field->style('solid')->toValue())
+			->and($this->field->style('o')->toValue())
+			->toBe($this->field->style('outline')->toValue())
+			->and($this->field->style('m')->toValue())
+			->toBe($this->field->style('mini')->toValue())
+			->and($this->field->style('c')->toValue())
+			->toBe($this->field->style('micro')->toValue());
+	});
 });