crazycharge-app/component/global/SVG.tsx

import Svg, { Path, Rect } from 'react-native-svg';

export const BookingIconSvg = () => (
    <Svg width="30" height="30" viewBox="0 0 30 30" fill="none">
        <Path
            d="M15 30C11.1667 30 7.82639 28.7292 4.97917 26.1875C2.13194 23.6458 0.5 20.4722 0.0833333 16.6667H3.5C3.88889 19.5556 5.17361 21.9444 7.35417 23.8333C9.53472 25.7222 12.0833 26.6667 15 26.6667C18.25 26.6667 21.0069 25.5347 23.2708 23.2708C25.5347 21.0069 26.6667 18.25 26.6667 15C26.6667 11.75 25.5347 8.99306 23.2708 6.72917C21.0069 4.46528 18.25 3.33333 15 3.33333C13.0833 3.33333 11.2917 3.77778 9.625 4.66667C7.95833 5.55556 6.55556 6.77778 5.41667 8.33333H10V11.6667H0V1.66667H3.33333V5.58333C4.75 3.80556 6.47917 2.43056 8.52083 1.45833C10.5625 0.486111 12.7222 0 15 0C17.0833 0 19.0347 0.395833 20.8542 1.1875C22.6736 1.97917 24.2569 3.04861 25.6042 4.39583C26.9514 5.74306 28.0208 7.32639 28.8125 9.14583C29.6042 10.9653 30 12.9167 30 15C30 17.0833 29.6042 19.0347 28.8125 20.8542C28.0208 22.6736 26.9514 24.2569 25.6042 25.6042C24.2569 26.9514 22.6736 28.0208 20.8542 28.8125C19.0347 29.6042 17.0833 30 15 30ZM19.6667 22L13.3333 15.6667V6.66667H16.6667V14.3333L22 19.6667L19.6667 22Z"
            fill="#02677D"
        />
    </Svg>
);

