[Bug] Slot icon should not have color modifier

[mochamadArif]

Vue2-datepicker version: v3.11.1 Vue version: v2.6.14 Browser: Chrome

Steps to reproduce I use tailwind and custom SVG icon as component.

Reproduction Link or Source Code

<VueDatePicker
  v-model="selectedDate"
  value-type="format"
  class="custom"
  format="DD/MM/YYYY"
  :open.sync="isDatePickerShown"
  :editable="false"
  @change="onChangeDate"
>
  <template #icon-calendar>
    <IconArrowRight
      class="text-primary"
    />
  </template>
</VueDatePicker>

SVG file

<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M9 3L18 12L9 21"
    stroke="currentColor"
    stroke-width="3"
    stroke-linecap="round"
  />
</svg>

Expected behavior I expect my icon to show without any color modifier from the slot.

Actual behavior The slot style has .mx-datepicker svg { fill: currentColor; .... }, causing outline only SVG added fill color.

[mengxiong10]

You can add a class to override the default class.

.mx-datepicker svg { fill: 'none' }

or

  <path
    d="M9 3L18 12L9 21"
    fill="none"
    stroke="currentColor"
    stroke-width="3"
    stroke-linecap="round"
  />