Feat: Add methods to change icon

README.md

@@ -27,7 +27,45 @@ use Elbytes\NovaTooltipField\Tooltip;
 
 ....
 
-Tooltip::make('Field')
+Tooltip::make('Type', 'type'), 
+
+// OR
+
+Tooltip::make('Type', 'type')
+       ->setDefaultIcon('<svg>...</svg>') // Optional
+       ->setDependIcons([
+           'fieldValue' => '<svg>...</svg>',
+           'fieldValue2' => '<svg>...</svg>',
+       ]), // Optional
+```
+
+### Using with your own icon
+
+To change the default icon, you need to use the setDefaultIcon method.
+
+```php
+use Elbytes\NovaTooltipField\Tooltip;
+
+....
+
+Tooltip::make('Type', 'type')
+    ->setDefaultIcon('<svg>...</svg>')
+```
+
+### Value-dependent icons
+
+Sometimes the icon has to change depending on the value of the field, you can use the setDependIcons method for this.
+
+```php
+use Elbytes\NovaTooltipField\Tooltip;
+
+....
+
+Tooltip::make('Type', 'type')
+       ->setDependIcons([
+           'fieldValue' => '<svg>...</svg>',
+           'fieldValue2' => '<svg>...</svg>',
+       ]),
 ```
 
 ## Contribution

resources/js/components/IndexField.vue

@@ -1,17 +1,43 @@
 <template>
-    <span class="text-70 hover:text-primary">
-        <icon
-            type="info"
-            width="18"
-            height="18"
-            view-box="0 0 20 20"
-            v-tooltip="field.value ? field.value : '—'"
-        />
-    </span>
+  <div class="text-70 hover:text-primary flex justify-center mb-1 cursor-pointer">
+    <span
+        v-if="icon"
+        class="h-6"
+        v-tooltip="tooltipValue"
+        v-html="icon"
+    />
+    <icon
+        v-else
+        type="info"
+        width="18"
+        height="18"
+        view-box="0 0 20 20"
+        v-tooltip="tooltipValue"
+    />
+  </div>
 </template>
 
 <script>
 export default {
-    props: ['resourceName', 'field'],
+  props: ['resourceName', 'field'],
+
+  computed: {
+    icon () {
+      if (typeof this.field.dependIcons === 'object' && this.field.dependIcons) {
+        if (this.field.dependIcons.hasOwnProperty(this.field.value)) {
+          return this.field.dependIcons[this.field.value]
+        }
+      }
+
+      if (this.field.icon) {
+        return this.field.icon
+      }
+
+      return null
+    },
+    tooltipValue () {
+      return this.field.value ? this.field.value : '—'
+    }
+  }
 }
 </script>

src/Tooltip.php

@@ -12,4 +12,30 @@ class Tooltip extends Field
      * @var string
      */
     public $component = 'nova-tooltip-field';
+
+    /**
+     * Depending on the value, the icon changes.
+     *
+     * @param  array  $icons  ['expected value' => '<svg>...</svg>']
+     * @return mixed
+     */
+    public function setDependIcons(array $icons)
+    {
+        return $this->withMeta([
+            'dependIcons' => $icons
+        ]);
+    }
+
+    /**
+     * Replace the default icon.
+     *
+     * @param  string  $inlineSvg
+     * @return mixed
+     */
+    public function setDefaultIcon(string $inlineSvg)
+    {
+        return $this->withMeta([
+            'icon' => $inlineSvg
+        ]);
+    }
 }