Prefix and suffix icons

Button and various input components 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 keyword.

💡️

Most React icon libraries support this format. Check for example: react-icons, material-icons, heroicons 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