feat: Replace Lucide icons with custom SVG icons for Muscle, Exercises, History, and Flex tabs

Author: aree6

frontend/App.tsx

@@ -966,7 +966,18 @@ const App: React.FC = () => {
                   }}
                   className={`w-full flex items-center justify-center gap-2 px-2 sm:px-3 py-2 rounded-lg whitespace-nowrap ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border transition-all duration-200 ${activeTab === Tab.MUSCLE_ANALYSIS ? 'bg-white/10 border-slate-600/70 text-white ring-2 ring-white/25 shadow-sm' : 'bg-transparent border-black/70 text-slate-400 hover:border-white hover:text-white hover:bg-white/5'}`}
                 >
-                  <BicepsFlexed className="w-5 h-5" />
+                  <svg
+                    className="w-5 h-5"
+                    viewBox="0 0 195.989 195.989"
+                    fill="currentColor"
+                    stroke="currentColor"
+                    strokeWidth="10"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    paintOrder="stroke fill"
+                  >
+                    <path d="M195.935,84.745c-2.07-15.789-20.983-37.722-20.983-37.722c-4.933-12.69-17.677-8.47-17.677-8.47l-8.507,2.295 c-8.421,2.533-8.025,13.555-4.372,15.789c1.602,0.978,6.297,1.233,7.685,0c0.414-0.374,0.098-2.165,0.098-2.165 c8.933,0.487,9.584-4.688,9.584-4.688l3.039-0.606c3.044-1.665,3.72,5.395,3.72,5.395c-2.07,20.009,6.595,27.334,6.595,27.334 c-1.254,3.973-5.62,3.206-5.62,3.206c-13.853-7.197-24.131,6.403-24.131,6.403c-7.831-6.671-23.991,5.148-23.991,5.148 c-9.055,1.79-9.591-9.106-9.591-9.106s-0.42-6.941-0.713-7.578c-0.426-1.084,1.925-0.536,1.925-0.536 c7.965-14.495,0-12.559,0-12.559c1.93-25.008-19.991-19.759-19.991-19.759C76.143,51.748,82.32,68.544,82.32,68.544 c-3.702-0.904-1.927,4.616-1.927,4.616c0.956,8.473,3.985,6.552,3.985,6.552c0.393,2.968,2.058,7.054,2.058,7.054l0.256,6.808 c-1.903,11.298-13.829,1.927-13.829,1.927c-6.996-9.864-24.536-4.348-24.536-4.348c-9.061-13.479-23.333-5.785-23.333-5.785 c1.516-3.349-0.256-20.009-0.256-20.009c1.772-2.058,5.331-13.712,5.331-13.712c1.522,2.058,8.388,2.42,8.388,2.42 c0.524,3.093,2.731,4.351,2.731,4.351c4.665,1.934,2.731-13.335,2.731-13.335c1.221-4.847-6.573-6.013-6.573-6.013 c-13.594-3.739-16.742,4.847-16.742,4.847l-3.547,7.712c-5.063,5.52-14.565,24.368-14.565,24.368 C-2.977,90.999,2.26,93.705,2.26,93.705l9.864,7.667c16.736,16.203,26.85,13.877,26.85,13.877 c13.46-0.256,12.352,8.458,12.352,8.458c0.536,13.342,9.852,27.182,9.852,27.182c0.685,2.326,1.172,4.786,1.656,7.222h63.811 c1.182-2.636,2.412-5.097,3.508-6.625c5.225-7.38,12.361-16.952,14.991-23.297c5.151-12.477,7.594-12.185,7.594-12.185 c18.383,0,28.527-13.329,28.527-13.329c3.014-3.86,7.593-8.616,10.948-10.522C196.726,89.571,195.935,84.745,195.935,84.745z"/>
+                  </svg>
                   <span className="hidden sm:inline font-medium">Muscle</span>
                 </button>
                 <button 