export const HomeIconSvg = () => (
    <Svg width="120" height="120" viewBox="0 0 120 120" fill="none">
        <Path
            d="M68.4287 52.585H82.53C83.8443 52.585 84.827 53.7975 84.551 55.0811C82.1637 66.1687 72.2969 74.481 60.4856 74.4828C47.0891 74.4845 36.0538 63.6258 35.8646 50.2415C35.6701 36.493 46.7662 25.2874 60.4821 25.2874C72.2934 25.2874 82.1602 33.5962 84.5492 44.6821C84.827 45.9692 83.8478 47.1851 82.53 47.1851H70.6284H62.51C61.9058 47.1851 61.47 46.6058 61.6401 46.0264L65.6073 32.4808C65.8921 31.5094 64.6108 30.8745 64.01 31.6881L49.61 51.1418C49.1673 51.7385 49.5944 52.585 50.3392 52.585H58.4577C59.0619 52.585 59.4977 53.1643 59.3275 53.7437L55.3603 67.2893C55.0756 68.2607 56.3569 68.8956 56.9594 68.082L68.4321 52.5832L68.4287 52.585Z"
            fill="#02677D"
        />
        <Path
            d="M89.9883 55.0632C87.6996 69.0033 75.7914 79.7031 61.3079 80.112C43.8684 80.6049 29.5964 65.9342 30.552 48.5074C31.4169 32.7409 44.4694 20.2217 60.4466 20.2217C75.3109 20.2217 87.6454 31.0595 89.9865 45.267C90.1944 46.5272 91.2829 47.4535 92.56 47.4535C94.1743 47.4535 95.399 46.0046 95.137 44.4106C91.9939 25.3269 73.4957 11.4217 52.7576 15.8156C39.4745 18.6295 29.0024 29.0513 26.1354 42.3273C21.2016 65.1722 38.4699 85.3448 60.4466 85.3448C77.8966 85.3448 92.3783 72.6282 95.1335 55.9528C95.3973 54.3536 94.1813 52.8925 92.5618 52.8925C91.2916 52.8925 90.1962 53.8066 89.99 55.0615L89.9883 55.0632Z"
            fill="#02677D"
        />
        <Path
            d="M14.0784 99.5391C14.0784 100.758 15.0549 101.751 16.2581 101.751H19.6426V102.976H16.2581C14.3888 102.976 12.8735 101.438 12.8735 99.5409C12.8735 97.6437 14.3888 96.1059 16.2581 96.1059H19.6426V97.3305H16.2581C15.0566 97.3305 14.0784 98.3215 14.0784 99.5426V99.5391Z"
            fill="#02677D"
        />
        <Path
            d="M27.0517 101.748L27.6672 102.976H26.3123L25.6933 101.748L25.0464 100.46L25.0168 100.405C24.8075 100.054 24.4257 99.8172 23.988 99.8172H22.7813V102.976H21.5747V96.1043H25.8468C26.3542 96.1043 26.8076 96.3132 27.1371 96.6476C27.4667 96.9857 27.6724 97.4511 27.6724 97.9608C27.6724 98.7111 27.2348 99.3606 26.6035 99.6508C26.4379 99.7287 26.2618 99.7818 26.0769 99.8013L27.0534 101.748H27.0517ZM25.8468 98.5943C25.9357 98.5943 26.0194 98.5784 26.0996 98.5377C26.3245 98.435 26.4658 98.2121 26.4658 97.9625C26.4658 97.7378 26.349 97.5838 26.281 97.5095C26.2007 97.4316 26.0595 97.3308 25.8468 97.3308H22.7831V98.5961H25.8468V98.5943Z"
            fill="#02677D"
        />
        <Path
            d="M36.1259 102.976H34.771L34.152 101.748L32.6768 98.8067L31.2017 101.748L30.5826 102.976H29.2278L29.8433 101.748L32.6786 96.1043L35.5138 101.748L36.1294 102.976H36.1259Z"
            fill="#02677D"
        />
        <Path
            d="M44.4502 101.744V102.969H39.2191L39.2104 102.981H37.6864L37.6951 102.969L38.628 101.744L40.2933 99.5535L41.057 98.5536L41.9812 97.3378H37.6794V96.1097H42.914L42.9175 96.1061H44.438V96.1097L43.5017 97.3378L41.8173 99.5535L41.057 100.553L40.152 101.744H44.4502Z"
            fill="#02677D"
        />
        <Path
            d="M52.7729 96.0919V96.0955L50.1521 99.5393L50.1486 99.5429L50.0039 99.7305V102.971H48.7938V99.7517L48.6333 99.5429L48.6299 99.5393L46.0091 96.0919H47.5331L49.3953 98.5394L51.2559 96.0919H52.7764H52.7729ZM46.0073 102.967H46.023L46.0073 102.989V102.967ZM52.7624 102.967H52.7746V102.983L52.7624 102.967Z"
            fill="#02677D"
        />
        <Path
            d="M59.4861 99.5394C59.4861 100.759 60.4626 101.751 61.6658 101.751H65.0503V102.976H61.6658C59.7965 102.976 58.2812 101.438 58.2812 99.5411C58.2812 97.644 59.7965 96.1061 61.6658 96.1061H65.0503V97.3308H61.6658C60.4644 97.3308 59.4861 98.3218 59.4861 99.5429V99.5394Z"
            fill="#02677D"
        />
        <Path
            d="M73.7514 96.1061V102.974H72.5448V99.8225H68.1925V102.973H66.9858V96.1043H68.1925V98.5979H72.5448V96.1061H73.7514Z"
            fill="#02677D"
        />
        <Path
            d="M82.2118 102.976H80.8569L80.2379 101.748L78.7628 98.8067L77.2876 101.748L76.6686 102.976H75.3137L75.9292 101.748L78.7645 96.1043L81.5998 101.748L82.2153 102.976H82.2118Z"
            fill="#02677D"
        />
        <Path
            d="M89.2406 101.748L89.8562 102.976H88.5013L87.8823 101.748L87.2354 100.46L87.2057 100.405C86.9965 100.054 86.6146 99.8172 86.177 99.8172H84.9703V102.976H83.7637V96.1043H88.0357C88.5432 96.1043 88.9965 96.3132 89.3261 96.6476C89.6556 96.9857 89.8614 97.4511 89.8614 97.9608C89.8614 98.7111 89.4237 99.3606 88.7925 99.6508C88.6269 99.7287 88.4507 99.7818 88.2659 99.8013L89.2424 101.748H89.2406ZM88.0357 98.5943C88.1247 98.5943 88.2084 98.5784 88.2886 98.5377C88.5135 98.435 88.6548 98.2121 88.6548 97.9625C88.6548 97.7378 88.5379 97.5838 88.4699 97.5095C88.3897 97.4316 88.2485 97.3308 88.0357 97.3308H84.9721V98.5961H88.0357V98.5943Z"
            fill="#02677D"
        />
        <Path
            d="M92.9984 99.5394C92.9984 100.759 93.9748 101.751 95.178 101.751H97.3559V100.435H95.178V99.2102H98.5625V102.976H95.178C93.3087 102.976 91.7935 101.438 91.7935 99.5411C91.7935 97.644 93.3087 96.1061 95.178 96.1061H98.5625V97.3308H95.178C93.9766 97.3308 92.9984 98.3218 92.9984 99.5429V99.5394Z"
            fill="#02677D"
        />
        <Path
            d="M102.025 97.9608V98.5979H106.38V99.8225H102.025V101.12C102.025 101.467 102.303 101.751 102.644 101.751H107.586V102.976H102.644C101.635 102.976 100.819 102.144 100.819 101.12V97.9608C100.819 96.9361 101.635 96.1043 102.644 96.1043H107.586V97.329H102.644C102.303 97.329 102.025 97.6139 102.025 97.9608Z"
            fill="#02677D"
        />
    </Svg>
);

