add 12px help Icon

Giveth · Dec 30, 2021 · d3fc1f4 · d3fc1f4
1 parent 8523141
commit d3fc1f4
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/src/components/icons/Help.tsx b/src/components/icons/Help.tsx
@@ -2,19 +2,25 @@ import React, { FC } from "react";
 import { IIconProps } from "./type";
 
 export const IconHelp: FC<IIconProps> = ({ size = 16, color='white' }) => {
+    const size12 = <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12ZM6.85575 6.05624L7.038 5.92799C7.3485 5.71199 7.5645 5.51624 7.686 5.34074C7.812 5.16524 7.875 4.95599 7.875 4.71299C7.875 4.53299 7.8345 4.36649 7.7535 4.21349C7.6725 4.06049 7.56 3.92774 7.416 3.81524C7.2765 3.70274 7.10775 3.61499 6.90975 3.55199C6.71625 3.48899 6.507 3.45749 6.282 3.45749C5.895 3.45749 5.54625 3.55199 5.23575 3.74099C5.05537 3.84974 4.90236 3.98195 4.77671 4.13762C4.6314 4.31764 4.73158 4.57125 4.94502 4.66051C5.14286 4.74324 5.36477 4.64834 5.52397 4.50466C5.57193 4.46138 5.62436 4.42282 5.68125 4.38899C5.85225 4.28549 6.04125 4.23374 6.24825 4.23374C6.45525 4.23374 6.62625 4.28549 6.76125 4.38899C6.90075 4.48799 6.9705 4.61399 6.9705 4.76699C6.9705 4.86599 6.939 4.96049 6.876 5.05049C6.813 5.13599 6.71175 5.22824 6.57225 5.32724L6.228 5.57699C6.0165 5.73449 5.8725 5.90324 5.796 6.08324C5.75313 6.1841 5.7251 6.30546 5.71191 6.4473C5.69256 6.65527 5.87142 6.81899 6.08029 6.81899C6.30188 6.81899 6.46018 6.6277 6.5409 6.42135C6.54645 6.40718 6.5524 6.39347 6.55875 6.38024C6.61725 6.26324 6.71625 6.15524 6.85575 6.05624ZM6.4845 7.37924C6.381 7.27124 6.25275 7.21724 6.09975 7.21724C5.95125 7.21724 5.823 7.27124 5.715 7.37924C5.607 7.48724 5.553 7.61774 5.553 7.77074C5.553 7.91924 5.607 8.04749 5.715 8.15549C5.823 8.26349 5.95125 8.31749 6.09975 8.31749C6.25275 8.31749 6.381 8.26349 6.4845 8.15549C6.5925 8.04749 6.6465 7.91924 6.6465 7.77074C6.6465 7.61774 6.5925 7.48724 6.4845 7.37924Z" fill={color}/>
+    </svg>
+
     const size16 = <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM9.141 8.07499L9.384 7.90399C9.798 7.61599 10.086 7.35499 10.248 7.12099C10.416 6.88699 10.5 6.60799 10.5 6.28399C10.5 6.04399 10.446 5.82199 10.338 5.61799C10.23 5.41399 10.08 5.23699 9.888 5.08699C9.702 4.93699 9.477 4.81999 9.213 4.73599C8.955 4.65199 8.676 4.60999 8.376 4.60999C7.86 4.60999 7.395 4.73599 6.981 4.98799C6.7405 5.13299 6.53648 5.30927 6.36895 5.51682C6.1752 5.75686 6.30877 6.095 6.59336 6.21401C6.85715 6.32432 7.15303 6.19778 7.36529 6.00622C7.42924 5.9485 7.49914 5.89709 7.575 5.85199C7.803 5.71399 8.055 5.64499 8.331 5.64499C8.607 5.64499 8.835 5.71399 9.015 5.85199C9.201 5.98399 9.294 6.15199 9.294 6.35599C9.294 6.48799 9.252 6.61399 9.168 6.73399C9.084 6.84799 8.949 6.97099 8.763 7.10299L8.304 7.43599C8.022 7.64599 7.83 7.87099 7.728 8.11099C7.67084 8.24547 7.63347 8.40728 7.61588 8.5964C7.59008 8.87369 7.82856 9.09199 8.10705 9.09199C8.4025 9.09199 8.61357 8.83694 8.72121 8.56179C8.7286 8.5429 8.73653 8.52463 8.745 8.50699C8.823 8.35099 8.955 8.20699 9.141 8.07499ZM8.646 9.83899C8.508 9.69499 8.337 9.62299 8.133 9.62299C7.935 9.62299 7.764 9.69499 7.62 9.83899C7.476 9.98299 7.404 10.157 7.404 10.361C7.404 10.559 7.476 10.73 7.62 10.874C7.764 11.018 7.935 11.09 8.133 11.09C8.337 11.09 8.508 11.018 8.646 10.874C8.79 10.73 8.862 10.559 8.862 10.361C8.862 10.157 8.79 9.98299 8.646 9.83899Z" fill={color}/>
     </svg>
-    
+
     const size24 = <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM13.2836 12.0844L13.557 11.892C14.0227 11.568 14.3467 11.2744 14.529 11.0111C14.718 10.7479 14.8125 10.434 14.8125 10.0695C14.8125 9.79948 14.7517 9.54973 14.6302 9.32023C14.5087 9.09073 14.34 8.89161 14.124 8.72286C13.9147 8.55411 13.6616 8.42248 13.3646 8.32798C13.0744 8.23348 12.7605 8.18623 12.423 8.18623C11.8425 8.18623 11.3194 8.32798 10.8536 8.61148C10.5831 8.77462 10.3535 8.97293 10.1651 9.20642C9.9471 9.47646 10.0974 9.85687 10.4175 9.99076C10.7143 10.1149 11.0472 9.9725 11.286 9.75699C11.3579 9.69206 11.4365 9.63423 11.5219 9.58348C11.7784 9.42823 12.0619 9.35061 12.3724 9.35061C12.6829 9.35061 12.9394 9.42823 13.1419 9.58348C13.3511 9.73198 13.4557 9.92098 13.4557 10.1505C13.4557 10.299 13.4085 10.4407 13.314 10.5757C13.2195 10.704 13.0676 10.8424 12.8584 10.9909L12.342 11.3655C12.0247 11.6017 11.8087 11.8549 11.694 12.1249C11.6297 12.2762 11.5877 12.4582 11.5679 12.671C11.5388 12.9829 11.8071 13.2285 12.1204 13.2285C12.4528 13.2285 12.6903 12.9416 12.8114 12.632C12.8197 12.6108 12.8286 12.5902 12.8381 12.5704C12.9259 12.3949 13.0744 12.2329 13.2836 12.0844ZM12.7267 14.0689C12.5715 13.9069 12.3791 13.8259 12.1496 13.8259C11.9269 13.8259 11.7345 13.9069 11.5725 14.0689C11.4105 14.2309 11.3295 14.4266 11.3295 14.6561C11.3295 14.8789 11.4105 15.0712 11.5725 15.2332C11.7345 15.3952 11.9269 15.4762 12.1496 15.4762C12.3791 15.4762 12.5715 15.3952 12.7267 15.2332C12.8887 15.0712 12.9697 14.8789 12.9697 14.6561C12.9697 14.4266 12.8887 14.2309 12.7267 14.0689Z" fill={color}/>
     </svg>
-    
+
     const size32 = <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26ZM17.4262 16.0937L17.73 15.88C18.2475 15.52 18.6075 15.1937 18.81 14.9012C19.02 14.6087 19.125 14.26 19.125 13.855C19.125 13.555 19.0575 13.2775 18.9225 13.0225C18.7875 12.7675 18.6 12.5462 18.36 12.3587C18.1275 12.1712 17.8462 12.025 17.5162 11.92C17.1937 11.815 16.845 11.7625 16.47 11.7625C15.825 11.7625 15.2437 11.92 14.7262 12.235C14.4256 12.4162 14.1706 12.6366 13.9612 12.896C13.719 13.1961 13.886 13.6187 14.2417 13.7675C14.5714 13.9054 14.9413 13.7472 15.2066 13.5078C15.2865 13.4356 15.3739 13.3714 15.4687 13.315C15.7537 13.1425 16.0687 13.0562 16.4137 13.0562C16.7587 13.0562 17.0437 13.1425 17.2687 13.315C17.5012 13.48 17.6175 13.69 17.6175 13.945C17.6175 14.11 17.565 14.2675 17.46 14.4175C17.355 14.56 17.1862 14.7137 16.9537 14.8787L16.38 15.295C16.0275 15.5575 15.7875 15.8387 15.66 16.1387C15.5886 16.3068 15.5418 16.5091 15.5198 16.7455C15.4876 17.0921 15.7857 17.365 16.1338 17.365C16.5031 17.365 16.767 17.0462 16.9015 16.7022C16.9107 16.6786 16.9207 16.6558 16.9312 16.6337C17.0287 16.4387 17.1937 16.2587 17.4262 16.0937ZM16.8075 18.2987C16.635 18.1187 16.4212 18.0287 16.1662 18.0287C15.9187 18.0287 15.705 18.1187 15.525 18.2987C15.345 18.4787 15.255 18.6962 15.255 18.9512C15.255 19.1987 15.345 19.4125 15.525 19.5925C15.705 19.7725 15.9187 19.8625 16.1662 19.8625C16.4212 19.8625 16.635 19.7725 16.8075 19.5925C16.9875 19.4125 17.0775 19.1987 17.0775 18.9512C17.0775 18.6962 16.9875 18.4787 16.8075 18.2987Z" fill={color}/>
-    </svg>    
-    
+    </svg>
+
     switch (size.toString()) {
+        case '12':
+            return size12;
         case '16':
             return size16;
         case '24':
@@ -24,4 +30,4 @@ export const IconHelp: FC<IIconProps> = ({ size = 16, color='white' }) => {
         default:
             return size16;
     }
-}
+}