Icon Component

The <Icon> component is a React component that renders SVG icons. It supports styling, sizing, and events.

Basic Usage

All of the React.CSSProperties are valid prop with the benefit of passing just the number without unit (px are used by default). The library extents the CSS properties and adds all of them with Hover suffix that will take affect only when the component is hovered by the device pointer.

The component requires a name prop. You can also customize the size and color of the icon.

Basic

import { Icon } from "react-better-html";

function App() {
   return (
      <Icon name="XMark" size={24} />
   );
}

With Hover

import { Icon } from "react-better-html";

function App() {
   return (
      <Icon name="XMark" size={24} colorHover="red" />
   );
}

When hovering the component, the icon will change to red.

tip

Ensure that the icons object in the <BetterHtmlProvider> value prop contains the icon you want to use (except the already included in the library). Check out the Configuration page for more details.

Common Props

All standard <svg> attributes are valid props for this component.

import { Icon } from "react-better-html";

function App() {
   return (
      <Icon
         name="XMark"
         title="Close modal"
         size={24}
         marginLeft={12}
         onClick={(event) => {
            console.log(event.clientX);
         }}
      />
   );
}