Slots

icon

Custom template for the refresh button. Use your own icon component, SVG, or plain text instead of the default refresh icon.

Attribute	Description
Default	Built-in refresh-style icon (inline SVG)
Override	Use the #icon slot for custom content, or the icon prop when not using the slot

Custom icon or text

<script setup>
import { ref } from 'vue'
import { VueClientRecaptcha } from 'vue-client-recaptcha'
import 'vue-client-recaptcha/dist/vue-client-recaptcha.css'

const input = ref('')
const valid = ref(false)
</script>

<template>
  <VueClientRecaptcha v-model="input" v-model:valid="valid">
    <template #icon>
      <span style="font-weight: bold">↻ Refresh</span>
    </template>
  </VueClientRecaptcha>
</template>

Custom SVG

<VueClientRecaptcha v-model="input" v-model:valid="valid">
  <template #icon>
    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
      <!-- your custom SVG path -->
    </svg>
  </template>
</VueClientRecaptcha>

Custom component (e.g. FontAwesome)

<VueClientRecaptcha v-model="input" v-model:valid="valid">
  <template #icon>
    <FontAwesomeIcon icon="refresh" />
  </template>
</VueClientRecaptcha>

When the slot is not used, the default icon is shown. You can also change via the icon prop (see Props).