export const TabHomeIcon = ({ color }: { color: string }) => (
    <Svg width="40" height="40" viewBox="0 0 40 40" fill={color}>
        <Path
            d="M7.5 31.6667V16.9231C7.5 16.4461 7.60671 15.9941 7.82012 15.5673C8.03354 15.1405 8.32854 14.789 8.70512 14.5129L18.1923 7.36546C18.7188 6.96374 19.3205 6.76288 19.9974 6.76288C20.6743 6.76288 21.2777 6.96374 21.8076 7.36546L31.2948 14.5129C31.6714 14.789 31.9664 15.1405 32.1798 15.5673C32.3932 15.9941 32.4999 16.4461 32.4999 16.9231V31.6667C32.4999 32.3483 32.2537 32.9353 31.7611 33.4278C31.2686 33.9204 30.6816 34.1666 30 34.1666H24.6794C24.2526 34.1666 23.8948 34.0223 23.6061 33.7335C23.3174 33.4448 23.173 33.087 23.173 32.6602V24.5192C23.173 24.0924 23.0287 23.7346 22.7399 23.4459C22.4512 23.1572 22.0934 23.0128 21.6666 23.0128H18.3333C17.9065 23.0128 17.5487 23.1572 17.26 23.4459C16.9712 23.7346 16.8269 24.0924 16.8269 24.5192V32.6602C16.8269 33.087 16.6825 33.4448 16.3938 33.7335C16.1051 34.0223 15.7473 34.1666 15.3205 34.1666H9.99996C9.31835 34.1666 8.73129 33.9204 8.23879 33.4278C7.74626 32.9353 7.5 32.3483 7.5 31.6667Z"
            fill={color}
        />
    </Svg>
);

