28 lines
No EOL
3.6 KiB
TypeScript
28 lines
No EOL
3.6 KiB
TypeScript
import React from 'react';
|
|
import Svg, { Path } from 'react-native-svg';
|
|
|
|
interface HomeIconProps {
|
|
focused: boolean;
|
|
size: number;
|
|
color: string;
|
|
}
|
|
|
|
const HomeIcon: React.FC<HomeIconProps> = ({ focused, size, color }) => {
|
|
if (focused) {
|
|
// Selected state SVG (filled house)
|
|
return (
|
|
<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
|
|
<Path d="M6.29367 4.96556C8.96048 3.028 10.2939 2.05923 11.8167 2.00336C11.9389 1.99888 12.0611 1.99888 12.1833 2.00336C13.7061 2.05923 15.0395 3.028 17.7063 4.96556C20.3732 6.90311 21.7066 7.87189 22.2303 9.30291C22.2723 9.41771 22.3101 9.534 22.3436 9.65157C22.761 11.1171 22.2517 12.6846 21.2331 15.8197L19.512 21.1164C19.2386 21.958 18.4543 22.5279 17.5694 22.5279C16.4412 22.5279 15.5267 21.6133 15.5267 20.4852V17.7363C15.5267 16.6778 14.6686 15.8197 13.6101 15.8197H10.3899C9.3314 15.8197 8.47329 16.6778 8.47329 17.7363V20.4852C8.47329 21.6133 7.55877 22.5279 6.43065 22.5279C5.54572 22.5279 4.76144 21.958 4.48798 21.1164L2.76696 15.8197C1.74832 12.6846 1.23901 11.1171 1.65645 9.65157C1.68994 9.534 1.72773 9.41771 1.76974 9.30291C2.29344 7.87189 3.62685 6.90311 6.29367 4.96556Z" fill={color}/>
|
|
</Svg>
|
|
);
|
|
} else {
|
|
// Unselected state SVG (outlined house)
|
|
return (
|
|
<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
|
|
<Path fillRule="evenodd" clipRule="evenodd" d="M12.2108 1.25387C12.0703 1.24871 11.9297 1.24871 11.7892 1.25387C10.8618 1.28789 10.0268 1.60323 9.11115 2.12818C8.21888 2.63974 7.19165 3.38608 5.88826 4.33305L5.81741 4.38453C4.51402 5.33149 3.48676 6.07783 2.72451 6.76835C1.94232 7.47693 1.38435 8.17368 1.06542 9.04515C1.01711 9.17717 0.973653 9.31091 0.935143 9.44611C0.680923 10.3386 0.722785 11.2303 0.939096 12.2633C1.14989 13.27 1.54227 14.4775 2.04013 16.0098L3.77469 21.3482C4.14855 22.4988 5.2208 23.2779 6.43065 23.2779C7.97298 23.2779 9.2233 22.0276 9.2233 20.4852V17.7363C9.2233 17.092 9.74561 16.5697 10.3899 16.5697H13.6101C14.2544 16.5697 14.7767 17.092 14.7767 17.7363V20.4852C14.7767 22.0276 16.027 23.2779 17.5694 23.2779C18.7792 23.2779 19.8515 22.4988 20.2253 21.3482L21.9599 16.0097C22.4578 14.4775 22.8501 13.2699 23.0609 12.2633C23.2772 11.2303 23.3191 10.3386 23.0649 9.44611C23.0264 9.31091 22.9829 9.17717 22.9346 9.04515C22.6157 8.17368 22.0577 7.47693 21.2755 6.76835C20.5132 6.07782 19.486 5.33149 18.1826 4.38452L18.1117 4.33303C16.8084 3.38607 15.7811 2.63973 14.8889 2.12818C13.9733 1.60323 13.1382 1.28789 12.2108 1.25387ZM11.8442 2.75286C11.948 2.74905 12.052 2.74905 12.1558 2.75286C12.7512 2.7747 13.3443 2.97167 14.1428 3.42948C14.9566 3.89603 15.9189 4.59396 17.2655 5.57232C18.6121 6.55068 19.5733 7.25026 20.2684 7.88002C20.9506 8.49798 21.3212 9.00112 21.526 9.56067C21.5617 9.65824 21.5938 9.75709 21.6222 9.85703C21.7855 10.4301 21.7814 11.055 21.5928 11.9558C21.4005 12.874 21.0341 14.0049 20.5198 15.5879L18.7987 20.8847C18.6257 21.4173 18.1294 21.7779 17.5694 21.7779C16.8555 21.7779 16.2767 21.1991 16.2767 20.4852V17.7363C16.2767 16.2636 15.0828 15.0697 13.6101 15.0697H10.3899C8.91719 15.0697 7.7233 16.2636 7.7233 17.7363V20.4852C7.7233 21.1991 7.14456 21.7779 6.43065 21.7779C5.87064 21.7779 5.37433 21.4173 5.20127 20.8847L3.48025 15.5879C2.9659 14.0049 2.59951 12.874 2.40725 11.9558C2.21861 11.055 2.21454 10.4301 2.37776 9.85703C2.40623 9.7571 2.43834 9.65824 2.47405 9.56067C2.67883 9.00112 3.04942 8.49798 3.73157 7.88002C4.42676 7.25026 5.38791 6.55068 6.73451 5.57232C8.0811 4.59396 9.04345 3.89603 9.85722 3.42948C10.6557 2.97167 11.2488 2.7747 11.8442 2.75286Z" fill={color}/>
|
|
</Svg>
|
|
);
|
|
}
|
|
};
|
|
|
|
export default HomeIcon; |