|
| 1 | +import * as React from 'react' |
| 2 | +import styles from './Icons.module.css' |
| 3 | +import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants' |
| 4 | + |
| 5 | +const GearUserIcon = ({ |
| 6 | + color = MAIN_DARK_BLUE, |
| 7 | + size = MEDIUM, |
| 8 | + disabled = false, |
| 9 | + inactive = false |
| 10 | +}) => { |
| 11 | + let className = `${styles.svgClassName} ` + styles[`${color}`] |
| 12 | + if (disabled) { |
| 13 | + className += ` ${styles.iconDisabled}` |
| 14 | + } |
| 15 | + if (inactive) { |
| 16 | + className += ` ${styles.iconInactive}` |
| 17 | + } |
| 18 | + let icon = <></> |
| 19 | + |
| 20 | + switch (size) { |
| 21 | + case SMALL: |
| 22 | + icon = ( |
| 23 | + <svg |
| 24 | + width={16} |
| 25 | + height={16} |
| 26 | + viewBox='0 0 16 16' |
| 27 | + fill='none' |
| 28 | + xmlns='http://www.w3.org/2000/svg' |
| 29 | + className={className} |
| 30 | + > |
| 31 | + <path d='M8.00073 10.3287C9.25541 10.3287 10.2725 9.32868 10.2725 8.09503C10.2725 6.86139 9.25541 5.86133 8.00073 5.86133' stroke='none' strokeLinecap='round' strokeLinejoin='round' /> |
| 32 | + <path d='M10.3395 12.3193C10.472 12.2738 10.62 12.3105 10.7153 12.4117L11.1529 12.8749C11.2829 13.0129 11.5017 13.0243 11.6459 12.9002L12.9009 11.8207C13.0502 11.6929 13.063 11.4689 12.9305 11.3246L12.386 10.7336C12.2998 10.6412 12.2714 10.5109 12.3113 10.3919L12.646 9.38325C12.6936 9.24024 12.8301 9.1428 12.9832 9.1428H13.6461C13.8418 9.1428 14.0001 8.98713 14.0001 8.79477V7.32926C14.0001 7.13689 13.8418 6.98123 13.6461 6.98123H13.0154C12.8777 6.98123 12.7515 6.9015 12.6936 6.77874L12.2817 5.9055C12.2212 5.77895 12.2444 5.62835 12.341 5.52457L12.9485 4.86901C13.0733 4.73487 13.072 4.52858 12.9446 4.3957L11.8042 3.20861C11.6639 3.0618 11.4271 3.06307 11.2881 3.20987L10.8157 3.7085C10.7179 3.81228 10.566 3.84645 10.4321 3.79709L9.44875 3.43134C9.31103 3.38072 9.21964 3.25037 9.21964 3.1061V2.34803C9.21964 2.15566 9.06132 2 8.86568 2H7.13447C6.93883 2 6.78051 2.15566 6.78051 2.34803V3.1061C6.78051 3.25037 6.68912 3.38072 6.5514 3.43134L5.56803 3.79709C5.43416 3.84645 5.28228 3.81228 5.18446 3.7085L4.71208 3.20987C4.57307 3.06307 4.33623 3.06307 4.19594 3.20861L3.05553 4.3957C2.9281 4.52731 2.92682 4.73487 3.05167 4.86901' stroke='none' strokeLinecap='round' strokeLinejoin='round' /> |
| 33 | + <path d='M5.5 11.3999C3.567 11.3999 2 12.6535 2 14.1999H9C9 12.6535 7.433 11.3999 5.5 11.3999Z' stroke='none' strokeLinejoin='round' /> |
| 34 | + <circle cx='5.50015' cy='7.90005' r='2.1' stroke='none' /> |
| 35 | + </svg> |
| 36 | + ) |
| 37 | + break |
| 38 | + case MEDIUM: |
| 39 | + icon = ( |
| 40 | + <svg |
| 41 | + width={24} |
| 42 | + height={24} |
| 43 | + viewBox='0 0 24 24' |
| 44 | + fill='none' |
| 45 | + xmlns='http://www.w3.org/2000/svg' |
| 46 | + className={className} |
| 47 | + > |
| 48 | + <path d='M12.001 15.4929C13.883 15.4929 15.4087 13.9928 15.4087 12.1423C15.4087 10.2918 13.883 8.79175 12.001 8.79175' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' /> |
| 49 | + <path d='M15.5092 18.479C15.708 18.4107 15.9301 18.4657 16.0729 18.6176L16.7294 19.3124C16.9244 19.5193 17.2526 19.5364 17.4688 19.3503L19.3513 17.7311C19.5752 17.5393 19.5946 17.2033 19.3957 16.9869L18.579 16.1004C18.4496 15.9618 18.4072 15.7663 18.467 15.5879L18.969 14.0749C19.0404 13.8604 19.2451 13.7142 19.4749 13.7142H20.4692C20.7626 13.7142 21.0001 13.4807 21.0001 13.1922V10.9939C21.0001 10.7053 20.7626 10.4718 20.4692 10.4718H19.5231C19.3165 10.4718 19.1273 10.3522 19.0404 10.1681L18.4226 8.85826C18.3319 8.66842 18.3666 8.44252 18.5114 8.28686L19.4227 7.30352C19.61 7.1023 19.6081 6.79287 19.4169 6.59355L17.7063 4.81291C17.4959 4.5927 17.1406 4.5946 16.9321 4.81481L16.2235 5.56275C16.0768 5.71841 15.849 5.76967 15.6482 5.69563L14.1731 5.14702C13.9665 5.07108 13.8295 4.87555 13.8295 4.65914V3.52204C13.8295 3.23349 13.592 3 13.2985 3H10.7017C10.4082 3 10.1708 3.23349 10.1708 3.52204V4.65914C10.1708 4.87555 10.0337 5.07108 9.8271 5.14702L8.35204 5.69563C8.15124 5.76967 7.92342 5.71841 7.77669 5.56275L7.06812 4.81481C6.8596 4.5946 6.50435 4.5946 6.2939 4.81291L4.58329 6.59355C4.39215 6.79097 4.39022 7.1023 4.5775 7.30352' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' /> |
| 50 | + <path d='M8.25 17.1001C5.35051 17.1001 3 18.9805 3 21.3001H13.5C13.5 18.9805 11.1495 17.1001 8.25 17.1001Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' /> |
| 51 | + <circle cx='8.2501' cy='11.8502' r='3.15' stroke='none' strokeWidth={1.5} /> |
| 52 | + </svg> |
| 53 | + ) |
| 54 | + break |
| 55 | + case LARGE: |
| 56 | + icon = ( |
| 57 | + <svg |
| 58 | + width={40} |
| 59 | + height={40} |
| 60 | + viewBox='0 0 40 40' |
| 61 | + fill='none' |
| 62 | + xmlns='http://www.w3.org/2000/svg' |
| 63 | + className={className} |
| 64 | + > |
| 65 | + <path d='M20.002 25.8216C23.1387 25.8216 25.6815 23.3214 25.6815 20.2373C25.6815 17.1532 23.1387 14.6531 20.002 14.6531' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' /> |
| 66 | + <path d='M25.8486 30.7984C26.1801 30.6845 26.5501 30.7762 26.7882 31.0293L27.8823 32.1873C28.2073 32.5322 28.7543 32.5606 29.1147 32.2506L32.2521 29.5518C32.6254 29.2322 32.6576 28.6722 32.3262 28.3115L30.965 26.834C30.7494 26.603 30.6786 26.2772 30.7784 25.9798L31.615 23.4581C31.7341 23.1006 32.0752 22.857 32.4581 22.857H34.1153C34.6044 22.857 35.0002 22.4678 35.0002 21.9869V18.3231C35.0002 17.8422 34.6044 17.4531 34.1153 17.4531H32.5385C32.1942 17.4531 31.8789 17.2537 31.7341 16.9468L30.7044 14.7638C30.5531 14.4474 30.611 14.0709 30.8524 13.8114L32.3712 12.1725C32.6833 11.8372 32.6801 11.3215 32.3615 10.9892L29.5105 8.02151C29.1598 7.6545 28.5677 7.65767 28.2202 8.02468L27.0392 9.27125C26.7947 9.53069 26.415 9.61611 26.0803 9.49272L23.6219 8.57836C23.2776 8.4518 23.0491 8.12592 23.0491 7.76524V5.87007C23.0491 5.38916 22.6533 5 22.1642 5H17.8362C17.3471 5 16.9513 5.38916 16.9513 5.87007V7.76524C16.9513 8.12592 16.7228 8.4518 16.3785 8.57836L13.9201 9.49272C13.5854 9.61611 13.2057 9.53069 12.9611 9.27125L11.7802 8.02468C11.4327 7.65767 10.8406 7.65767 10.4898 8.02151L7.63882 10.9892C7.32026 11.3183 7.31704 11.8372 7.62917 12.1725' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' /> |
| 67 | + <path d='M13.75 28.5C8.91751 28.5 5 31.634 5 35.5H22.5C22.5 31.634 18.5825 28.5 13.75 28.5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' /> |
| 68 | + <circle cx='13.7505' cy='19.7505' r='5.25' stroke='none' strokeWidth={2} /> |
| 69 | + </svg> |
| 70 | + ) |
| 71 | + break |
| 72 | + |
| 73 | + default: |
| 74 | + break |
| 75 | + } |
| 76 | + return icon |
| 77 | +} |
| 78 | + |
| 79 | +export default GearUserIcon |
0 commit comments