export const TabChargingIcon = ({ color }: { color: string }) => (
    <Svg width="40" height="40" viewBox="0 0 40 40" fill={color}>
        <Path
            d="M27.564 31.5385H25.5576C25.267 31.5385 25.0507 31.4113 24.9086 31.157C24.7665 30.9028 24.7767 30.6475 24.9391 30.3912L28.4188 24.8941C28.5349 24.7404 28.6778 24.6859 28.8476 24.7308C29.0175 24.7757 29.1024 24.8999 29.1024 25.1034V28.4615H31.1088C31.3994 28.4615 31.6158 28.5887 31.7579 28.843C31.8999 29.0972 31.8898 29.3525 31.7274 29.6088L28.2476 35.1059C28.1316 35.2596 27.9887 35.3141 27.8188 35.2692C27.6489 35.2243 27.564 35.1001 27.564 34.8966V31.5385ZM13.9102 35.8333C13.4834 35.8333 13.1256 35.6889 12.8369 35.4002C12.5482 35.1114 12.4038 34.7537 12.4038 34.3269V8.57375C12.4038 8.14691 12.5482 7.78913 12.8369 7.50041C13.1256 7.21169 13.4834 7.06733 13.9102 7.06733H16.923V5.67312C16.923 5.24632 17.0673 4.88855 17.3561 4.59983C17.6448 4.31108 18.0026 4.1667 18.4294 4.1667H21.5704C21.9972 4.1667 22.355 4.31108 22.6437 4.59983C22.9324 4.88855 23.0768 5.24632 23.0768 5.67312V7.06733H26.0929C26.5202 7.06733 26.8775 7.21169 27.1649 7.50041C27.4523 7.78913 27.596 8.14691 27.596 8.57375V19.1955C27.596 19.4663 27.5036 19.7001 27.3188 19.897C27.1339 20.0939 26.9048 20.2201 26.6313 20.2757C25.5394 20.4573 24.5255 20.7991 23.5896 21.3013C22.6537 21.8034 21.8243 22.4359 21.1014 23.1987C20.2752 24.0705 19.6179 25.0812 19.1297 26.2308C18.6415 27.3803 18.3974 28.6207 18.3974 29.9519C18.3974 30.6822 18.4732 31.3882 18.6249 32.0698C18.7766 32.7514 19.0041 33.4087 19.3076 34.0416C19.4977 34.4711 19.4844 34.8771 19.2675 35.2595C19.0506 35.642 18.7274 35.8333 18.298 35.8333H13.9102Z"
            fill={color}
        />
    </Svg>
);

export const TabAccountIcon = ({ color }: { color: string }) => (
    <Svg width="40" height="40" viewBox="0 0 40 40" fill={color}>
        <Path
            d="M20 19.4871C18.391 19.4871 17.0166 18.9172 15.8766 17.7772C14.7366 16.6373 14.1667 15.2628 14.1667 13.6539C14.1667 12.0449 14.7366 10.6704 15.8766 9.5305C17.0166 8.39056 18.391 7.82059 20 7.82059C21.6089 7.82059 22.9834 8.39056 24.1233 9.5305C25.2633 10.6704 25.8333 12.0449 25.8333 13.6539C25.8333 15.2628 25.2633 16.6373 24.1233 17.7772C22.9834 18.9172 21.6089 19.4871 20 19.4871ZM7.5 29.6474V28.4743C7.5 27.6581 7.72169 26.9023 8.16508 26.2068C8.60844 25.5113 9.20085 24.9765 9.94229 24.6026C11.5897 23.7949 13.2516 23.1891 14.9279 22.7853C16.6042 22.3815 18.2948 22.1795 20 22.1795C21.7051 22.1795 23.3958 22.3815 25.072 22.7853C26.7483 23.1891 28.4102 23.7949 30.0576 24.6026C30.7991 24.9765 31.3915 25.5113 31.8348 26.2068C32.2782 26.9023 32.4999 27.6581 32.4999 28.4743V29.6474C32.4999 30.3504 32.2537 30.9481 31.7611 31.4406C31.2686 31.9332 30.6709 32.1794 29.9679 32.1794H10.032C9.32903 32.1794 8.73129 31.9332 8.23879 31.4406C7.74626 30.9481 7.5 30.3504 7.5 29.6474Z"
            fill={color}
        />
    </Svg>
);