@@ -977,7 +988,39 @@ const App: React.FC = () => {
                   }}
                   className={`w-full flex items-center justify-center gap-2 px-2 sm:px-3 py-2 rounded-lg whitespace-nowrap ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border transition-all duration-200 ${activeTab === Tab.EXERCISES ? 'bg-white/10 border-slate-600/70 text-white ring-2 ring-white/25 shadow-sm' : 'bg-transparent border-black/70 text-slate-400 hover:border-white hover:text-white hover:bg-white/5'}`}
                 >
-                  <Dumbbell className="w-5 h-5" />
+                  <svg
+                    className="w-5 h-5"
+                    viewBox="0 0 422.263 422.263"
+                    fill="currentColor"
+                    stroke="currentColor"
+                    strokeWidth="10"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    paintOrder="stroke fill"
+                  >
+                    <path d="M416.263,307.135h-40v-28.316c0-3.314-2.686-6-6-6h-22v-23.688c0-3.313-2.687-6-6-6h-56c-3.313,0-6,2.687-6,6v58.003
+	h-50.348c0.547-0.724,1.073-1.465,1.573-2.229c13.406-20.492,20.492-44.312,20.492-68.884c0-26.382-8.047-51.522-23.253-72.895
+	V96.111c0-47.96-39.019-86.979-86.979-86.979h-31.203c-48.132,0-87.291,39.158-87.291,87.291v66.683
+	c-1.345,1.893-2.654,3.815-3.898,5.786C6.693,188.963,0,212.176,0,236.022c0,24.573,7.086,48.393,20.492,68.884
+	c0.502,0.767,1.031,1.512,1.581,2.239c-3.224,0.102-5.809,2.741-5.809,5.99v24c0,3.313,2.687,6,6,6h40v34.309c0,3.314,2.686,6,6,6
+	h22v23.688c0,3.313,2.687,6,6,6h56c3.313,0,6-2.687,6-6v-63.997h122v63.997c0,3.313,2.687,6,6,6h56c3.313,0,6-2.687,6-6v-23.688h22
+	c3.314,0,6-2.686,6-6v-34.309h40c3.313,0,6-2.687,6-6v-24C422.263,309.822,419.577,307.135,416.263,307.135z M74.761,120.908
+	c-3.041-5.949-4.634-12.52-4.634-19.272c0-23.435,19.125-42.5,42.633-42.5h26.464c11.472,0,22.177,4.388,30.145,12.356
+	c8.053,8.053,12.488,18.712,12.488,30.012c0,6.809-1.604,13.423-4.664,19.394c-16.114-7.205-33.309-10.866-51.204-10.866
+	C108.083,110.031,90.878,113.697,74.761,120.908z M193.595,96.135h23.131v52.511c-8.477-8.791-18.213-16.351-28.819-22.347
+	c3.903-7.641,5.95-16.096,5.95-24.796C193.857,99.699,193.769,97.908,193.595,96.135z M110.544,21.132h31.203
+	c37.267,0,68.26,27.334,74.011,63.003h-24.752c-2.651-7.857-7.096-15.073-13.152-21.129c-10.234-10.234-23.954-15.871-38.63-15.871
+	H112.76c-23.988,0-44.4,15.51-51.727,37H36.272C42.158,48.446,73.214,21.132,110.544,21.132z M35.253,96.422
+	c0-0.096,0.007-0.191,0.007-0.287h23.144c-0.183,1.809-0.278,3.644-0.278,5.5c0,8.647,2.038,17.063,5.925,24.683
+	c-10.649,6.017-20.35,13.522-28.798,22.29V96.422z M28.263,331.135v-12h34v12H28.263z M74.263,371.444v-86.625h16v86.625H74.263z
+	 M102.263,255.132h16v146h-16V255.132z M146.263,401.132h-16v-146h16V401.132z M96.263,243.132c-3.313,0-6,2.687-6,6v23.688h-22
+	c-3.314,0-6,2.686-6,6v28.316H39.809c-3.674-2.102-6.867-5.116-9.276-8.798C18.409,279.803,12,258.255,12,236.022
+	c0-43.473,24.164-82.554,63.068-101.997c15.878-7.958,33.011-11.994,50.921-11.994c17.902,0,35.028,4.032,50.911,11.989
+	c15.965,7.968,30.039,19.782,40.701,34.167c14.64,19.731,22.378,43.188,22.378,67.835c0,22.233-6.409,43.781-18.534,62.315
+	c-2.414,3.691-5.616,6.709-9.273,8.798h-53.91v-58.003c0-3.313-2.687-6-6-6H96.263z M158.263,331.135v-12h122v12H158.263z
+	 M292.263,255.132h16v146h-16V255.132z M336.263,401.132h-16v-146h16V401.132z M364.263,371.444h-16v-86.625h16V371.444z
+	 M410.263,331.135h-34v-12h34V331.135z"/>
+                  </svg>
                   <span className="hidden sm:inline font-medium">Exercises</span>
                 </button>
                 <button 
