Prefix and suffix icons

Button (opens in a new tab) and various input components (opens in a new tab) support prefix and suffix props, which can be used to extend your component with icon.

Koval UI expect prefix React component which is compatible with SVGProps<SVGSVGElement> type. SVG style has to support currentColor (opens in a new tab) keyword.

💡️

Most React icon libraries support this format. Check for example: react-icons (opens in a new tab), material-icons (opens in a new tab), heroicons (opens in a new tab) etc.

Demo

import {
    HiBeaker,
    HiAcademicCap
} from 'react-icons/hi';
import {Button, InputText} from 'koval-ui';
export default function Example() {
  return (
    <div style={{
        display: 'flex',
        gap: '24px',
        flexDirection: 'column'
    }}>
      <Button
          prefix={HiBeaker}
          suffix={HiAcademicCap}>
          Button with icon
      </Button>
      <InputText
          prefix={HiBeaker}
          placeholder="Input with icon" />
    </div>
  );
};

Open Sandbox

Page Iframe embed