Style : button-custom

src/_components/boxChart/boxChart.scss

@@ -22,8 +22,8 @@
   .doughnut-chart-content {}
 
   .custom-button {
-    padding: 0 32px;
-    height: 40px;
+    padding: 8px;
+    height: auto;
     border-radius: 20px;
     border: none;
     font-size: 16px;

src/_components/renderIcon/index.js

@@ -139,15 +139,21 @@ export const renderIconSearchInput = () => {
     </svg>
   );
 };
-export const renderIconButton = () => {
+export const renderIconButton = (width = 24, height = 24) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="20" stroke-dashoffset="20" d="M3 12h17.5"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="20;0"/></path><path stroke-dasharray="12" stroke-dashoffset="12" d="M21 12l-7 7M21 12l-7 -7"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.2s" values="12;0"/></path></g></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24"><g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="20" stroke-dashoffset="20" d="M3 12h17.5"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="20;0"/></path><path stroke-dasharray="12" stroke-dashoffset="12" d="M21 12l-7 7M21 12l-7 -7"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.2s" values="12;0"/></path></g></svg>
   )
 }
 
-export const renderIconButtonLeft = () => {
+export const renderIconButtonLeft = (width = 24, height = 24) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      preserveAspectRatio="xMidYMid meet"
+    >
       <g fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" transform="rotate(180 12 12)">
         <path strokeDasharray="20" strokeDashoffset="20" d="M3 12h17.5">
           <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="20;0" />
@@ -158,7 +164,7 @@ export const renderIconButtonLeft = () => {
       </g>
     </svg>
   );
-}
+};
 
 export const renderIconDate = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 20 20">