Prioritize component attributes over set and default attributes (#197)

* Prioritize component attributes

* wip

Co-authored-by: Dries Vints <dries@vints.io>

README.md

@@ -349,7 +349,7 @@ return [
 
 This always needs to be an associative array.  Additionally, the same option is available in sets so you can set default attributes on every set.
 
-It is not possible to overwrite existing attributes on SVG icons. If you already have attributes defined on icons which you want to override, remove them first.
+The sequence in which classes get applied is `default attributes / set attributes / explicit attributes` where the latter overwrites the former. It is not possible to overwrite existing attributes on SVG icons. If you already have attributes defined on icons which you want to override, remove them first.
 
 ## Usage
 

src/Factory.php

@@ -224,9 +224,9 @@ private function formatAttributes(string $set, $class = '', array $attributes =
         }
 
         $attributes = array_merge(
-            $attributes,
             $this->config['attributes'],
             (array) ($this->sets[$set]['attributes'] ?? []),
+            $attributes,
         );
 
         foreach ($attributes as $key => $value) {

tests/ComponentsTest.php

@@ -143,6 +143,40 @@ public function it_does_not_duplicate_attributes()
         $view->assertSee($expected, false);
     }
 
+    /** @test */
+    public function it_prioritizes_default_and_set_classes_on_components()
+    {
+        $this->prepareSets(['class' => 'h-40'], ['default' => ['class' => 'h-50']]);
+
+        $view = $this->blade('<x-icon-camera class="h-30"/>');
+
+        $expected = <<<'HTML'
+            <svg class="h-40 h-50 h-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
+            </svg>
+            HTML;
+
+        $view->assertSee($expected, false);
+    }
+
+    /** @test */
+    public function it_prioritizes_attributes_on_components()
+    {
+        $this->prepareSets(['attributes' => ['height' => 40]], ['default' => ['attributes' => ['height' => 50]]]);
+
+        $view = $this->blade('<x-icon-camera height="60"/>');
+
+        $expected = <<<'HTML'
+            <svg height="60" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
+            </svg>
+            HTML;
+
+        $view->assertSee($expected, false);
+    }
+
     /** @test */
     public function it_can_render_an_icon_from_a_subdirectory()
     {