32 lines
No EOL
4.5 KiB
TypeScript
32 lines
No EOL
4.5 KiB
TypeScript
import React from 'react';
|
|
import Svg, { Path } from 'react-native-svg';
|
|
|
|
interface CartIconProps {
|
|
focused: boolean;
|
|
size: number;
|
|
color: string;
|
|
}
|
|
|
|
const CartIcon: React.FC<CartIconProps> = ({ focused, size, color }) => {
|
|
if (focused) {
|
|
// Focused state SVG (cart without handle)
|
|
return (
|
|
<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
|
|
<Path d="M1.72754 1.81826C1.62707 1.41642 1.21986 1.1721 0.818015 1.27257C0.416171 1.37305 0.17186 1.78025 0.272331 2.1821L1.32418 6.38907L2.30298 10.4731C2.71918 12.2096 3.04677 13.5765 3.43552 14.6384C3.83428 15.7277 4.32329 16.5733 5.10786 17.2218C5.17557 17.2777 5.24455 17.3321 5.31476 17.3849C6.12821 17.9968 7.06452 18.2752 8.21672 18.4091C9.33994 18.5397 10.7455 18.5397 12.5312 18.5396H13.1248C14.6698 18.5397 15.886 18.5397 16.8658 18.4406C17.8694 18.3391 18.6952 18.1285 19.4383 17.6632C19.7908 17.4425 20.1183 17.1842 20.4151 16.8929C21.001 16.3177 21.3871 15.6192 21.7069 14.7502H17C16.5858 14.7502 16.25 14.4144 16.25 14.0002C16.25 13.586 16.5858 13.2502 17 13.2502H22.1699C22.2921 12.7957 22.4158 12.297 22.5482 11.7502L14 11.7502C13.5858 11.7502 13.25 11.4144 13.25 11.0002C13.25 10.586 13.5858 10.2502 14 10.2502L22.9074 10.2502C23.0559 9.61688 23.1724 9.07364 23.2251 8.61271C23.2968 7.98492 23.2675 7.38716 22.9542 6.84137C22.8201 6.60794 22.6525 6.39544 22.4568 6.21069C21.9991 5.77874 21.4246 5.61094 20.7973 5.53441C20.193 5.46066 19.4252 5.46068 18.4936 5.4607L2.63824 5.4607L1.72754 1.81826Z" fill={color}/>
|
|
<Path d="M9.42109 22.0002C10.0024 22.0002 10.4737 21.5289 10.4737 20.9475C10.4737 20.3662 10.0024 19.8949 9.42109 19.8949C8.83973 19.8949 8.36845 20.3662 8.36845 20.9475C8.36845 21.5289 8.83973 22.0002 9.42109 22.0002Z" fill={color}/>
|
|
<Path d="M15.7369 22.0002C16.3182 22.0002 16.7895 21.5289 16.7895 20.9475C16.7895 20.3662 16.3182 19.8949 15.7369 19.8949C15.1555 19.8949 14.6842 20.3662 14.6842 20.9475C14.6842 21.5289 15.1555 22.0002 15.7369 22.0002Z" fill={color}/>
|
|
</Svg>
|
|
);
|
|
} else {
|
|
// Unfocused state SVG (full cart)
|
|
return (
|
|
<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
|
|
<Path fillRule="evenodd" clipRule="evenodd" d="M1.72754 1.81826C1.62707 1.41642 1.21986 1.1721 0.818015 1.27257C0.416171 1.37305 0.17186 1.78025 0.272331 2.1821L1.32418 6.38907L2.30298 10.4731C2.71918 12.2096 3.04677 13.5765 3.43552 14.6384C3.83428 15.7277 4.32329 16.5733 5.10786 17.2218C5.17557 17.2777 5.24455 17.3321 5.31476 17.3849C6.12821 17.9968 7.06452 18.2752 8.21672 18.4091C9.33994 18.5397 10.7455 18.5397 12.5312 18.5396H13.1248C14.6698 18.5397 15.886 18.5397 16.8658 18.4406C17.8694 18.3391 18.6952 18.1285 19.4383 17.6632C19.7908 17.4425 20.1183 17.1842 20.4151 16.8929C21.1139 16.2069 21.5285 15.3455 21.8854 14.2285C22.1479 13.4069 22.3925 12.4017 22.6867 11.1751L22.7598 10.8702C22.9769 9.96426 23.1559 9.2176 23.2251 8.61271C23.2968 7.98492 23.2675 7.38716 22.9542 6.84137C22.8201 6.60794 22.6525 6.39544 22.4568 6.21069C21.9991 5.77874 21.4246 5.61094 20.7973 5.53441C20.193 5.46066 19.4252 5.46068 18.4936 5.4607L2.63824 5.4607L1.72754 1.81826ZM3.75057 10.0771L3.00366 6.9607H18.4449C19.4374 6.9607 20.113 6.96202 20.6157 7.02336C21.106 7.08319 21.307 7.18812 21.4273 7.30161C21.5162 7.38559 21.5924 7.48217 21.6533 7.58828C21.7357 7.73168 21.7909 7.95163 21.7348 8.44237C21.6838 8.88825 21.5554 9.45517 21.3658 10.2502L14 10.2502C13.5858 10.2502 13.25 10.586 13.25 11.0002C13.25 11.4144 13.5858 11.7502 14 11.7502L21.0044 11.7502C20.8654 12.3167 20.7387 12.8119 20.6137 13.2502H17C16.5858 13.2502 16.25 13.586 16.25 14.0002C16.25 14.4144 16.5858 14.7502 17 14.7502H20.0868C19.8738 15.2129 19.6437 15.5482 19.3643 15.8225C19.1449 16.0378 18.9028 16.2287 18.6423 16.3918C18.1682 16.6887 17.5954 16.8591 16.7149 16.9482C15.8193 17.0388 14.6787 17.0396 13.0837 17.0396H12.579C10.7351 17.0396 9.41655 17.0385 8.38989 16.9192C7.3822 16.802 6.73794 16.5784 6.21639 16.1862C6.16451 16.1471 6.11352 16.1069 6.06347 16.0656C5.56045 15.6498 5.19285 15.0754 4.8441 14.1228C4.48878 13.1522 4.18031 11.8702 3.75057 10.0771Z" fill={color}/>
|
|
<Path d="M10.4737 20.9475C10.4737 21.5289 10.0024 22.0002 9.42107 22.0002C8.83972 22.0002 8.36844 21.5289 8.36844 20.9475C8.36844 20.3662 8.83972 19.8949 9.42107 19.8949C10.0024 19.8949 10.4737 20.3662 10.4737 20.9475Z" fill={color}/>
|
|
<Path d="M16.7895 20.9475C16.7895 21.5289 16.3182 22.0002 15.7369 22.0002C15.1555 22.0002 14.6842 21.5289 14.6842 20.9475C14.6842 20.3662 15.1555 19.8949 15.7369 19.8949C16.3182 19.8949 16.7895 20.3662 16.7895 20.9475Z" fill={color}/>
|
|
</Svg>
|
|
);
|
|
}
|
|
};
|
|
|
|
export default CartIcon; |