@@ -988,7 +1031,31 @@ const App: React.FC = () => {
                   }}
                   className={`w-full flex items-center justify-center gap-2 px-2 sm:px-3 py-2 rounded-lg whitespace-nowrap ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border transition-all duration-200 ${activeTab === Tab.HISTORY ? 'bg-white/10 border-slate-600/70 text-white ring-2 ring-white/25 shadow-sm' : 'bg-transparent border-black/70 text-slate-400 hover:border-white hover:text-white hover:bg-white/5'}`}
                 >
-                  <History className="w-5 h-5" />
+                  <svg
+                    className="w-5 h-5"
+                    viewBox="0 0 503.379 503.379"
+                    fill="currentColor"
+                    stroke="currentColor"
+                    strokeWidth="10"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    paintOrder="stroke fill"
+                  >
+                    <path d="M458.091,128.116v326.842c0,26.698-21.723,48.421-48.422,48.421h-220.92c-26.699,0-48.421-21.723-48.421-48.421V242.439
+		c6.907,1.149,13.953,1.894,21.184,1.894c5.128,0,10.161-0.381,15.132-0.969v211.594c0,6.673,5.429,12.104,12.105,12.104h220.92
+		c6.674,0,12.105-5.432,12.105-12.104V128.116c0-6.676-5.432-12.105-12.105-12.105H289.835c0-12.625-1.897-24.793-5.297-36.315
+		h125.131C436.368,79.695,458.091,101.417,458.091,128.116z M159.49,228.401c-62.973,0-114.202-51.229-114.202-114.199
+		C45.289,51.229,96.517,0,159.49,0c62.971,0,114.202,51.229,114.202,114.202C273.692,177.172,222.461,228.401,159.49,228.401z
+		 M159.49,204.19c49.618,0,89.989-40.364,89.989-89.988c0-49.627-40.365-89.991-89.989-89.991
+		c-49.626,0-89.991,40.364-89.991,89.991C69.499,163.826,109.87,204.19,159.49,204.19z M227.981,126.308
+		c6.682,0,12.105-5.423,12.105-12.105s-5.423-12.105-12.105-12.105h-56.386v-47.52c0-6.682-5.423-12.105-12.105-12.105
+		s-12.105,5.423-12.105,12.105v59.625c0,6.682,5.423,12.105,12.105,12.105H227.981z M367.697,224.456h-131.14
+		c-6.682,0-12.105,5.423-12.105,12.105c0,6.683,5.423,12.105,12.105,12.105h131.14c6.685,0,12.105-5.423,12.105-12.105
+		C379.803,229.879,374.382,224.456,367.697,224.456z M367.91,297.885h-131.14c-6.682,0-12.105,5.42-12.105,12.105
+		s5.423,12.105,12.105,12.105h131.14c6.685,0,12.104-5.42,12.104-12.105S374.601,297.885,367.91,297.885z M367.91,374.353h-131.14
+		c-6.682,0-12.105,5.426-12.105,12.105c0,6.685,5.423,12.104,12.105,12.104h131.14c6.685,0,12.104-5.42,12.104-12.104
+		C380.015,379.778,374.601,374.353,367.91,374.353z"/>
+                  </svg>
                   <span className="hidden sm:inline font-medium">History</span>
                 </button>
                 <button 
