Skip to content

Commit

Permalink
refactor: extract path
Browse files Browse the repository at this point in the history
  • Loading branch information
@nunocaseiro
nunocaseiro committed Apr 27, 2022
1 parent b0419c9 commit 79e2d7e
Showing 1 changed file with 12 additions and 18 deletions.
30 changes: 12 additions & 18 deletions frontend/components/icons/Info.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,15 @@ interface InfoIconProps {
css?: CSS;
}

const path = (
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C21.993 17.52 17.52 21.993 12.001 22H12ZM12 4C7.582 4 4 7.582 4 12C4 16.418 7.582 20 12 20C16.418 20 20 16.418 20 12C19.995 7.584 16.416 4.005 12 4H11.999H12ZM13 16V12C13 11.448 12.552 11 12 11C11.448 11 11 11.448 11 12V16C11 16.552 11.448 17 12 17C12.552 17 13 16.552 13 16ZM12.19 8.98C12.261 8.969 12.325 8.948 12.384 8.918L12.381 8.92C12.446 8.899 12.503 8.868 12.552 8.829L12.551 8.83C12.611 8.794 12.664 8.754 12.712 8.709L12.711 8.71C12.799 8.617 12.87 8.508 12.919 8.387L12.921 8.38C12.972 8.268 13.001 8.138 13.001 8C13.001 7.862 12.972 7.732 12.919 7.614L12.921 7.62C12.87 7.492 12.799 7.383 12.711 7.29C12.664 7.246 12.611 7.206 12.555 7.172L12.551 7.17C12.503 7.132 12.446 7.101 12.385 7.081L12.381 7.08C12.326 7.051 12.262 7.03 12.194 7.02H12.191C12.132 7.006 12.065 6.997 11.996 6.997C11.927 6.997 11.86 7.005 11.795 7.021L11.801 7.02C11.733 7.032 11.673 7.053 11.617 7.082L11.621 7.08C11.552 7.104 11.492 7.134 11.438 7.172L11.441 7.17C11.385 7.21 11.336 7.249 11.29 7.291L11.291 7.29C11.203 7.383 11.132 7.492 11.083 7.613L11.081 7.62C11.03 7.732 11.001 7.862 11.001 8C11.001 8.138 11.03 8.268 11.083 8.386L11.081 8.38C11.222 8.746 11.57 9 11.978 9C11.986 9 11.994 9 12.002 9H12.001C12.07 8.998 12.135 8.991 12.199 8.979L12.191 8.98H12.19Z"
fill="currentColor"
/>
);