export const BellIconSvg = () => (
    <Svg width="20" height="26" viewBox="0 0 20 26" fill="none">
        <Path
            d="M1 22.1795C0.716667 22.1795 0.479167 22.0836 0.2875 21.8919C0.0958333 21.7001 0 21.4625 0 21.1791C0 20.8956 0.0958333 20.6582 0.2875 20.4667C0.479167 20.2753 0.716667 20.1795 1 20.1795H2.41027V10.2308C2.41027 8.43762 2.96368 6.85215 4.0705 5.47438C5.17734 4.0966 6.59829 3.21541 8.33333 2.83081V2.00004C8.33333 1.53709 8.49522 1.14358 8.819 0.819509C9.14278 0.49542 9.53593 0.333374 9.99847 0.333374C10.461 0.333374 10.8547 0.49542 11.1794 0.819509C11.5042 1.14358 11.6666 1.53709 11.6666 2.00004V2.83081C13.4016 3.21541 14.8226 4.0966 15.9294 5.47438C17.0363 6.85215 17.5897 8.43762 17.5897 10.2308V20.1795H18.9999C19.2833 20.1795 19.5208 20.2754 19.7124 20.4671C19.9041 20.6589 19.9999 20.8965 19.9999 21.1799C19.9999 21.4634 19.9041 21.7009 19.7124 21.8923C19.5208 22.0838 19.2833 22.1795 18.9999 22.1795H1ZM9.9977 25.923C9.33426 25.923 8.76707 25.687 8.29613 25.215C7.8252 24.743 7.58973 24.1756 7.58973 23.5128H12.4102C12.4102 24.1778 12.174 24.7457 11.7015 25.2166C11.2291 25.6876 10.6611 25.923 9.9977 25.923ZM4.4102 20.1795H15.5897V10.2308C15.5897 8.68717 15.044 7.36965 13.9525 6.27821C12.8611 5.18674 11.5436 4.64101 9.99997 4.64101C8.45637 4.64101 7.13884 5.18674 6.0474 6.27821C4.95593 7.36965 4.4102 8.68717 4.4102 10.2308V20.1795Z"
            fill="#888888"
        />
    </Svg>
);

export const CheckMarkLogoSvg = () => (
    <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
        <Rect width="20" height="20" rx="10" fill="#02677D" />
        <Path
            d="M7.95837 15L3.20837 10.25L4.39587 9.06251L7.95837 12.625L15.6042 4.97917L16.7917 6.16667L7.95837 15Z"
            fill="white"
        />
    </Svg>
);

export const CrossLogoSvg = () => (
    <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <Path
            d="M2.33333 23.3333L0 21L9.33333 11.6667L0 2.33333L2.33333 0L11.6667 9.33333L21 0L23.3333 2.33333L14 11.6667L23.3333 21L21 23.3333L11.6667 14L2.33333 23.3333Z"
            fill="#222222"
        />
    </Svg>
);

export const ArrowIconSvg = () => (
    <Svg width="8" height="12" viewBox="0 0 8 12" fill="none">
        <Path
            d="M0.6 6L6.6 -6.11959e-08L8 1.4L3.4 6L8 10.6L6.6 12L0.6 6Z"
            fill="#888888"
        />
    </Svg>
);

