onclick

Description

Fires when the icon is clicked

Usage

onclick?: (ev: MouseEvent) => void;

Example

When a user clicks on the icon, the handleClick function is executed, logging a message and showing an alert.

<script setup>
  import { Icon } from "@svar-ui/vue-core";

  function handleClick() {
    console.log("Icon was clicked");
    alert("You clicked the save icon!");
  }
</script>

<template>
  <!-- custom click behavior -->
  <Icon title="Save" css="save-icon" :onclick="handleClick">
    💾
  </Icon>
</template>

<style scoped>
  .save-icon {
    font-size: 24px;
    color: seagreen;
  }
</style>