Custom Icons
You can customize the show/hide icons by passing React nodes to the icons option. In this example, we use Home and Star icons from lucide-react.
import { useViraPassword } from '@virastack/password-toggle';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Home, Star } from 'lucide-react';
export function CustomIconsDemo() {
const { inputProps, btnProps } = useViraPassword({
icons: {
show: <Home className="h-4 w-4" />,
hide: <Star className="h-4 w-4" />,
},
});
return (
<div className="flex w-full max-w-sm items-center space-x-2 p-4 border border-border rounded-lg">
<Input {...inputProps} placeholder="Password" />
<Button {...btnProps} variant="outline" size="icon">
{btnProps.children}
</Button>
</div>
);
}