So I have created a react component that takes svg icons as a parameter. I want to switch the color of the SVG based on variant is active or not. Suggestions required for this purposes
My React Component
import { MouseEventHandler, ReactNode } from 'react';export type MenuItemProps = { text: string; icon: ReactNode | ReactNode[]; disabled?: boolean; extraClasses?: string; children?: ReactNode | ReactNode[]; variant?: 'default' | 'active'; onClick?: MouseEventHandler<HTMLDivElement> | undefined;};export function SidemenuItem({ text = 'Menu Item', icon, disabled = false, children, variant = 'default', onClick}: MenuItemProps) { const handleClick: MouseEventHandler<HTMLDivElement> = (event) => { if (!disabled && onClick) { onClick(event); } }; return (<div onClick={handleClick} className={`flex items-center ${variant !== "active" ? 'gap-3' : 'gap-5'} menu-item ${disabled ? 'cursor-not-allowed opacity-50' : ''}`}><span className={`menu-icon flex flex-col items-end h-12 w-1/3 rounded-r-full p-3 ${variant === "active" ? 'bg-purple-20' : ''}`}> {icon}</span><p className={`menu-text ${variant === "active" ? 'text-primary-normal ml-3' : ''} font-semibold`}>{text}</p> {children}</div> );}Usages of SVG icons
<SidemenuItem text='DashBoard' variant='active' icon={<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.5" d="M26.1039 11H16.8961C16.6585 11 16.4305 11.0968 16.2625 11.2692C16.0944 11.4415 16 11.6752 16 11.919V26.081C16.0007 26.3245 16.0953 26.5578 16.2632 26.73C16.4312 26.9022 16.6587 26.9993 16.8961 27H26.1039C26.3413 26.9993 26.5688 26.9022 26.7368 26.73C26.9047 26.5578 26.9993 26.3245 27 26.081V11.919C27 11.6752 26.9056 11.4415 26.7375 11.2692C26.5695 11.0968 26.3415 11 26.1039 11Z" fill="#4C2BBF" /><path d="M26.1039 3H16.8961C16.6585 3 16.4305 3.0886 16.2625 3.2463C16.0944 3.40401 16 3.6179 16 3.84093V8.15907C16.0007 8.38192 16.0953 8.59543 16.2632 8.75298C16.4312 8.91053 16.6587 8.99937 16.8961 9H26.1039C26.3413 8.99937 26.5688 8.91053 26.7368 8.75298C26.9047 8.59543 26.9993 8.38192 27 8.15907V3.84093C27 3.6179 26.9056 3.40401 26.7375 3.2463C26.5695 3.0886 26.3415 3 26.1039 3Z" fill="#4C2BBF" /><path d="M13.1035 17H3.8965C3.40137 17 3 17.424 3 17.947V26.053C3 26.576 3.40137 27 3.8965 27H13.1035C13.5986 27 14 26.576 14 26.053V17.947C14 17.424 13.5986 17 13.1035 17Z" fill="#4C2BBF" /><path opacity="0.5" d="M13.1035 3.00001H3.8965C3.77866 2.99961 3.66188 3.02156 3.55293 3.06461C3.44398 3.10765 3.34499 3.17092 3.26165 3.25079C3.17832 3.33066 3.1123 3.42555 3.06739 3.52998C3.02249 3.63441 2.99959 3.74634 3.00001 3.8593V14.1407C3.00001 14.3686 3.09446 14.5872 3.26258 14.7483C3.43071 14.9094 3.65874 15 3.8965 15H13.1035C13.3412 15 13.5693 14.9094 13.7374 14.7483C13.9055 14.5872 14 14.3686 14 14.1407V3.8593C14.0004 3.74634 13.9775 3.63441 13.9326 3.52998C13.8877 3.42555 13.8217 3.33066 13.7384 3.25079C13.655 3.17092 13.556 3.10765 13.4471 3.06461C13.3381 3.02156 13.2213 2.99961 13.1035 3.00001Z" fill="#4C2BBF" /></svg> } /><SidemenuItem text='Backups' icon={<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.5"><path d="M8.12501 22.4998H8.5L9 22.5H11H13H15H16H18.5H20H21C21 22.5 21.4334 22.4344 21.875 22.34C25.0907 21.6524 27.5 18.8246 27.5 15.4409C27.5 12.3512 25.4912 9.72506 22.6939 8.76848C22.2964 5.24189 19.2699 2.49976 15.5952 2.49976C11.6503 2.49976 8.45237 5.66009 8.45237 9.55858C8.45237 10.4208 8.60882 11.247 8.8952 12.0108C8.55937 11.9457 8.21229 11.9115 7.85714 11.9115C4.89847 11.9115 2.5 14.2818 2.5 17.2056C2.5 20.1295 4.89847 22.4998 7.85714 22.4998H8.12501Z" fill="#322E3D" /></g></svg> } />Need to switch between the active item and non active items