@@ -999,7 +1066,18 @@ const App: React.FC = () => {
                   }}
                   className={`w-full flex items-center justify-center gap-2 px-2 sm:px-3 py-2 rounded-lg whitespace-nowrap ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border transition-all duration-200 ${activeTab === Tab.FLEX ? 'bg-white/10 border-slate-600/70 text-white ring-2 ring-white/25 shadow-sm' : 'bg-transparent border-black/70 text-slate-400 hover:border-white hover:text-white hover:bg-white/5'}`}
                 >
-                  <Sparkles className="w-5 h-5" />
+                  <svg
+                    className="w-5 h-5"
+                    viewBox="0 0 512.001 512.001"
+                    fill="currentColor"
+                    stroke="currentColor"
+                    strokeWidth="10"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    paintOrder="stroke fill"
+                  >
+                    <path d="M426.667,0H85.334C73.552,0,64,9.552,64,21.334v469.333C64,502.449,73.552,512,85.334,512h341.333 c11.782,0,21.333-9.551,21.333-21.333V21.334C448,9.552,438.449,0,426.667,0z M182.326,469.334l223.007-207.078v69.398 l-157.349,137.68H182.326z M405.334,96.987L106.667,358.32v-50.35L392.378,42.667h12.956V96.987z M329.674,42.667L106.667,249.745 v-69.398l157.349-137.68H329.674z M199.223,42.667l-92.556,80.986V42.667H199.223z M106.667,415.014l298.667-261.333v50.35 L119.623,469.334h-12.956V415.014z M312.778,469.334l92.556-80.986v80.986H312.778z"/>
+                  </svg>
                   <span className="hidden sm:inline font-medium">Flex</span>
                 </button>
 

frontend/components/MuscleAnalysis.tsx

@@ -750,7 +750,11 @@ export const MuscleAnalysis: React.FC<MuscleAnalysisProps> = ({ data, filtersSlo
                     : 'text-slate-400 hover:text-white'
                 }`}
               >
-                <BicepsFlexed className="w-3.5 h-3.5" />
+                <svg className="w-3.5 h-3.5" viewBox="0 0 487.172 487.172" fill="currentColor">
+                  <path d="M80.147,315.971c-2.072,4.694-4.343,10.061-6.252,14.598c-12.218,29.043-24.851,59.074-72.827,113.241 c-1.556,1.757-1.394,4.443,0.364,6c0.809,0.716,1.814,1.068,2.816,1.068c1.174,0,2.343-0.484,3.183-1.432 c13.106-14.798,23.608-27.821,32.229-39.548c27.358,9.402,35.802,32.988,37.275,37.863c-11.64,8.574-24.554,18.999-39.209,31.98 c-1.757,1.557-1.92,4.242-0.363,5.999c0.84,0.948,2.009,1.433,3.183,1.433c1.002,0,2.008-0.353,2.816-1.068 c54.167-47.977,84.198-60.61,113.242-72.828c4.536-1.908,9.902-4.18,14.597-6.252c49.33-21.776,96.602-42.642,137.241-75.945 c45.114-36.972,78.352-85.822,104.602-153.736c21.52-55.68,38.239-95.378,73.17-138.174c1.484-1.818,1.214-4.496-0.604-5.98 c-1.819-1.484-4.496-1.214-5.98,0.605c-10.308,12.628-19.048,24.967-26.8,37.485c-25.962-9.067-34.761-30.935-36.751-37.047 c12.455-7.724,24.734-16.43,37.301-26.687c1.818-1.484,2.09-4.162,0.605-5.98c-1.484-1.818-4.162-2.089-5.98-0.605 c-42.797,34.931-82.494,51.65-138.174,73.17c-67.914,26.249-116.765,59.487-153.736,104.602 C122.79,219.369,101.924,266.64,80.147,315.971z"/>
+                  <path d="M298.64,104.485c-59.109,27.002-102.147,60.839-135.44,106.488c-1.383,1.896-0.967,4.555,0.93,5.938 c0.756,0.551,1.632,0.817,2.501,0.817c1.312,0,2.605-0.605,3.437-1.746c32.398-44.423,74.376-77.395,132.105-103.766 c2.135-0.975,3.075-3.497,2.1-5.632C303.297,104.45,300.775,103.51,298.64,104.485z"/>
+                  <path d="M322.067,259.048c-1.898-1.384-4.556-0.967-5.939,0.929c-32.398,44.423-74.375,77.395-132.104,103.766 c-2.135,0.975-3.075,3.496-2.1,5.632c0.714,1.563,2.256,2.485,3.868,2.485c0.591,0,1.19-0.124,1.764-0.385 c59.109-27.001,102.146-60.839,135.439-106.488C324.38,263.089,323.964,260.43,322.067,259.048z"/>
+                </svg>
                 <span className="sr-only">Muscle</span>
               </button>
               <button
@@ -763,7 +767,10 @@ export const MuscleAnalysis: React.FC<MuscleAnalysisProps> = ({ data, filtersSlo
                     : 'text-slate-400 hover:text-white'
                 }`}
               >
