4dkankan-components/docs/examples/input/with-icon.vue

<template>
  <div class="demo-input-suffix">
    <el-row :gutter="20">
      <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
        >Using attributes</span
      >
      <kk-input
        v-model="input1"
        class="w-50 m-2"
        placeholder="Pick a date"
        :suffix-icon="Calendar"
      />
      <kk-input
        v-model="input2"
        class="w-50 m-2"
        placeholder="Type something"
        :prefix-icon="Search"
      />
    </el-row>
  </div>
  <div class="demo-input-suffix">
    <el-row :gutter="20">
      <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
        >Using slots</span
      >
      <kk-input v-model="input3" class="w-50 m-2" placeholder="Pick a date">
        <template #suffix>
          <kk-icon class="el-input__icon"><calendar /></kk-icon>
        </template>
      </kk-input>
      <kk-input v-model="input4" class="w-50 m-2" placeholder="Type something">
        <template #prefix>
          <kk-icon class="el-input__icon"><search /></kk-icon>
        </template>
      </kk-input>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { KkIcon, KkInput } from 'kankan-components'
import { Calendar, Search } from '@kankan-components/icons-vue'
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
const input4 = ref('')
</script>