feat: icon 컴포넌트 제작

Kernel360 · Jan 16, 2024 · f6dc404 · f6dc404
1 parent f9c9ecc
commit f6dc404
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 37 deletions.
diff --git a/src/components/icons/Channel.tsx b/src/components/icons/Channel.tsx
@@ -1,15 +1,15 @@
 import { Colors, colors } from '@styles/colorPalette';
 
 interface ChannelProps {
-  size?: number
+  width?: number
+  height?: number
   color?: Colors
 }
 
-function Channel({ size = 24, color = 'black' }: ChannelProps) {
+function Channel({ width = 19, height = 18, color = 'black' }: ChannelProps) {
   return (
-    <svg width={size} height={size} viewBox="0 0 27 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M23.7655 2.01842L23.766 2.01855C24.5584 2.23066 25.1828 2.85491 25.3949 3.6471C25.6399 4.56402 25.7756 6.05782 25.8451 7.39402C25.8791 8.0472 25.8963 8.63823 25.9049 9.06603C25.9092 9.2797 25.9114 9.4521 25.9125 9.57051C25.9131 9.6297 25.9134 9.67536 25.9135 9.7059L25.9136 9.74016L25.9137 9.7484L25.9137 9.74992V9.75023V9.75028V9.75057L25.9137 9.75211L25.9136 9.76034L25.9135 9.79459C25.9134 9.82512 25.9131 9.87077 25.9126 9.92995C25.9116 10.0483 25.9095 10.2207 25.9052 10.4344C25.8967 10.8621 25.8798 11.4531 25.8459 12.1062C25.7767 13.4424 25.641 14.9357 25.3952 15.852L25.3951 15.8525C25.183 16.6449 24.5585 17.2693 23.7661 17.4814L23.7655 17.4816C23.3546 17.5918 22.5417 17.6913 21.4695 17.7695C20.4254 17.8457 19.2152 17.897 18.06 17.9314C16.9064 17.9657 15.8157 17.9828 15.0128 17.9914C14.6115 17.9957 14.2827 17.9979 14.0544 17.9989C13.9403 17.9995 13.8513 17.9997 13.7911 17.9999L13.7226 18L13.7054 18L13.7012 18H13.7002H13.7L13.6999 19L13.6999 18H13.6997H13.6987L13.6945 18L13.6772 18L13.6088 17.9999C13.5486 17.9997 13.4596 17.9995 13.3455 17.9989C13.1172 17.9979 12.7884 17.9957 12.3871 17.9914C11.5843 17.9828 10.4935 17.9657 9.3399 17.9314C8.1847 17.897 6.97455 17.8457 5.93046 17.7695C4.85822 17.6913 4.04537 17.5918 3.63438 17.4815L3.63385 17.4814C2.84142 17.2693 2.21701 16.6449 2.00487 15.8525L2.00475 15.852C1.75898 14.9357 1.6233 13.4424 1.55405 12.1062C1.5202 11.4531 1.50324 10.8621 1.49476 10.4344C1.49052 10.2207 1.48841 10.0483 1.48736 9.92995C1.48684 9.87077 1.48658 9.82512 1.48645 9.79459L1.48634 9.76034L1.48632 9.75211L1.48632 9.75028L1.48632 9.75008V9.75006V9.74994V9.74992L1.48632 9.74972L1.48632 9.74789L1.48634 9.73966L1.48645 9.70541C1.48658 9.67488 1.48684 9.62923 1.48736 9.57005C1.48841 9.45166 1.49052 9.27928 1.49476 9.06563C1.50324 8.63787 1.5202 8.04691 1.55405 7.39381C1.6233 6.0576 1.75898 4.56436 2.00475 3.64806L2.00487 3.64758C2.21701 2.8551 2.84143 2.23069 3.63389 2.01855L3.63437 2.01843C4.04536 1.90819 4.85821 1.80873 5.93046 1.73046C6.97455 1.65425 8.1847 1.60297 9.33989 1.56863C10.4935 1.53434 11.5842 1.51717 12.3871 1.50858C12.7884 1.50428 13.1172 1.50214 13.3455 1.50107C13.4596 1.50053 13.5486 1.50027 13.6088 1.50013L13.6772 1.50002L13.6945 1.5L13.6987 1.5L13.6997 1.5H13.6999L13.6999 0.5L13.7 1.5H13.7002L13.7012 1.5L13.7054 1.5L13.7226 1.50002L13.7911 1.50013C13.8513 1.50027 13.9403 1.50053 14.0544 1.50107C14.2827 1.50214 14.6115 1.50428 15.0128 1.50858C15.8157 1.51717 16.9064 1.53434 18.06 1.56863C19.2152 1.60297 20.4254 1.65425 21.4695 1.73046C22.5417 1.80873 23.3546 1.90819 23.7655 2.01842Z" stroke={colors[color]} strokeWidth="2" />
-      <path d="M11.0549 13.7139L17.9206 9.75024L11.0549 5.78655V13.7139Z" fill={colors[color]} />
+    <svg width={width} height={height} viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M13.1498 9.425C13.2998 9.325 13.3748 9.18333 13.3748 9C13.3748 8.81667 13.2998 8.675 13.1498 8.575L7.5748 5C7.40814 4.88333 7.23731 4.875 7.0623 4.975C6.8873 5.075 6.7998 5.225 6.7998 5.425V12.575C6.7998 12.775 6.8873 12.925 7.0623 13.025C7.23731 13.125 7.40814 13.1167 7.5748 13L13.1498 9.425ZM2.2998 18C1.7498 18 1.27897 17.8042 0.887305 17.4125C0.495638 17.0208 0.299805 16.55 0.299805 16V2C0.299805 1.45 0.495638 0.979167 0.887305 0.5875C1.27897 0.195833 1.7498 0 2.2998 0H16.2998C16.8498 0 17.3206 0.195833 17.7123 0.5875C18.104 0.979167 18.2998 1.45 18.2998 2V16C18.2998 16.55 18.104 17.0208 17.7123 17.4125C17.3206 17.8042 16.8498 18 16.2998 18H2.2998Z" fill={colors[color]} />
     </svg>
 
   );

diff --git a/src/components/icons/Favorite.tsx b/src/components/icons/Favorite.tsx
@@ -1,14 +1,12 @@
-import { Colors, colors } from '@styles/colorPalette';
-
 interface FavoriteProps {
-  size?: number
-  color: Colors
+  width?: number
+  height?: number
 }
 
-function Favorite({ size = 24, color = 'black' }: FavoriteProps) {
+function Favorite({ width = 21, height = 19 }: FavoriteProps) {
   return (
-    <svg width={size} height={size} viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M19.9506 3.51652C19.4508 3.00693 18.8573 2.60268 18.2042 2.32688C17.5511 2.05108 16.851 1.90912 16.144 1.90912C15.437 1.90912 14.737 2.05108 14.0839 2.32688C13.4307 2.60268 12.8373 3.00693 12.3375 3.51652L11.3003 4.57362L10.263 3.51652C9.25345 2.48766 7.8842 1.90965 6.45648 1.90965C5.02876 1.90965 3.65951 2.48766 2.64996 3.51652C1.6404 4.54539 1.07324 5.94082 1.07324 7.39585C1.07324 8.85089 1.6404 10.2463 2.64996 11.2752L3.68721 12.3323L11.3003 20.0909L18.9133 12.3323L19.9506 11.2752C20.4506 10.7658 20.8472 10.1611 21.1179 9.49543C21.3885 8.82981 21.5278 8.11636 21.5278 7.39585C21.5278 6.67535 21.3885 5.9619 21.1179 5.29627C20.8472 4.63065 20.4506 4.02588 19.9506 3.51652Z" stroke={colors[color]} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <svg width={width} height={height} viewBox="0 0 21 19" xmlns="http://www.w3.org/2000/svg">
+      <path d="M10.6997 18.325C10.4664 18.325 10.2289 18.2834 9.98721 18.2C9.74554 18.1167 9.53304 17.9834 9.34971 17.8L7.62471 16.225C5.85804 14.6084 4.26221 13.0042 2.83721 11.4125C1.41221 9.82086 0.699707 8.06669 0.699707 6.15002C0.699707 4.58336 1.22471 3.27502 2.27471 2.22502C3.32471 1.17502 4.63304 0.650024 6.19971 0.650024C7.08304 0.650024 7.91637 0.837524 8.69971 1.21252C9.48304 1.58752 10.1497 2.10002 10.6997 2.75002C11.2497 2.10002 11.9164 1.58752 12.6997 1.21252C13.483 0.837524 14.3164 0.650024 15.1997 0.650024C16.7664 0.650024 18.0747 1.17502 19.1247 2.22502C20.1747 3.27502 20.6997 4.58336 20.6997 6.15002C20.6997 8.06669 19.9914 9.82502 18.5747 11.425C17.158 13.025 15.5497 14.6334 13.7497 16.25L12.0497 17.8C11.8664 17.9834 11.6539 18.1167 11.4122 18.2C11.1705 18.2834 10.933 18.325 10.6997 18.325ZM9.74971 4.75002C9.26637 4.06669 8.74971 3.54586 8.19971 3.18752C7.64971 2.82919 6.98304 2.65002 6.19971 2.65002C5.19971 2.65002 4.36637 2.98336 3.69971 3.65002C3.03304 4.31669 2.69971 5.15002 2.69971 6.15002C2.69971 7.01669 3.00804 7.93753 3.62471 8.91253C4.24137 9.88753 4.97887 10.8334 5.83721 11.75C6.69554 12.6667 7.57887 13.525 8.48721 14.325C9.39554 15.125 10.133 15.7834 10.6997 16.3C11.2664 15.7834 12.0039 15.125 12.9122 14.325C13.8205 13.525 14.7039 12.6667 15.5622 11.75C16.4205 10.8334 17.158 9.88753 17.7747 8.91253C18.3914 7.93753 18.6997 7.01669 18.6997 6.15002C18.6997 5.15002 18.3664 4.31669 17.6997 3.65002C17.033 2.98336 16.1997 2.65002 15.1997 2.65002C14.4164 2.65002 13.7497 2.82919 13.1997 3.18752C12.6497 3.54586 12.133 4.06669 11.6497 4.75002C11.533 4.91669 11.3914 5.04169 11.2247 5.12502C11.058 5.20836 10.883 5.25002 10.6997 5.25002C10.5164 5.25002 10.3414 5.20836 10.1747 5.12502C10.008 5.04169 9.86637 4.91669 9.74971 4.75002Z" fill="black" />
     </svg>
 
   );

diff --git a/src/components/icons/FilledFavorite.tsx b/src/components/icons/FilledFavorite.tsx
@@ -0,0 +1,15 @@
+interface FilledFavoriteProps {
+  width?: number
+  height?: number
+}
+
+function FilledFavorite({ width = 21, height = 19 }: FilledFavoriteProps) {
+  return (
+    <svg width={width} height={height} viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M10.6997 18.325C10.4664 18.325 10.2289 18.2834 9.98721 18.2C9.74554 18.1167 9.53304 17.9834 9.34971 17.8L7.62471 16.225C5.85804 14.6084 4.26221 13.0042 2.83721 11.4125C1.41221 9.82086 0.699707 8.06669 0.699707 6.15002C0.699707 4.58336 1.22471 3.27502 2.27471 2.22502C3.32471 1.17502 4.63304 0.650024 6.19971 0.650024C7.08304 0.650024 7.91637 0.837524 8.69971 1.21252C9.48304 1.58752 10.1497 2.10002 10.6997 2.75002C11.2497 2.10002 11.9164 1.58752 12.6997 1.21252C13.483 0.837524 14.3164 0.650024 15.1997 0.650024C16.7664 0.650024 18.0747 1.17502 19.1247 2.22502C20.1747 3.27502 20.6997 4.58336 20.6997 6.15002C20.6997 8.06669 19.9914 9.82502 18.5747 11.425C17.158 13.025 15.5497 14.6334 13.7497 16.25L12.0497 17.8C11.8664 17.9834 11.6539 18.1167 11.4122 18.2C11.1705 18.2834 10.933 18.325 10.6997 18.325Z" fill="#0075FF" />
+    </svg>
+
+  );
+}
+
+export default FilledFavorite;
diff --git a/src/components/icons/FilledHome.tsx b/src/components/icons/FilledHome.tsx
@@ -0,0 +1,15 @@
+interface HomeProps {
+  width?: number
+  height?: number
+}
+
+function FilledHome({ width = 16, height = 20 }: HomeProps) {
+  return (
+    <svg width={width} height={height} viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0.5 16V7C0.5 6.68333 0.570833 6.38333 0.7125 6.1C0.854167 5.81667 1.05 5.58333 1.3 5.4L7.3 0.9C7.65 0.633333 8.05 0.5 8.5 0.5C8.95 0.5 9.35 0.633333 9.7 0.9L15.7 5.4C15.95 5.58333 16.1458 5.81667 16.2875 6.1C16.4292 6.38333 16.5 6.68333 16.5 7V16C16.5 16.55 16.3042 17.0208 15.9125 17.4125C15.5208 17.8042 15.05 18 14.5 18H11.5C11.2167 18 10.9792 17.9042 10.7875 17.7125C10.5958 17.5208 10.5 17.2833 10.5 17V12C10.5 11.7167 10.4042 11.4792 10.2125 11.2875C10.0208 11.0958 9.78333 11 9.5 11H7.5C7.21667 11 6.97917 11.0958 6.7875 11.2875C6.59583 11.4792 6.5 11.7167 6.5 12V17C6.5 17.2833 6.40417 17.5208 6.2125 17.7125C6.02083 17.9042 5.78333 18 5.5 18H2.5C1.95 18 1.47917 17.8042 1.0875 17.4125C0.695833 17.0208 0.5 16.55 0.5 16Z" fill="#0075FF" />
+    </svg>
+
+  );
+}
+
+export default FilledHome;
diff --git a/src/components/icons/Home.tsx b/src/components/icons/Home.tsx
@@ -1,15 +1,12 @@
-import { Colors, colors } from '@/styles/colorPalette';
-
 interface HomeProps {
-  size?: number
-  color: Colors
+  width?: number
+  height?: number
 }
 
-function Home({ size = 24, color }: HomeProps) {
+function Home({ width = 16, height = 20 }: HomeProps) {
   return (
-    <svg width={size} height={size}>
-      <path fillRule="evenodd" clipRule="evenodd" d="M11.8861 1.21065C12.2472 0.929784 12.7528 0.929784 13.1139 1.21065L22.1139 8.21065C22.3575 8.4001 22.5 8.69141 22.5 9V20C22.5 20.7957 22.1839 21.5587 21.6213 22.1213C21.0587 22.6839 20.2957 23 19.5 23H5.5C4.70435 23 3.94129 22.6839 3.37868 22.1213C2.81607 21.5587 2.5 20.7957 2.5 20V9C2.5 8.69141 2.64247 8.4001 2.88606 8.21065L11.8861 1.21065ZM4.5 9.48908V20C4.5 20.2652 4.60536 20.5196 4.79289 20.7071C4.98043 20.8946 5.23478 21 5.5 21H19.5C19.7652 21 20.0196 20.8946 20.2071 20.7071C20.3946 20.5196 20.5 20.2652 20.5 20V9.48908L12.5 3.26686L4.5 9.48908Z" fill={colors[color]} />
-      <path fillRule="evenodd" clipRule="evenodd" d="M8.5 12C8.5 11.4477 8.94772 11 9.5 11H15.5C16.0523 11 16.5 11.4477 16.5 12V22C16.5 22.5523 16.0523 23 15.5 23C14.9477 23 14.5 22.5523 14.5 22V13H10.5V22C10.5 22.5523 10.0523 23 9.5 23C8.94772 23 8.5 22.5523 8.5 22V12Z" fill={colors[color]} />
+    <svg width={width} height={height} viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M2.5 16H5.5V11C5.5 10.7167 5.59583 10.4792 5.7875 10.2875C5.97917 10.0958 6.21667 10 6.5 10H10.5C10.7833 10 11.0208 10.0958 11.2125 10.2875C11.4042 10.4792 11.5 10.7167 11.5 11V16H14.5V7L8.5 2.5L2.5 7V16ZM0.5 16V7C0.5 6.68333 0.570833 6.38333 0.7125 6.1C0.854167 5.81667 1.05 5.58333 1.3 5.4L7.3 0.9C7.65 0.633333 8.05 0.5 8.5 0.5C8.95 0.5 9.35 0.633333 9.7 0.9L15.7 5.4C15.95 5.58333 16.1458 5.81667 16.2875 6.1C16.4292 6.38333 16.5 6.68333 16.5 7V16C16.5 16.55 16.3042 17.0208 15.9125 17.4125C15.5208 17.8042 15.05 18 14.5 18H10.5C10.2167 18 9.97917 17.9042 9.7875 17.7125C9.59583 17.5208 9.5 17.2833 9.5 17V12H7.5V17C7.5 17.2833 7.40417 17.5208 7.2125 17.7125C7.02083 17.9042 6.78333 18 6.5 18H2.5C1.95 18 1.47917 17.8042 1.0875 17.4125C0.695833 17.0208 0.5 16.55 0.5 16Z" fill="#1C1B1F" />
     </svg>
 
   );

diff --git a/src/components/icons/Map.tsx b/src/components/icons/Map.tsx
@@ -1,23 +1,17 @@
 import { Colors, colors } from '@styles/colorPalette';
 
 interface MapProps {
-  size?: number
+  width?: number
+  height?: number
   color?: Colors
 }
 
-function Map({ size = 24, color = 'black' }: MapProps) {
+function Map({ width = 17, height = 20, color = 'black' }: MapProps) {
   return (
-    <svg width={size} height={size} viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clipPath="url(#clip0_576_5687)">
-        <path d="M17.6 8.33333C17.6 14.1667 10.1 19.1667 10.1 19.1667C10.1 19.1667 2.59998 14.1667 2.59998 8.33333C2.59998 6.3442 3.39015 4.43655 4.79667 3.03003C6.2032 1.6235 8.11085 0.833328 10.1 0.833328C12.0891 0.833328 13.9968 1.6235 15.4033 3.03003C16.8098 4.43655 17.6 6.3442 17.6 8.33333Z" stroke={colors[color]} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-        <path d="M10.1 10.8333C11.4807 10.8333 12.6 9.71404 12.6 8.33333C12.6 6.95262 11.4807 5.83333 10.1 5.83333C8.71926 5.83333 7.59998 6.95262 7.59998 8.33333C7.59998 9.71404 8.71926 10.8333 10.1 10.8333Z" stroke={colors[color]} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-      </g>
-      <defs>
-        <clipPath id="clip0_576_5687">
-          <rect width="20" height="20" fill={colors[color]} transform="translate(0.0999756)" />
-        </clipPath>
-      </defs>
+    <svg width={width} height={height} viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill={colors[color]} d="M8.8999 19.325C8.66657 19.325 8.43324 19.2833 8.1999 19.2C7.96657 19.1167 7.75824 18.9917 7.5749 18.825C6.49157 17.825 5.53324 16.85 4.6999 15.9C3.86657 14.95 3.17074 14.0292 2.6124 13.1375C2.05407 12.2458 1.62907 11.3875 1.3374 10.5625C1.04574 9.7375 0.899902 8.95 0.899902 8.2C0.899902 5.7 1.70407 3.70833 3.3124 2.225C4.92074 0.741667 6.78324 0 8.8999 0C11.0166 0 12.8791 0.741667 14.4874 2.225C16.0957 3.70833 16.8999 5.7 16.8999 8.2C16.8999 8.95 16.7541 9.7375 16.4624 10.5625C16.1707 11.3875 15.7457 12.2458 15.1874 13.1375C14.6291 14.0292 13.9332 14.95 13.0999 15.9C12.2666 16.85 11.3082 17.825 10.2249 18.825C10.0416 18.9917 9.83324 19.1167 9.5999 19.2C9.36657 19.2833 9.13324 19.325 8.8999 19.325ZM8.8999 10C9.4499 10 9.92074 9.80417 10.3124 9.4125C10.7041 9.02083 10.8999 8.55 10.8999 8C10.8999 7.45 10.7041 6.97917 10.3124 6.5875C9.92074 6.19583 9.4499 6 8.8999 6C8.3499 6 7.87907 6.19583 7.4874 6.5875C7.09574 6.97917 6.8999 7.45 6.8999 8C6.8999 8.55 7.09574 9.02083 7.4874 9.4125C7.87907 9.80417 8.3499 10 8.8999 10Z" />
     </svg>
+
   );
 }
 

diff --git a/src/components/icons/Profile.tsx b/src/components/icons/Profile.tsx
@@ -1,15 +1,15 @@
 import { Colors, colors } from '@styles/colorPalette';
 
 interface ProfileProps {
-  size?: number
+  width?: number
+  height?: number
   color?: Colors
 }
 
-function Profile({ size = 24, color = 'black' }: ProfileProps) {
+function Profile({ width = 17, height = 16, color = 'black' }: ProfileProps) {
   return (
-    <svg width={size} height={size} viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path fillRule="evenodd" clipRule="evenodd" d="M5.36437 15.4645C6.30205 14.5268 7.57382 14 8.8999 14H16.8999C18.226 14 19.4978 14.5268 20.4354 15.4645C21.3731 16.4021 21.8999 17.6739 21.8999 19V21C21.8999 21.5523 21.4522 22 20.8999 22C20.3476 22 19.8999 21.5523 19.8999 21V19C19.8999 18.2044 19.5838 17.4413 19.0212 16.8787C18.4586 16.3161 17.6956 16 16.8999 16H8.8999C8.10425 16 7.34119 16.3161 6.77858 16.8787C6.21597 17.4413 5.8999 18.2044 5.8999 19V21C5.8999 21.5523 5.45219 22 4.8999 22C4.34762 22 3.8999 21.5523 3.8999 21V19C3.8999 17.6739 4.42669 16.4021 5.36437 15.4645Z" fill={colors[color]} />
-      <path fillRule="evenodd" clipRule="evenodd" d="M12.8999 4C11.243 4 9.8999 5.34315 9.8999 7C9.8999 8.65685 11.243 10 12.8999 10C14.5568 10 15.8999 8.65685 15.8999 7C15.8999 5.34315 14.5568 4 12.8999 4ZM7.8999 7C7.8999 4.23858 10.1385 2 12.8999 2C15.6613 2 17.8999 4.23858 17.8999 7C17.8999 9.76142 15.6613 12 12.8999 12C10.1385 12 7.8999 9.76142 7.8999 7Z" fill={colors[color]} />
+    <svg width={width} height={height} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M8.1001 8C7.0001 8 6.05843 7.60833 5.2751 6.825C4.49176 6.04167 4.1001 5.1 4.1001 4C4.1001 2.9 4.49176 1.95833 5.2751 1.175C6.05843 0.391667 7.0001 0 8.1001 0C9.2001 0 10.1418 0.391667 10.9251 1.175C11.7084 1.95833 12.1001 2.9 12.1001 4C12.1001 5.1 11.7084 6.04167 10.9251 6.825C10.1418 7.60833 9.2001 8 8.1001 8ZM0.100098 14V13.2C0.100098 12.6333 0.245931 12.1125 0.537598 11.6375C0.829264 11.1625 1.21676 10.8 1.7001 10.55C2.73343 10.0333 3.78343 9.64583 4.8501 9.3875C5.91676 9.12917 7.0001 9 8.1001 9C9.2001 9 10.2834 9.12917 11.3501 9.3875C12.4168 9.64583 13.4668 10.0333 14.5001 10.55C14.9834 10.8 15.3709 11.1625 15.6626 11.6375C15.9543 12.1125 16.1001 12.6333 16.1001 13.2V14C16.1001 14.55 15.9043 15.0208 15.5126 15.4125C15.1209 15.8042 14.6501 16 14.1001 16H2.1001C1.5501 16 1.07926 15.8042 0.687598 15.4125C0.295931 15.0208 0.100098 14.55 0.100098 14Z" fill={colors[color]} />
     </svg>
 
   );