export const DirectionLogoSvg = () => (
    <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
        <Path
            d="M6.87502 12.2917H8.12498V9.79166H11.4584V11.5785L13.8702 9.16668L11.4584 6.74685V8.5417H7.62821C7.41481 8.5417 7.23592 8.61358 7.09156 8.75733C6.9472 8.90108 6.87502 9.0792 6.87502 9.29168V12.2917ZM10.0016 17.8045C9.81357 17.8045 9.62831 17.7668 9.44581 17.6915C9.26331 17.6162 9.09655 17.5032 8.94552 17.3525L2.64748 11.0545C2.49684 10.9041 2.38386 10.738 2.30854 10.5562C2.23321 10.3745 2.19554 10.1896 2.19554 10.0016C2.19554 9.81358 2.23321 9.62833 2.30854 9.44583C2.38386 9.26333 2.49684 9.09656 2.64748 8.94554L8.94552 2.64749C9.09594 2.49686 9.26202 2.38388 9.44377 2.30856C9.62552 2.23322 9.8104 2.19556 9.99842 2.19556C10.1864 2.19556 10.3717 2.23322 10.5542 2.30856C10.7367 2.38388 10.9035 2.49686 11.0545 2.64749L17.3525 8.94554C17.5032 9.09595 17.6161 9.26204 17.6915 9.44379C17.7668 9.62554 17.8045 9.81042 17.8045 9.99843C17.8045 10.1864 17.7668 10.3717 17.6915 10.5542C17.6161 10.7367 17.5032 10.9035 17.3525 11.0545L11.0545 17.3525C10.9041 17.5032 10.738 17.6162 10.5562 17.6915C10.3745 17.7668 10.1896 17.8045 10.0016 17.8045ZM6.66667 13.3333L9.82371 16.4904C9.87179 16.5385 9.93056 16.5625 10 16.5625C10.0694 16.5625 10.1282 16.5385 10.1763 16.4904L16.4904 10.1763C16.5385 10.1282 16.5625 10.0695 16.5625 10C16.5625 9.93057 16.5385 9.87181 16.4904 9.82372L10.1763 3.50964C10.1282 3.46156 10.0694 3.43752 10 3.43752C9.93056 3.43752 9.87179 3.46156 9.82371 3.50964L3.50962 9.82372C3.46154 9.87181 3.4375 9.93057 3.4375 10C3.4375 10.0695 3.46154 10.1282 3.50962 10.1763L6.66667 13.3333Z"
            fill="black"
        />
    </Svg>
);

export const PreviousPageSvg = () => (
    <Svg width="28" height="28" viewBox="0 0 28 28" fill="none">
        <Path
            d="M7.04166 15.6667L16.375 25L14 27.3334L0.666656 14L14 0.666687L16.375 3.00002L7.04166 12.3334H27.3333V15.6667H7.04166Z"
            fill="white"
        />
    </Svg>
);

export const PreviousPageBlackSvg = () => (
    <Svg width="28" height="28" viewBox="0 0 28 28" fill="none">
        <Path
            d="M7.04167 15.6667L16.375 25L14 27.3334L0.666672 14L14 0.666687L16.375 3.00002L7.04167 12.3334H27.3333V15.6667H7.04167Z"
            fill="black"
        />
    </Svg>
);

export const StarSvg = () => (
    <Svg width="16" height="15" viewBox="0 0 16 15" fill="none">
        <Path
            d="M3.32507 14.9663L4.56544 9.65284L0.442368 6.08167L5.87314 5.61052L8.00007 0.600891L10.127 5.61052L15.5578 6.08167L11.4347 9.65284L12.6751 14.9663L8.00007 12.1451L3.32507 14.9663Z"
            fill="white"
        />
    </Svg>
);
export const TickLogoSvg = () => (
    <Svg width="40" height="40" viewBox="0 0 40 40" fill="none">
        <Rect width="40" height="40" rx="20" fill="#02677D" />
        <Path
            d="M15.9169 30L6.41687 20.5L8.79187 18.125L15.9169 25.25L31.2085 9.95837L33.5835 12.3334L15.9169 30Z"
            fill="#FAFAFA"
        />
    </Svg>
);