feat: add hover-fill prop (#45)

README.md

@@ -209,6 +209,7 @@ Then we add the file path inside the plugins key in `nuxt.config.js`, and set `m
 | `width`      | Width of icon      | `string` | -                 | -             |
 | `height`     | Height of icon     | `string` | -                 | -             |
 | `fill`       | Fill color of icon | `string` | HEX or color name | -             |
+| `hover-fill` | Fill color on hover| `string` | HEX or color name | -             |
 | `icon-style` | Icon style         | `string` | line / monochrome | line          |
 
 ## Events

src/components/Unicon.vue

@@ -6,9 +6,11 @@
       :width="width"
       :height="height"
       :viewBox.camel="viewBox"
-      :fill="fill"
+      :fill="localFill"
       v-bind="$attrs"
       @click="$emit('click')"
+      @mouseover="onHover"
+      @mouseout="onLeave"
       v-html="icon"
     />
   </div>
@@ -41,6 +43,10 @@ export default {
       type: String,
       default: 'inherit'
     },
+    hoverFill: {
+      type: String,
+      default: null
+    },
     viewBox: {
       type: String,
       default: '0 0 24 24'
@@ -57,6 +63,12 @@ export default {
     }
   },
 
+  data () {
+    return {
+      localFill: this.fill
+    }
+  },
+
   computed: {
     icon () {
       const icon = this.$options.lib.find(
@@ -66,18 +78,32 @@ export default {
       if (icon) {
         return icon.path
       } else {
-        console.error(`Name '${ this.name }' of the icon is not correct`)
+        console.error(`Name '${this.name}' of the icon is not correct`)
         return undefined
       }
     }
+  },
+  methods: {
+    onHover () {
+      if (this.hoverFill) {
+        this.localFill = this.hoverFill
+      }
+    },
+    onLeave () {
+      if (this.hoverFill) {
+        this.localFill = this.fill
+      }
+    }
   }
 }
 </script>
 
 <style>
 .unicon {
   display: inline-block;
-  fill: var(--uni-color-primary);
+}
+.unicon svg {
+  transition: 0.2s all;
 }
 .uim-primary {
   opacity: 1;

tests/unit/Unicon.spec.js

@@ -65,4 +65,23 @@ describe('Unicon', () => {
     svg.trigger('click')
     expect(wrapper.emitted().click).toBeTruthy()
   })
+  it('hover fill is working', () => {
+    const wrapper = shallowMount(Unicon, {
+      propsData: {
+        ...baseProps,
+        fill: 'blue',
+        hoverFill: 'red'
+      }
+    })
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.props().fill).toBe('blue')
+    expect(wrapper.props().hoverFill).toBe('red')
+
+    const svg = wrapper.find('svg')
+    svg.trigger('mouseover')
+    expect(svg.attributes().fill).toBe('red')
+
+    svg.trigger('mouseout')
+    expect(svg.attributes().fill).toBe('blue')
+  })
 })