jamsrui_icon_button_component_quickstart_with_custom_svg_icon.ts

1import React from 'react';
2import { IconButton } from "@jamsrui/icon-button";
3
4// Example using a simple SVG icon or an icon from a library like lucide-react
5const SearchIcon = () => (
6  <svg 
7    xmlns="http://www.w3.org/2000/svg" 
8    width="20" 
9    height="20" 
10    viewBox="0 0 24 24" 
11    fill="none" 
12    stroke="currentColor" 
13    strokeWidth="2" 
14    strokeLinecap="round" 
15    strokeLinejoin="round"
16  >
17    <circle cx="11" cy="11" r="8" />
18    <path d="m21 21-4.3-4.3" />
19  </svg>
20);
21
22export const IconButtonExample = () => {
23  return (
24    <div className="flex gap-4">
25      <IconButton 
26        aria-label="Search"
27        variant="solid" 
28        color="primary"
29      >
30        <SearchIcon />
31      </IconButton>
32    </div>
33  );
34};
35
36export default IconButtonExample;