Skip to main content

Icon

The Icon component is a simple and flexible way to display icons in your application.
It supports applying custom styles, setting tooltips with a title, handling click events, and rendering child content inside the icon container.

Icon

Initialization​

To create an Icon instance on a page, you need to complete two steps:

  • import the component into your page:
App.svelte
<script>
  import { Icon } from "@svar-ui/svelte-core";
</script>
  • apply the <Icon /> tag to initialize an icon:
<Icon />

The default Icon will render as an empty placeholder element styled with the default wx-icon class.

Applying custom styles​

You can apply custom CSS classes to the icon using the css property. This allows you to adjust color, size, or use an icon font.

<Icon css="my-icon-class" />

Example of CSS styling:

.my-icon-class {
  font-size: 24px;
  color: #007acc;
}

Related sample: Custom CSS icon

Adding a tooltip​

The title property sets a tooltip that appears when hovering over the icon. When the user hovers the mouse over the icon, the browser displays "Settings" as a tooltip.

<Icon css="my-icon-class" title="Settings" />

Rendering child content inside the Icon​

The Icon component can render child content (e.g., text, SVG, or another component) inside its container.

<Icon css="my-icon-class">
  <svg viewBox="0 0 24 24" width="20" height="20">
    <path d="M12 2L2 22h20L12 2z" />
  </svg>
</Icon>

Handling click events​

You can handle click actions by providing the onclick event handler. The event handler receives the native MouseEvent object.

<script>
  function handleClick(ev) {
    console.log("Icon clicked!", ev);
  }
</script>

<Icon css="my-icon-class" title="Clickable" onclick={handleClick} />