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.jsx
import { Icon } from "@svar-ui/react-core";
  • render the <Icon /> component inside your React tree:
export default function App() {
  return <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" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2L2 22h20L12 2z" />
  </svg>
</Icon>

Handling click events​

You can handle click actions by providing the onClick event handler. In React the handler receives a React.MouseEvent (SyntheticEvent) object; the native DOM event is available as event.nativeEvent.

export default function App() {
  function handleClick(ev) {
    console.log("Icon clicked!", ev);
    // If you need the native DOM MouseEvent:
    // console.log(ev.nativeEvent);
  }

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