const InfoIcon: React.FC<InfoIconProps> = ({ size, css }) => {
InfoIcon.defaultProps = {
css: undefined,
Expand All @@ -21,12 +30,7 @@ const InfoIcon: React.FC<InfoIconProps> = ({ size, css }) => {
xmlns="http://www.w3.org/2000/svg"
css={css}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.00033 12.8333C3.77858 12.8333 1.16699 10.2217 1.16699 6.99996C1.16699 3.77821 3.77858 1.16663 7.00033 1.16663C10.2221 1.16663 12.8337 3.77821 12.8337 6.99996C12.8296 10.22 10.2203 12.8292 7.00091 12.8333H7.00033ZM7.00033 2.33329C4.42316 2.33329 2.33366 4.42279 2.33366 6.99996C2.33366 9.57713 4.42316 11.6666 7.00033 11.6666C9.57749 11.6666 11.667 9.57713 11.667 6.99996C11.6641 4.42396 9.57633 2.33621 7.00033 2.33329H6.99974H7.00033ZM7.58366 9.33329V6.99996C7.58366 6.67796 7.32233 6.41663 7.00033 6.41663C6.67833 6.41663 6.41699 6.67796 6.41699 6.99996V9.33329C6.41699 9.65529 6.67833 9.91663 7.00033 9.91663C7.32233 9.91663 7.58366 9.65529 7.58366 9.33329ZM7.11116 5.23829C7.15258 5.23188 7.18991 5.21963 7.22433 5.20213L7.22258 5.20329C7.26049 5.19104 7.29374 5.17296 7.32233 5.15021L7.32174 5.15079C7.35674 5.12979 7.38766 5.10646 7.41566 5.08021L7.41508 5.08079C7.46641 5.02654 7.50783 4.96296 7.53641 4.89238L7.53758 4.88829C7.56733 4.82296 7.58424 4.74713 7.58424 4.66663C7.58424 4.58613 7.56733 4.51029 7.53641 4.44146L7.53758 4.44496C7.50783 4.37029 7.46641 4.30671 7.41508 4.25246C7.38766 4.22679 7.35674 4.20346 7.32408 4.18363L7.32174 4.18246C7.29374 4.16029 7.26049 4.14221 7.22491 4.13054L7.22258 4.12996C7.19049 4.11304 7.15316 4.10079 7.11349 4.09496H7.11174C7.07733 4.08679 7.03824 4.08154 6.99799 4.08154C6.95774 4.08154 6.91866 4.08621 6.88074 4.09554L6.88424 4.09496C6.84458 4.10196 6.80958 4.11421 6.77691 4.13113L6.77924 4.12996C6.73899 4.14396 6.70399 4.16146 6.67249 4.18363L6.67424 4.18246C6.64158 4.20579 6.61299 4.22854 6.58616 4.25304L6.58674 4.25246C6.53541 4.30671 6.49399 4.37029 6.46541 4.44088L6.46424 4.44496C6.43449 4.51029 6.41758 4.58613 6.41758 4.66663C6.41758 4.74713 6.43449 4.82296 6.46541 4.89179L6.46424 4.88829C6.54649 5.10179 6.74949 5.24996 6.98749 5.24996C6.99216 5.24996 6.99683 5.24996 7.00149 5.24996H7.00091C7.04116 5.24879 7.07908 5.24471 7.11641 5.23771L7.11174 5.23829H7.11116Z"
fill="currentColor"
/>
{path}
</Svg>
);
}
Expand All @@ -39,23 +43,13 @@ const InfoIcon: React.FC<InfoIconProps> = ({ size, css }) => {
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8.00016 14.6667C4.31816 14.6667 1.3335 11.682 1.3335 8C1.3335 4.318 4.31816 1.33333 8.00016 1.33333C11.6822 1.33333 14.6668 4.318 14.6668 8C14.6622 11.68 11.6802 14.662 8.00083 14.6667H8.00016ZM8.00016 2.66666C5.05483 2.66666 2.66683 5.05466 2.66683 8C2.66683 10.9453 5.05483 13.3333 8.00016 13.3333C10.9455 13.3333 13.3335 10.9453 13.3335 8C13.3302 5.056 10.9442 2.67 8.00016 2.66666H7.9995H8.00016ZM8.66683 10.6667V8C8.66683 7.632 8.36816 7.33333 8.00016 7.33333C7.63216 7.33333 7.3335 7.632 7.3335 8V10.6667C7.3335 11.0347 7.63216 11.3333 8.00016 11.3333C8.36816 11.3333 8.66683 11.0347 8.66683 10.6667ZM8.12683 5.98666C8.17416 5.97933 8.21683 5.96533 8.25616 5.94533L8.25416 5.94666C8.2975 5.93266 8.3355 5.912 8.36816 5.886L8.3675 5.88666C8.4075 5.86266 8.44283 5.836 8.47483 5.806L8.47416 5.80666C8.53283 5.74466 8.58016 5.672 8.61283 5.59133L8.61416 5.58666C8.64816 5.512 8.6675 5.42533 8.6675 5.33333C8.6675 5.24133 8.64816 5.15466 8.61283 5.076L8.61416 5.08C8.58016 4.99466 8.53283 4.922 8.47416 4.86C8.44283 4.83066 8.4075 4.804 8.37016 4.78133L8.3675 4.78C8.3355 4.75466 8.2975 4.734 8.25683 4.72066L8.25416 4.72C8.2175 4.70066 8.17483 4.68666 8.1295 4.68H8.1275C8.08816 4.67066 8.0435 4.66466 7.9975 4.66466C7.9515 4.66466 7.90683 4.67 7.8635 4.68066L7.8675 4.68C7.82216 4.688 7.78216 4.702 7.74483 4.72133L7.7475 4.72C7.7015 4.736 7.6615 4.756 7.6255 4.78133L7.6275 4.78C7.59016 4.80666 7.5575 4.83266 7.52683 4.86066L7.5275 4.86C7.46883 4.922 7.4215 4.99466 7.38883 5.07533L7.3875 5.08C7.3535 5.15466 7.33416 5.24133 7.33416 5.33333C7.33416 5.42533 7.3535 5.512 7.38883 5.59066L7.3875 5.58666C7.4815 5.83066 7.7135 6 7.9855 6C7.99083 6 7.99616 6 8.0015 6H8.00083C8.04683 5.99866 8.09016 5.994 8.13283 5.986L8.1275 5.98666H8.12683Z"
fill="#2F3742"
/>
{path}
</Svg>
);
}
return (
<Svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C21.993 17.52 17.52 21.993 12.001 22H12ZM12 4C7.582 4 4 7.582 4 12C4 16.418 7.582 20 12 20C16.418 20 20 16.418 20 12C19.995 7.584 16.416 4.005 12 4H11.999H12ZM13 16V12C13 11.448 12.552 11 12 11C11.448 11 11 11.448 11 12V16C11 16.552 11.448 17 12 17C12.552 17 13 16.552 13 16ZM12.19 8.98C12.261 8.969 12.325 8.948 12.384 8.918L12.381 8.92C12.446 8.899 12.503 8.868 12.552 8.829L12.551 8.83C12.611 8.794 12.664 8.754 12.712 8.709L12.711 8.71C12.799 8.617 12.87 8.508 12.919 8.387L12.921 8.38C12.972 8.268 13.001 8.138 13.001 8C13.001 7.862 12.972 7.732 12.919 7.614L12.921 7.62C12.87 7.492 12.799 7.383 12.711 7.29C12.664 7.246 12.611 7.206 12.555 7.172L12.551 7.17C12.503 7.132 12.446 7.101 12.385 7.081L12.381 7.08C12.326 7.051 12.262 7.03 12.194 7.02H12.191C12.132 7.006 12.065 6.997 11.996 6.997C11.927 6.997 11.86 7.005 11.795 7.021L11.801 7.02C11.733 7.032 11.673 7.053 11.617 7.082L11.621 7.08C11.552 7.104 11.492 7.134 11.438 7.172L11.441 7.17C11.385 7.21 11.336 7.249 11.29 7.291L11.291 7.29C11.203 7.383 11.132 7.492 11.083 7.613L11.081 7.62C11.03 7.732 11.001 7.862 11.001 8C11.001 8.138 11.03 8.268 11.083 8.386L11.081 8.38C11.222 8.746 11.57 9 11.978 9C11.986 9 11.994 9 12.002 9H12.001C12.07 8.998 12.135 8.991 12.199 8.979L12.191 8.98H12.19Z"
fill="currentColor"
/>
{path}
</Svg>
);
};
Expand Down

0 comments on commit 79e2d7e

Please sign in to comment.