-                <PersonStanding className="w-3.5 h-3.5 scale-[1.3]" />
+                <svg className="w-3.5 h-3.5" viewBox="0 0 187.064 187.064" fill="currentColor">
+                  <path d="M107.911,47.483c0,0.792-0.676,1.425-1.51,1.425c-0.841,0-1.514-0.64-1.514-1.425c0-0.8,0.673-1.443,1.514-1.443 C107.229,46.04,107.911,46.683,107.911,47.483z M80.666,46.04c-0.85,0-1.51,0.648-1.51,1.443c0,0.792,0.661,1.425,1.51,1.425 c0.828,0,1.51-0.64,1.51-1.425C82.176,46.683,81.487,46.04,80.666,46.04z M83.677,63.476v11.359c0,0.554,0.444,1.004,1.004,1.004 c0.548,0,0.999-0.45,0.999-1.004V63.476c0-4.323,3.504-7.839,7.837-7.839s7.843,3.516,7.843,7.839v11.789 c0,0.558,0.45,1.005,1.005,1.005c0.554,0,1.005-0.447,1.005-1.005V63.476c0-5.431-4.421-9.846-9.853-9.846 C88.091,53.63,83.677,58.045,83.677,63.476z"/>
+                  <path d="M150.444,41.51c0.036,0.304-0.079,0.608-0.299,0.828c-0.311,0.298-7.685,7.331-18.389,8.263c-2.74,0.234-5.262,0.354-7.532,0.354 c-3.587,0-6.583-0.311-9.073-0.911c-0.036,0.088-0.073,0.167-0.128,0.25c0.384,1.215,0.591,2.476,0.591,3.767 c0,3.479-1.431,6.759-3.994,9.109c0.742,1.985,1.139,4.177,1.139,6.394c0,3.888-1.194,7.605-3.289,10.312 c1.656,2.536,16.039,25.955,3.502,47.396c1.899,2.344,5.419,10.625-1.79,37.436l1.534,1.383c0.194,0.188,0.329,0.444,0.335,0.725 l0.098,4.664l9.755,8.981c0.207,0.194,0.328,0.463,0.328,0.743v4.859c0,0.56-0.438,1.004-0.998,1.004h-13.104 c-0.219,0-0.414-0.066-0.603-0.201l-7.995-6.021c-0.243-0.177-0.387-0.457-0.393-0.762l-0.582-12.744 c-0.018-0.408,0.213-0.792,0.593-0.956l1.048-0.476c0-0.023-0.013-0.061-0.013-0.097c0.454-4.908-1.267-11.174-2.094-12.769 c-6.835-13.11-2.122-23.986-1.373-25.539c-0.012-0.018-0.037-0.029-0.042-0.055c-0.144-0.56-2.762-10.278-4.092-17.572 c-1.328,7.288-3.946,17.013-4.089,17.572c-0.024,0.08-0.076,0.129-0.113,0.207c0.911,1.967,5.225,12.611-1.428,25.38 c-0.84,1.596-2.558,7.861-2.095,12.763c0,0.049-0.012,0.073-0.012,0.109l1.035,0.463c0.387,0.165,0.618,0.549,0.597,0.957 l-0.573,12.744c-0.012,0.299-0.155,0.584-0.393,0.761l-8.001,6.022c-0.18,0.146-0.387,0.213-0.603,0.213H64.803 c-0.548,0-0.999-0.45-0.999-1.004v-4.859c0-0.28,0.125-0.549,0.332-0.743l9.764-8.976l0.113-4.67 c0.006-0.274,0.131-0.536,0.334-0.725l1.535-1.383c-7.307-27.176-3.583-35.316-1.708-37.539 c-11.822-20.344,0.536-42.43,3.224-46.768c-2.369-2.731-3.735-6.64-3.735-10.835c0-2.217,0.387-4.415,1.142-6.394 c-2.539-2.345-3.992-5.63-3.992-9.109c0-1.297,0.195-2.558,0.594-3.767c-0.024-0.03-0.045-0.067-0.058-0.101 c-2.375,0.512-5.188,0.768-8.503,0.768c-2.277,0-4.795-0.119-7.539-0.354c-10.702-0.925-18.076-7.964-18.389-8.263 c-0.216-0.219-0.335-0.518-0.298-0.828c1.078-10.022,12.458-22.685,12.93-23.215c1.729-1.355,5.782-0.697,6.978-0.463 c0.162,0.033,0.338,0.113,0.463,0.226c2.643,2.289,2.305,5.145,2.292,5.264c-0.03,0.229-0.137,0.448-0.311,0.603l-2.262,2.113 c-0.183,0.177-0.427,0.268-0.682,0.268h-3.791c-2.025,3.538-2.856,6.168-3.154,8.007c1.857-1.428,4.271-2.231,6.802-2.231 c3.306,0,6.323,1.346,8.238,3.559c1.27-3.495,4.631-5.979,8.516-5.979c2.208,0,4.336,0.813,5.992,2.208 c0.018-0.006,0.018-0.024,0.033-0.037c1.09-1.142,2.332-2.131,3.696-2.938c0.947-0.554,1.945-1.02,3.005-1.388v-3.124 c-2.095-2.408-3.422-6.89-3.422-11.594C81.944,5.736,87.007,0,93.218,0c6.214,0,11.277,5.736,11.277,12.793 c0,4.628-1.363,9.21-3.422,11.594v3.124c1.047,0.365,2.059,0.828,2.999,1.388c1.354,0.792,2.597,1.784,3.711,2.938 c0.122,0.125,0.177,0.274,0.226,0.429c1.699-1.644,4.025-2.6,6.418-2.6c3.897,0,7.258,2.484,8.531,5.979 c1.93-2.213,4.926-3.559,8.227-3.559c2.539,0,4.944,0.804,6.808,2.231c-0.299-1.839-1.133-4.476-3.154-8.007h-3.8 c-0.244,0-0.499-0.091-0.676-0.268l-2.266-2.113c-0.158-0.162-0.28-0.375-0.311-0.609c-0.012-0.122-0.341-2.975,2.29-5.264 c0.128-0.113,0.286-0.186,0.45-0.225c1.413-0.311,6.126-1.221,7.733,0.024c0.061,0.045,0.122,0.101,0.164,0.158 C138.868,18.562,149.372,31.511,150.444,41.51z"/>
+                </svg>
                 <span className="sr-only">Group</span>
               </button>
             </div>