@liner-fe/icon 0.0.4 → 0.0.6

package/assets/timer/index.tsx

@@ -1,39 +1,40 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface TimerProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Timer = ({ fill = false, thick = false, size = 24 }: TimerProps) => {
+export const Timer = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: TimerProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 5.5H30V2.5H18V5.5Z" fill="currentColor"/>
-<path d="M25.5 26V15H22.5V26H25.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M42 26C42 35.9411 33.9411 44 24 44C14.0589 44 6 35.9411 6 26C6 16.0589 14.0589 8 24 8C28.4306 8 32.4873 9.60075 35.6233 12.2555L37.9393 9.93945L40.0606 12.0608L37.7446 14.3768C40.3993 17.5128 42 21.5695 42 26ZM39 26C39 34.2843 32.2843 41 24 41C15.7157 41 9 34.2843 9 26C9 17.7157 15.7157 11 24 11C32.2843 11 39 17.7157 39 26Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 5.5H30V2.5H18V5.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.5 26V15H22.5V26H25.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M42 26C42 35.9411 33.9411 44 24 44C14.0589 44 6 35.9411 6 26C6 16.0589 14.0589 8 24 8C28.4306 8 32.4873 9.60075 35.6233 12.2555L37.9393 9.93945L40.0606 12.0608L37.7446 14.3768C40.3993 17.5128 42 21.5695 42 26ZM39 26C39 34.2843 32.2843 41 24 41C15.7157 41 9 34.2843 9 26C9 17.7157 15.7157 11 24 11C32.2843 11 39 17.7157 39 26Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 5.5H30V2.5H18V5.5Z" fill="currentColor"/>
-<path d="M25.5 26V15H22.5V26H25.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M42 26C42 35.9411 33.9411 44 24 44C14.0589 44 6 35.9411 6 26C6 16.0589 14.0589 8 24 8C28.4306 8 32.4873 9.60075 35.6233 12.2555L37.9393 9.93945L40.0606 12.0608L37.7446 14.3768C40.3993 17.5128 42 21.5695 42 26ZM39 26C39 34.2843 32.2843 41 24 41C15.7157 41 9 34.2843 9 26C9 17.7157 15.7157 11 24 11C32.2843 11 39 17.7157 39 26Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 5.5H30V2.5H18V5.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.5 26V15H22.5V26H25.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M42 26C42 35.9411 33.9411 44 24 44C14.0589 44 6 35.9411 6 26C6 16.0589 14.0589 8 24 8C28.4306 8 32.4873 9.60075 35.6233 12.2555L37.9393 9.93945L40.0606 12.0608L37.7446 14.3768C40.3993 17.5128 42 21.5695 42 26ZM39 26C39 34.2843 32.2843 41 24 41C15.7157 41 9 34.2843 9 26C9 17.7157 15.7157 11 24 11C32.2843 11 39 17.7157 39 26Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 6H30V2H18V6Z" fill="currentColor"/>
-<path d="M26 26V15H22V26H26Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M42 26C42 35.9411 33.9411 44 24 44C14.0589 44 6 35.9411 6 26C6 16.0589 14.0589 8 24 8C28.2501 8 32.1561 9.47298 35.2355 11.9363L37.5858 9.58594L40.4142 12.4144L38.0639 14.7647C40.5271 17.8441 42 21.75 42 26ZM38 26C38 33.732 31.732 40 24 40C16.268 40 10 33.732 10 26C10 18.268 16.268 12 24 12C31.732 12 38 18.268 38 26Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 6H30V2H18V6Z" style={{ fill: `var(--${color})` }}/>
+<path d="M26 26V15H22V26H26Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M42 26C42 35.9411 33.9411 44 24 44C14.0589 44 6 35.9411 6 26C6 16.0589 14.0589 8 24 8C28.2501 8 32.1561 9.47298 35.2355 11.9363L37.5858 9.58594L40.4142 12.4144L38.0639 14.7647C40.5271 17.8441 42 21.75 42 26ZM38 26C38 33.732 31.732 40 24 40C16.268 40 10 33.732 10 26C10 18.268 16.268 12 24 12C31.732 12 38 18.268 38 26Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 5.5H30V2.5H18V5.5Z" fill="currentColor"/>
-<path d="M25.5 26V15H22.5V26H25.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M42 26C42 35.9411 33.9411 44 24 44C14.0589 44 6 35.9411 6 26C6 16.0589 14.0589 8 24 8C28.4306 8 32.4873 9.60075 35.6233 12.2555L37.9393 9.93945L40.0606 12.0608L37.7446 14.3768C40.3993 17.5128 42 21.5695 42 26ZM39 26C39 34.2843 32.2843 41 24 41C15.7157 41 9 34.2843 9 26C9 17.7157 15.7157 11 24 11C32.2843 11 39 17.7157 39 26Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 5.5H30V2.5H18V5.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.5 26V15H22.5V26H25.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M42 26C42 35.9411 33.9411 44 24 44C14.0589 44 6 35.9411 6 26C6 16.0589 14.0589 8 24 8C28.4306 8 32.4873 9.60075 35.6233 12.2555L37.9393 9.93945L40.0606 12.0608L37.7446 14.3768C40.3993 17.5128 42 21.5695 42 26ZM39 26C39 34.2843 32.2843 41 24 41C15.7157 41 9 34.2843 9 26C9 17.7157 15.7157 11 24 11C32.2843 11 39 17.7157 39 26Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/translate/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface TranslateProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Translate = ({ fill = false, thick = false, size = 24 }: TranslateProps) => {
+export const Translate = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: TranslateProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20.5 4V8.5H34V11.5H28.0794C28.0666 11.5338 28.0534 11.5682 28.0399 11.6034C27.7508 12.3514 27.2852 13.4124 26.5644 14.7231C25.4406 16.7663 23.6994 19.4109 21.0461 22.4186C21.2144 22.5912 21.3859 22.7649 21.5607 22.9396C23.4869 24.8659 25.6832 26.5816 27.6805 27.9751L26.5949 30.87C24.338 29.3359 21.7294 27.351 19.4393 25.0609C19.2907 24.9123 19.1443 24.7644 19 24.6171C18.8557 24.7644 18.7093 24.9123 18.5607 25.0609C15.7993 27.8223 12.5769 30.1381 10.0702 31.7535C8.81182 32.5644 7.72247 33.2061 6.9453 33.6463C6.5565 33.8665 6.24524 34.0367 6.02932 34.1527C5.92135 34.2108 5.83717 34.2553 5.779 34.2858L5.71152 34.321L5.69293 34.3307L5.68751 34.3335L5.68578 34.3343C5.68578 34.3343 5.6847 34.3349 5.00003 33.0003C4.31535 31.6656 4.31506 31.6658 4.31506 31.6658L4.31759 31.6645L4.33009 31.658L4.38508 31.6293C4.43479 31.6032 4.5102 31.5634 4.60912 31.5102C4.807 31.4038 5.09873 31.2444 5.46673 31.036C6.20315 30.6189 7.24262 30.0067 8.44511 29.2318C10.8601 27.6754 13.8878 25.4912 16.4394 22.9396C16.6141 22.7649 16.7856 22.5912 16.9539 22.4186C14.3006 19.4109 12.5594 16.7663 11.4357 14.7231C11.3943 14.6479 11.3538 14.5736 11.3141 14.5H14.7736C15.7522 16.1047 17.1165 18.0404 19 20.2017C21.3908 17.4583 22.9452 15.0783 23.9357 13.2774C24.3083 12.5999 24.6015 12.0036 24.8297 11.5H4V8.5H17.5V4H20.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M28.5396 38.5L26.4771 44H23.2731L32.0955 20.4736H34.9044L43.7268 44H40.5228L38.4603 38.5H28.5396ZM29.6646 35.5L33.5 25.2723L37.3353 35.5H29.6646Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5 4V8.5H34V11.5H28.0794C28.0666 11.5338 28.0534 11.5682 28.0399 11.6034C27.7508 12.3514 27.2852 13.4124 26.5644 14.7231C25.4406 16.7663 23.6994 19.4109 21.0461 22.4186C21.2144 22.5912 21.3859 22.7649 21.5607 22.9396C23.4869 24.8659 25.6832 26.5816 27.6805 27.9751L26.5949 30.87C24.338 29.3359 21.7294 27.351 19.4393 25.0609C19.2907 24.9123 19.1443 24.7644 19 24.6171C18.8557 24.7644 18.7093 24.9123 18.5607 25.0609C15.7993 27.8223 12.5769 30.1381 10.0702 31.7535C8.81182 32.5644 7.72247 33.2061 6.9453 33.6463C6.5565 33.8665 6.24524 34.0367 6.02932 34.1527C5.92135 34.2108 5.83717 34.2553 5.779 34.2858L5.71152 34.321L5.69293 34.3307L5.68751 34.3335L5.68578 34.3343C5.68578 34.3343 5.6847 34.3349 5.00003 33.0003C4.31535 31.6656 4.31506 31.6658 4.31506 31.6658L4.31759 31.6645L4.33009 31.658L4.38508 31.6293C4.43479 31.6032 4.5102 31.5634 4.60912 31.5102C4.807 31.4038 5.09873 31.2444 5.46673 31.036C6.20315 30.6189 7.24262 30.0067 8.44511 29.2318C10.8601 27.6754 13.8878 25.4912 16.4394 22.9396C16.6141 22.7649 16.7856 22.5912 16.9539 22.4186C14.3006 19.4109 12.5594 16.7663 11.4357 14.7231C11.3943 14.6479 11.3538 14.5736 11.3141 14.5H14.7736C15.7522 16.1047 17.1165 18.0404 19 20.2017C21.3908 17.4583 22.9452 15.0783 23.9357 13.2774C24.3083 12.5999 24.6015 12.0036 24.8297 11.5H4V8.5H17.5V4H20.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M28.5396 38.5L26.4771 44H23.2731L32.0955 20.4736H34.9044L43.7268 44H40.5228L38.4603 38.5H28.5396ZM29.6646 35.5L33.5 25.2723L37.3353 35.5H29.6646Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20.5 4V8.5H34V11.5H28.0794C28.0666 11.5338 28.0534 11.5682 28.0399 11.6034C27.7508 12.3514 27.2852 13.4124 26.5644 14.7231C25.4406 16.7663 23.6994 19.4109 21.0461 22.4186C21.2144 22.5912 21.3859 22.7649 21.5607 22.9396C23.4869 24.8659 25.6832 26.5816 27.6805 27.9751L26.5949 30.87C24.338 29.3359 21.7294 27.351 19.4393 25.0609C19.2907 24.9123 19.1443 24.7644 19 24.6171C18.8557 24.7644 18.7093 24.9123 18.5607 25.0609C15.7993 27.8223 12.5769 30.1381 10.0702 31.7535C8.81182 32.5644 7.72247 33.2061 6.9453 33.6463C6.5565 33.8665 6.24524 34.0367 6.02932 34.1527C5.92135 34.2108 5.83717 34.2553 5.779 34.2858L5.71152 34.321L5.69293 34.3307L5.68751 34.3335L5.68578 34.3343C5.68578 34.3343 5.6847 34.3349 5.00003 33.0003C4.31535 31.6656 4.31506 31.6658 4.31506 31.6658L4.31759 31.6645L4.33009 31.658L4.38508 31.6293C4.43479 31.6032 4.5102 31.5634 4.60912 31.5102C4.807 31.4038 5.09873 31.2444 5.46673 31.036C6.20315 30.6189 7.24262 30.0067 8.44511 29.2318C10.8601 27.6754 13.8878 25.4912 16.4394 22.9396C16.6141 22.7649 16.7856 22.5912 16.9539 22.4186C14.3006 19.4109 12.5594 16.7663 11.4357 14.7231C11.3943 14.6479 11.3538 14.5736 11.3141 14.5H14.7736C15.7522 16.1047 17.1165 18.0404 19 20.2017C21.3908 17.4583 22.9452 15.0783 23.9357 13.2774C24.3083 12.5999 24.6015 12.0036 24.8297 11.5H4V8.5H17.5V4H20.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M28.5396 38.5L26.4771 44H23.2731L32.0955 20.4736H34.9044L43.7268 44H40.5228L38.4603 38.5H28.5396ZM29.6646 35.5L33.5 25.2723L37.3353 35.5H29.6646Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5 4V8.5H34V11.5H28.0794C28.0666 11.5338 28.0534 11.5682 28.0399 11.6034C27.7508 12.3514 27.2852 13.4124 26.5644 14.7231C25.4406 16.7663 23.6994 19.4109 21.0461 22.4186C21.2144 22.5912 21.3859 22.7649 21.5607 22.9396C23.4869 24.8659 25.6832 26.5816 27.6805 27.9751L26.5949 30.87C24.338 29.3359 21.7294 27.351 19.4393 25.0609C19.2907 24.9123 19.1443 24.7644 19 24.6171C18.8557 24.7644 18.7093 24.9123 18.5607 25.0609C15.7993 27.8223 12.5769 30.1381 10.0702 31.7535C8.81182 32.5644 7.72247 33.2061 6.9453 33.6463C6.5565 33.8665 6.24524 34.0367 6.02932 34.1527C5.92135 34.2108 5.83717 34.2553 5.779 34.2858L5.71152 34.321L5.69293 34.3307L5.68751 34.3335L5.68578 34.3343C5.68578 34.3343 5.6847 34.3349 5.00003 33.0003C4.31535 31.6656 4.31506 31.6658 4.31506 31.6658L4.31759 31.6645L4.33009 31.658L4.38508 31.6293C4.43479 31.6032 4.5102 31.5634 4.60912 31.5102C4.807 31.4038 5.09873 31.2444 5.46673 31.036C6.20315 30.6189 7.24262 30.0067 8.44511 29.2318C10.8601 27.6754 13.8878 25.4912 16.4394 22.9396C16.6141 22.7649 16.7856 22.5912 16.9539 22.4186C14.3006 19.4109 12.5594 16.7663 11.4357 14.7231C11.3943 14.6479 11.3538 14.5736 11.3141 14.5H14.7736C15.7522 16.1047 17.1165 18.0404 19 20.2017C21.3908 17.4583 22.9452 15.0783 23.9357 13.2774C24.3083 12.5999 24.6015 12.0036 24.8297 11.5H4V8.5H17.5V4H20.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M28.5396 38.5L26.4771 44H23.2731L32.0955 20.4736H34.9044L43.7268 44H40.5228L38.4603 38.5H28.5396ZM29.6646 35.5L33.5 25.2723L37.3353 35.5H29.6646Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 4V8H34V12H28.4209C28.1211 12.7497 27.668 13.7535 27.0024 14.9637C25.9052 16.9586 24.2342 19.5075 21.7277 22.3983C21.7895 22.4606 21.8516 22.5231 21.9142 22.5857C23.2558 23.9272 24.7334 25.1681 26.1843 26.2687L24.723 30.1654C22.8651 28.8154 20.881 27.2093 19.0858 25.4141L19 25.3281L18.9142 25.4141C16.1178 28.2105 12.863 30.5481 10.341 32.1734C9.0733 32.9903 7.97565 33.6369 7.19168 34.081C6.79942 34.3032 6.4849 34.4751 6.26598 34.5928C6.15649 34.6516 6.07085 34.6969 6.01128 34.7282L5.94172 34.7645L5.92211 34.7746L5.91421 34.7787C5.91421 34.7787 5.91289 34.7794 4.99998 32.9999C4.08708 31.2204 4.08667 31.2206 4.08667 31.2206L4.08832 31.2197L4.09981 31.2138L4.15271 31.1862C4.20101 31.1608 4.27497 31.1217 4.37238 31.0694C4.56725 30.9646 4.85573 30.807 5.22026 30.6005C5.94989 30.1873 6.98105 29.58 8.17422 28.8111C10.574 27.2646 13.5692 25.1023 16.0858 22.5857C16.1484 22.5231 16.2105 22.4606 16.2723 22.3983C13.781 19.525 12.115 16.9894 11.0175 15H15.6783C16.5212 16.3047 17.6077 17.7994 19 19.4352C21.1546 16.9038 22.5768 14.7101 23.4976 13.036C23.7017 12.6648 23.8814 12.3188 24.0391 12H4V8H17V4H21Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M28.886 39L27.011 44H22.739L31.6273 20.2979H35.3726L44.2609 44H39.9889L38.1139 39H28.886ZM30.386 35L33.5 26.6961L36.6139 35H30.386Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 4V8H34V12H28.4209C28.1211 12.7497 27.668 13.7535 27.0024 14.9637C25.9052 16.9586 24.2342 19.5075 21.7277 22.3983C21.7895 22.4606 21.8516 22.5231 21.9142 22.5857C23.2558 23.9272 24.7334 25.1681 26.1843 26.2687L24.723 30.1654C22.8651 28.8154 20.881 27.2093 19.0858 25.4141L19 25.3281L18.9142 25.4141C16.1178 28.2105 12.863 30.5481 10.341 32.1734C9.0733 32.9903 7.97565 33.6369 7.19168 34.081C6.79942 34.3032 6.4849 34.4751 6.26598 34.5928C6.15649 34.6516 6.07085 34.6969 6.01128 34.7282L5.94172 34.7645L5.92211 34.7746L5.91421 34.7787C5.91421 34.7787 5.91289 34.7794 4.99998 32.9999C4.08708 31.2204 4.08667 31.2206 4.08667 31.2206L4.08832 31.2197L4.09981 31.2138L4.15271 31.1862C4.20101 31.1608 4.27497 31.1217 4.37238 31.0694C4.56725 30.9646 4.85573 30.807 5.22026 30.6005C5.94989 30.1873 6.98105 29.58 8.17422 28.8111C10.574 27.2646 13.5692 25.1023 16.0858 22.5857C16.1484 22.5231 16.2105 22.4606 16.2723 22.3983C13.781 19.525 12.115 16.9894 11.0175 15H15.6783C16.5212 16.3047 17.6077 17.7994 19 19.4352C21.1546 16.9038 22.5768 14.7101 23.4976 13.036C23.7017 12.6648 23.8814 12.3188 24.0391 12H4V8H17V4H21Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M28.886 39L27.011 44H22.739L31.6273 20.2979H35.3726L44.2609 44H39.9889L38.1139 39H28.886ZM30.386 35L33.5 26.6961L36.6139 35H30.386Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20.5 4V8.5H34V11.5H28.0794C28.0666 11.5338 28.0534 11.5682 28.0399 11.6034C27.7508 12.3514 27.2852 13.4124 26.5644 14.7231C25.4406 16.7663 23.6994 19.4109 21.0461 22.4186C21.2144 22.5912 21.3859 22.7649 21.5607 22.9396C23.4869 24.8659 25.6832 26.5816 27.6805 27.9751L26.5949 30.87C24.338 29.3359 21.7294 27.351 19.4393 25.0609C19.2907 24.9123 19.1443 24.7644 19 24.6171C18.8557 24.7644 18.7093 24.9123 18.5607 25.0609C15.7993 27.8223 12.5769 30.1381 10.0702 31.7535C8.81182 32.5644 7.72247 33.2061 6.9453 33.6463C6.5565 33.8665 6.24524 34.0367 6.02932 34.1527C5.92135 34.2108 5.83717 34.2553 5.779 34.2858L5.71152 34.321L5.69293 34.3307L5.68751 34.3335L5.68578 34.3343C5.68578 34.3343 5.6847 34.3349 5.00003 33.0003C4.31535 31.6656 4.31506 31.6658 4.31506 31.6658L4.31759 31.6645L4.33009 31.658L4.38508 31.6293C4.43479 31.6032 4.5102 31.5634 4.60912 31.5102C4.807 31.4038 5.09873 31.2444 5.46673 31.036C6.20315 30.6189 7.24262 30.0067 8.44511 29.2318C10.8601 27.6754 13.8878 25.4912 16.4394 22.9396C16.6141 22.7649 16.7856 22.5912 16.9539 22.4186C14.3006 19.4109 12.5594 16.7663 11.4357 14.7231C11.3943 14.6479 11.3538 14.5736 11.3141 14.5H14.7736C15.7522 16.1047 17.1165 18.0404 19 20.2017C21.3908 17.4583 22.9452 15.0783 23.9357 13.2774C24.3083 12.5999 24.6015 12.0036 24.8297 11.5H4V8.5H17.5V4H20.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M28.5396 38.5L26.4771 44H23.2731L32.0955 20.4736H34.9044L43.7268 44H40.5228L38.4603 38.5H28.5396ZM29.6646 35.5L33.5 25.2723L37.3353 35.5H29.6646Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5 4V8.5H34V11.5H28.0794C28.0666 11.5338 28.0534 11.5682 28.0399 11.6034C27.7508 12.3514 27.2852 13.4124 26.5644 14.7231C25.4406 16.7663 23.6994 19.4109 21.0461 22.4186C21.2144 22.5912 21.3859 22.7649 21.5607 22.9396C23.4869 24.8659 25.6832 26.5816 27.6805 27.9751L26.5949 30.87C24.338 29.3359 21.7294 27.351 19.4393 25.0609C19.2907 24.9123 19.1443 24.7644 19 24.6171C18.8557 24.7644 18.7093 24.9123 18.5607 25.0609C15.7993 27.8223 12.5769 30.1381 10.0702 31.7535C8.81182 32.5644 7.72247 33.2061 6.9453 33.6463C6.5565 33.8665 6.24524 34.0367 6.02932 34.1527C5.92135 34.2108 5.83717 34.2553 5.779 34.2858L5.71152 34.321L5.69293 34.3307L5.68751 34.3335L5.68578 34.3343C5.68578 34.3343 5.6847 34.3349 5.00003 33.0003C4.31535 31.6656 4.31506 31.6658 4.31506 31.6658L4.31759 31.6645L4.33009 31.658L4.38508 31.6293C4.43479 31.6032 4.5102 31.5634 4.60912 31.5102C4.807 31.4038 5.09873 31.2444 5.46673 31.036C6.20315 30.6189 7.24262 30.0067 8.44511 29.2318C10.8601 27.6754 13.8878 25.4912 16.4394 22.9396C16.6141 22.7649 16.7856 22.5912 16.9539 22.4186C14.3006 19.4109 12.5594 16.7663 11.4357 14.7231C11.3943 14.6479 11.3538 14.5736 11.3141 14.5H14.7736C15.7522 16.1047 17.1165 18.0404 19 20.2017C21.3908 17.4583 22.9452 15.0783 23.9357 13.2774C24.3083 12.5999 24.6015 12.0036 24.8297 11.5H4V8.5H17.5V4H20.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M28.5396 38.5L26.4771 44H23.2731L32.0955 20.4736H34.9044L43.7268 44H40.5228L38.4603 38.5H28.5396ZM29.6646 35.5L33.5 25.2723L37.3353 35.5H29.6646Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/trash/index.tsx

@@ -1,37 +1,38 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface TrashProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Trash = ({ fill = false, thick = false, size = 24 }: TrashProps) => {
+export const Trash = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: TrashProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21.5 18.5L21.5 36.5H18.5L18.5 18.5H21.5Z" fill="currentColor"/>
-<path d="M29.5 36.5V18.5H26.5V36.5H29.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M31 11V6C31 4.89543 30.1046 4 29 4H19C17.8954 4 17 4.89543 17 6V11H6.5V14H9.27274L11.8347 42.1811C11.9283 43.2112 12.792 44 13.8264 44H34.1736C35.208 44 36.0717 43.2112 36.1654 42.1811L38.7273 14H41.5V11H31ZM20 7V11H28V7H20ZM35.7149 14H12.2851L14.7397 41H33.2604L35.7149 14Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.5 18.5L21.5 36.5H18.5L18.5 18.5H21.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M29.5 36.5V18.5H26.5V36.5H29.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M31 11V6C31 4.89543 30.1046 4 29 4H19C17.8954 4 17 4.89543 17 6V11H6.5V14H9.27274L11.8347 42.1811C11.9283 43.2112 12.792 44 13.8264 44H34.1736C35.208 44 36.0717 43.2112 36.1654 42.1811L38.7273 14H41.5V11H31ZM20 7V11H28V7H20ZM35.7149 14H12.2851L14.7397 41H33.2604L35.7149 14Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M31 11V6C31 4.89543 30.1046 4 29 4H19C17.8954 4 17 4.89543 17 6V11H6V15H9.36364L11.8347 42.1811C11.9283 43.2112 12.792 44 13.8264 44H34.1736C35.208 44 36.0717 43.2112 36.1654 42.1811L38.6364 15H42V11H31ZM21 8V11H27V8H21ZM21 36.5L21 18.5H18V36.5H21ZM30 36.5V18.5H27V36.5H30Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M31 11V6C31 4.89543 30.1046 4 29 4H19C17.8954 4 17 4.89543 17 6V11H6V15H9.36364L11.8347 42.1811C11.9283 43.2112 12.792 44 13.8264 44H34.1736C35.208 44 36.0717 43.2112 36.1654 42.1811L38.6364 15H42V11H31ZM21 8V11H27V8H21ZM21 36.5L21 18.5H18V36.5H21ZM30 36.5V18.5H27V36.5H30Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M22 18V37H18L18 18H22Z" fill="currentColor"/>
-<path d="M30 37V18H26V37H30Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M31 11V6C31 4.89543 30.1046 4 29 4H19C17.8954 4 17 4.89543 17 6V11H6V15H9.36364L11.8347 42.1811C11.9283 43.2112 12.792 44 13.8264 44H34.1736C35.208 44 36.0717 43.2112 36.1654 42.1811L38.6364 15H42V11H31ZM21 8V11H27V8H21ZM34.6199 15H13.3801L15.6529 40H32.3471L34.6199 15Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 18V37H18L18 18H22Z" style={{ fill: `var(--${color})` }}/>
+<path d="M30 37V18H26V37H30Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M31 11V6C31 4.89543 30.1046 4 29 4H19C17.8954 4 17 4.89543 17 6V11H6V15H9.36364L11.8347 42.1811C11.9283 43.2112 12.792 44 13.8264 44H34.1736C35.208 44 36.0717 43.2112 36.1654 42.1811L38.6364 15H42V11H31ZM21 8V11H27V8H21ZM34.6199 15H13.3801L15.6529 40H32.3471L34.6199 15Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21.5 18.5L21.5 36.5H18.5L18.5 18.5H21.5Z" fill="currentColor"/>
-<path d="M29.5 36.5V18.5H26.5V36.5H29.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M31 11V6C31 4.89543 30.1046 4 29 4H19C17.8954 4 17 4.89543 17 6V11H6.5V14H9.27274L11.8347 42.1811C11.9283 43.2112 12.792 44 13.8264 44H34.1736C35.208 44 36.0717 43.2112 36.1654 42.1811L38.7273 14H41.5V11H31ZM20 7V11H28V7H20ZM35.7149 14H12.2851L14.7397 41H33.2604L35.7149 14Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.5 18.5L21.5 36.5H18.5L18.5 18.5H21.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M29.5 36.5V18.5H26.5V36.5H29.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M31 11V6C31 4.89543 30.1046 4 29 4H19C17.8954 4 17 4.89543 17 6V11H6.5V14H9.27274L11.8347 42.1811C11.9283 43.2112 12.792 44 13.8264 44H34.1736C35.208 44 36.0717 43.2112 36.1654 42.1811L38.7273 14H41.5V11H31ZM20 7V11H28V7H20ZM35.7149 14H12.2851L14.7397 41H33.2604L35.7149 14Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/tune/index.tsx

@@ -1,51 +1,52 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface TuneProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Tune = ({ fill = false, thick = false, size = 24 }: TuneProps) => {
+export const Tune = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: TuneProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M34.5 9.5V5H31.5V17H34.5V12.5H41V9.5H34.5Z" fill="currentColor"/>
-<path d="M7 9.5H27V12.5H7V9.5Z" fill="currentColor"/>
-<path d="M17.5 18L17.5 30H14.5V25.5H7V22.5H14.5V18H17.5Z" fill="currentColor"/>
-<path d="M25.5 43V38.5H41V35.5H25.5V31H22.5L22.5 43H25.5Z" fill="currentColor"/>
-<path d="M41 25.5V22.5H22V25.5H41Z" fill="currentColor"/>
-<path d="M18 35.5H7V38.5H18V35.5Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.5 9.5V5H31.5V17H34.5V12.5H41V9.5H34.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M7 9.5H27V12.5H7V9.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M17.5 18L17.5 30H14.5V25.5H7V22.5H14.5V18H17.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.5 43V38.5H41V35.5H25.5V31H22.5L22.5 43H25.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M41 25.5V22.5H22V25.5H41Z" style={{ fill: `var(--${color})` }}/>
+<path d="M18 35.5H7V38.5H18V35.5Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M34.5 9.5V5H31.5V17H34.5V12.5H41V9.5H34.5Z" fill="currentColor"/>
-<path d="M7 9.5H27V12.5H7V9.5Z" fill="currentColor"/>
-<path d="M17.5 18L17.5 30H14.5V25.5H7V22.5H14.5V18H17.5Z" fill="currentColor"/>
-<path d="M25.5 43V38.5H41V35.5H25.5V31H22.5L22.5 43H25.5Z" fill="currentColor"/>
-<path d="M41 25.5V22.5H22V25.5H41Z" fill="currentColor"/>
-<path d="M18 35.5H7V38.5H18V35.5Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.5 9.5V5H31.5V17H34.5V12.5H41V9.5H34.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M7 9.5H27V12.5H7V9.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M17.5 18L17.5 30H14.5V25.5H7V22.5H14.5V18H17.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.5 43V38.5H41V35.5H25.5V31H22.5L22.5 43H25.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M41 25.5V22.5H22V25.5H41Z" style={{ fill: `var(--${color})` }}/>
+<path d="M18 35.5H7V38.5H18V35.5Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M35 9V5H31V17H35V13H41V9H35Z" fill="currentColor"/>
-<path d="M7 9H27V13H7V9Z" fill="currentColor"/>
-<path d="M18 18L18 30H14V26H7V22H14V18H18Z" fill="currentColor"/>
-<path d="M26 43V39H41V35H26V31H22L22 43H26Z" fill="currentColor"/>
-<path d="M41 22H22V26H41V22Z" fill="currentColor"/>
-<path d="M18 35H7V39H18V35Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35 9V5H31V17H35V13H41V9H35Z" style={{ fill: `var(--${color})` }}/>
+<path d="M7 9H27V13H7V9Z" style={{ fill: `var(--${color})` }}/>
+<path d="M18 18L18 30H14V26H7V22H14V18H18Z" style={{ fill: `var(--${color})` }}/>
+<path d="M26 43V39H41V35H26V31H22L22 43H26Z" style={{ fill: `var(--${color})` }}/>
+<path d="M41 22H22V26H41V22Z" style={{ fill: `var(--${color})` }}/>
+<path d="M18 35H7V39H18V35Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M34.5 9.5V5H31.5V17H34.5V12.5H41V9.5H34.5Z" fill="currentColor"/>
-<path d="M7 9.5H27V12.5H7V9.5Z" fill="currentColor"/>
-<path d="M17.5 18L17.5 30H14.5V25.5H7V22.5H14.5V18H17.5Z" fill="currentColor"/>
-<path d="M25.5 43V38.5H41V35.5H25.5V31H22.5L22.5 43H25.5Z" fill="currentColor"/>
-<path d="M41 25.5V22.5H22V25.5H41Z" fill="currentColor"/>
-<path d="M18 35.5H7V38.5H18V35.5Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.5 9.5V5H31.5V17H34.5V12.5H41V9.5H34.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M7 9.5H27V12.5H7V9.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M17.5 18L17.5 30H14.5V25.5H7V22.5H14.5V18H17.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M25.5 43V38.5H41V35.5H25.5V31H22.5L22.5 43H25.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M41 25.5V22.5H22V25.5H41Z" style={{ fill: `var(--${color})` }}/>
+<path d="M18 35.5H7V38.5H18V35.5Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/twitter/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface TwitterProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Twitter = ({ fill = false, thick = false, size = 24 }: TwitterProps) => {
+export const Twitter = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: TwitterProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.08537 7L20.5998 25.7554L7 41H10.0625L21.9657 27.6492L31.5854 41H42L27.7279 21.1925L40.3834 7H37.3262L26.362 19.2932L17.5053 7H7.08537ZM11.5884 9.33681H16.3742L37.5023 38.6577H32.7165L11.5884 9.33681Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.08537 7L20.5998 25.7554L7 41H10.0625L21.9657 27.6492L31.5854 41H42L27.7279 21.1925L40.3834 7H37.3262L26.362 19.2932L17.5053 7H7.08537ZM11.5884 9.33681H16.3742L37.5023 38.6577H32.7165L11.5884 9.33681Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.08537 7L20.5998 25.7554L7 41H10.0625L21.9657 27.6492L31.5854 41H42L27.7279 21.1925L40.3834 7H37.3262L26.362 19.2932L17.5053 7H7.08537ZM11.5884 9.33681H16.3742L37.5023 38.6577H32.7165L11.5884 9.33681Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.08537 7L20.5998 25.7554L7 41H10.0625L21.9657 27.6492L31.5854 41H42L27.7279 21.1925L40.3834 7H37.3262L26.362 19.2932L17.5053 7H7.08537ZM11.5884 9.33681H16.3742L37.5023 38.6577H32.7165L11.5884 9.33681Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.08537 7L20.5998 25.7554L7 41H10.0625L21.9657 27.6492L31.5854 41H42L27.7279 21.1925L40.3834 7H37.3262L26.362 19.2932L17.5053 7H7.08537ZM11.5884 9.33681H16.3742L37.5023 38.6577H32.7165L11.5884 9.33681Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.08537 7L20.5998 25.7554L7 41H10.0625L21.9657 27.6492L31.5854 41H42L27.7279 21.1925L40.3834 7H37.3262L26.362 19.2932L17.5053 7H7.08537ZM11.5884 9.33681H16.3742L37.5023 38.6577H32.7165L11.5884 9.33681Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.08537 7L20.5998 25.7554L7 41H10.0625L21.9657 27.6492L31.5854 41H42L27.7279 21.1925L40.3834 7H37.3262L26.362 19.2932L17.5053 7H7.08537ZM11.5884 9.33681H16.3742L37.5023 38.6577H32.7165L11.5884 9.33681Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.08537 7L20.5998 25.7554L7 41H10.0625L21.9657 27.6492L31.5854 41H42L27.7279 21.1925L40.3834 7H37.3262L26.362 19.2932L17.5053 7H7.08537ZM11.5884 9.33681H16.3742L37.5023 38.6577H32.7165L11.5884 9.33681Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/undo/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface UndoProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Undo = ({ fill = false, thick = false, size = 24 }: UndoProps) => {
+export const Undo = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: UndoProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.8708 15.9592L15.83 7L17.9513 9.12132L10.5123 16.5603H30.3916C37.019 16.5603 42.3916 21.9329 42.3916 28.5603C42.3916 35.1877 37.019 40.5603 30.3916 40.5603H9.42334V37.5603H30.3916C35.3622 37.5603 39.3916 33.5309 39.3916 28.5603C39.3916 23.5898 35.3622 19.5603 30.3916 19.5603H10.51L17.9513 27.0016L15.83 29.1229L6.8708 20.1638C5.70973 19.0027 5.70973 17.1202 6.8708 15.9592Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.8708 15.9592L15.83 7L17.9513 9.12132L10.5123 16.5603H30.3916C37.019 16.5603 42.3916 21.9329 42.3916 28.5603C42.3916 35.1877 37.019 40.5603 30.3916 40.5603H9.42334V37.5603H30.3916C35.3622 37.5603 39.3916 33.5309 39.3916 28.5603C39.3916 23.5898 35.3622 19.5603 30.3916 19.5603H10.51L17.9513 27.0016L15.83 29.1229L6.8708 20.1638C5.70973 19.0027 5.70973 17.1202 6.8708 15.9592Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.8708 15.9592L15.83 7L17.9513 9.12132L10.5123 16.5603H30.3916C37.019 16.5603 42.3916 21.9329 42.3916 28.5603C42.3916 35.1877 37.019 40.5603 30.3916 40.5603H9.42334V37.5603H30.3916C35.3622 37.5603 39.3916 33.5309 39.3916 28.5603C39.3916 23.5898 35.3622 19.5603 30.3916 19.5603H10.51L17.9513 27.0016L15.83 29.1229L6.8708 20.1638C5.70973 19.0027 5.70973 17.1202 6.8708 15.9592Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.8708 15.9592L15.83 7L17.9513 9.12132L10.5123 16.5603H30.3916C37.019 16.5603 42.3916 21.9329 42.3916 28.5603C42.3916 35.1877 37.019 40.5603 30.3916 40.5603H9.42334V37.5603H30.3916C35.3622 37.5603 39.3916 33.5309 39.3916 28.5603C39.3916 23.5898 35.3622 19.5603 30.3916 19.5603H10.51L17.9513 27.0016L15.83 29.1229L6.8708 20.1638C5.70973 19.0027 5.70973 17.1202 6.8708 15.9592Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.01725 15.9592L14.9764 7L17.8048 9.82843L11.2194 16.4139H29.8916C36.7952 16.4139 42.3916 22.0103 42.3916 28.9139C42.3916 35.8174 36.7952 41.4139 29.8916 41.4139H8.42334V37.4139H29.8916C34.586 37.4139 38.3916 33.6083 38.3916 28.9139C38.3916 24.2195 34.586 20.4139 29.8916 20.4139H11.2171L17.8048 27.0016L14.9764 29.83L6.01725 20.8709C4.66092 19.5145 4.66092 17.3155 6.01725 15.9592Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.01725 15.9592L14.9764 7L17.8048 9.82843L11.2194 16.4139H29.8916C36.7952 16.4139 42.3916 22.0103 42.3916 28.9139C42.3916 35.8174 36.7952 41.4139 29.8916 41.4139H8.42334V37.4139H29.8916C34.586 37.4139 38.3916 33.6083 38.3916 28.9139C38.3916 24.2195 34.586 20.4139 29.8916 20.4139H11.2171L17.8048 27.0016L14.9764 29.83L6.01725 20.8709C4.66092 19.5145 4.66092 17.3155 6.01725 15.9592Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.8708 15.9592L15.83 7L17.9513 9.12132L10.5123 16.5603H30.3916C37.019 16.5603 42.3916 21.9329 42.3916 28.5603C42.3916 35.1877 37.019 40.5603 30.3916 40.5603H9.42334V37.5603H30.3916C35.3622 37.5603 39.3916 33.5309 39.3916 28.5603C39.3916 23.5898 35.3622 19.5603 30.3916 19.5603H10.51L17.9513 27.0016L15.83 29.1229L6.8708 20.1638C5.70973 19.0027 5.70973 17.1202 6.8708 15.9592Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.8708 15.9592L15.83 7L17.9513 9.12132L10.5123 16.5603H30.3916C37.019 16.5603 42.3916 21.9329 42.3916 28.5603C42.3916 35.1877 37.019 40.5603 30.3916 40.5603H9.42334V37.5603H30.3916C35.3622 37.5603 39.3916 33.5309 39.3916 28.5603C39.3916 23.5898 35.3622 19.5603 30.3916 19.5603H10.51L17.9513 27.0016L15.83 29.1229L6.8708 20.1638C5.70973 19.0027 5.70973 17.1202 6.8708 15.9592Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/verification-badge/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface VerificationBadgeProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const VerificationBadge = ({ fill = false, thick = false, size = 24 }: VerificationBadgeProps) => {
+export const VerificationBadge = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: VerificationBadgeProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M35.2528 9.61038L31.3875 3.10156L24.4346 6.09533L17.4817 3.10156L13.6164 9.61038L6.23169 11.2752L6.93037 18.8129L1.93457 24.5003L6.93037 30.1878L6.23169 37.7255L13.6164 39.3903L17.4817 45.8991L24.4346 42.9053L31.3874 45.8991L35.2528 39.3903L42.6375 37.7255L41.9388 30.1878L46.9346 24.5003L41.9388 18.8129L42.6375 11.2752L35.2528 9.61038ZM22.6152 27.52L16.4289 21.3337L13.6005 24.1621L19.7868 30.3484C21.3469 31.9086 23.8758 31.9108 25.4387 30.3534L36.1191 19.7102L33.2956 16.8768L22.6152 27.52Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M35.2528 9.61038L31.3875 3.10156L24.4346 6.09533L17.4817 3.10156L13.6164 9.61038L6.23169 11.2752L6.93037 18.8129L1.93457 24.5003L6.93037 30.1878L6.23169 37.7255L13.6164 39.3903L17.4817 45.8991L24.4346 42.9053L31.3874 45.8991L35.2528 39.3903L42.6375 37.7255L41.9388 30.1878L46.9346 24.5003L41.9388 18.8129L42.6375 11.2752L35.2528 9.61038ZM22.6152 27.52L16.4289 21.3337L13.6005 24.1621L19.7868 30.3484C21.3469 31.9086 23.8758 31.9108 25.4387 30.3534L36.1191 19.7102L33.2956 16.8768L22.6152 27.52Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M35.2524 9.61038L31.3871 3.10156L24.4342 6.09533L17.4813 3.10156L13.616 9.61038L6.23132 11.2752L6.93001 18.8129L1.9342 24.5003L6.93001 30.1878L6.23132 37.7255L13.616 39.3903L17.4813 45.8991L24.4342 42.9053L31.3871 45.8991L35.2524 39.3903L42.6371 37.7255L41.9384 30.1878L46.9342 24.5003L41.9384 18.8129L42.6371 11.2752L35.2524 9.61038ZM22.2616 27.8736L16.0753 21.6873L13.954 23.8086L20.1403 29.9949C21.5054 31.36 23.7182 31.362 25.0857 29.9992L35.7662 19.356L33.6485 17.231L22.9681 27.8742C22.7727 28.0689 22.4566 28.0686 22.2616 27.8736Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M35.2523 9.61038L31.387 3.10156L24.4341 6.09533L17.4812 3.10156L13.6159 9.61038L6.2312 11.2752L6.92989 18.8129L1.93408 24.5003L6.92989 30.1878L6.2312 37.7255L13.6159 39.3903L17.4812 45.8991L24.4341 42.9053L31.387 45.8991L35.2523 39.3903L42.637 37.7255L41.9383 30.1878L46.9341 24.5003L41.9383 18.8129L42.637 11.2752L35.2523 9.61038ZM22.2615 27.8736L16.0752 21.6873L13.9539 23.8086L20.1402 29.9949C21.5053 31.36 23.7181 31.362 25.0856 29.9992L35.766 19.356L33.6484 17.231L22.968 27.8742C22.7726 28.0689 22.4565 28.0686 22.2615 27.8736Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M35.2524 9.61038L31.3871 3.10156L24.4342 6.09533L17.4813 3.10156L13.616 9.61038L6.23132 11.2752L6.93001 18.8129L1.9342 24.5003L6.93001 30.1878L6.23132 37.7255L13.616 39.3903L17.4813 45.8991L24.4342 42.9053L31.3871 45.8991L35.2524 39.3903L42.6371 37.7255L41.9384 30.1878L46.9342 24.5003L41.9384 18.8129L42.6371 11.2752L35.2524 9.61038ZM22.2616 27.8736L16.0753 21.6873L13.954 23.8086L20.1403 29.9949C21.5054 31.36 23.7182 31.362 25.0857 29.9992L35.7662 19.356L33.6485 17.231L22.9681 27.8742C22.7727 28.0689 22.4566 28.0686 22.2616 27.8736Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M35.2523 9.61038L31.387 3.10156L24.4341 6.09533L17.4812 3.10156L13.6159 9.61038L6.2312 11.2752L6.92989 18.8129L1.93408 24.5003L6.92989 30.1878L6.2312 37.7255L13.6159 39.3903L17.4812 45.8991L24.4341 42.9053L31.387 45.8991L35.2523 39.3903L42.637 37.7255L41.9383 30.1878L46.9341 24.5003L41.9383 18.8129L42.637 11.2752L35.2523 9.61038ZM22.2615 27.8736L16.0752 21.6873L13.9539 23.8086L20.1402 29.9949C21.5053 31.36 23.7181 31.362 25.0856 29.9992L35.766 19.356L33.6484 17.231L22.968 27.8742C22.7726 28.0689 22.4565 28.0686 22.2615 27.8736Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M35.2524 9.61038L31.3871 3.10156L24.4342 6.09533L17.4813 3.10156L13.616 9.61038L6.23132 11.2752L6.93001 18.8129L1.9342 24.5003L6.93001 30.1878L6.23132 37.7255L13.616 39.3903L17.4813 45.8991L24.4342 42.9053L31.3871 45.8991L35.2524 39.3903L42.6371 37.7255L41.9384 30.1878L46.9342 24.5003L41.9384 18.8129L42.6371 11.2752L35.2524 9.61038ZM22.2616 27.8736L16.0753 21.6873L13.954 23.8086L20.1403 29.9949C21.5054 31.36 23.7182 31.362 25.0857 29.9992L35.7662 19.356L33.6485 17.231L22.9681 27.8742C22.7727 28.0689 22.4566 28.0686 22.2616 27.8736Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M35.2523 9.61038L31.387 3.10156L24.4341 6.09533L17.4812 3.10156L13.6159 9.61038L6.2312 11.2752L6.92989 18.8129L1.93408 24.5003L6.92989 30.1878L6.2312 37.7255L13.6159 39.3903L17.4812 45.8991L24.4341 42.9053L31.387 45.8991L35.2523 39.3903L42.637 37.7255L41.9383 30.1878L46.9341 24.5003L41.9383 18.8129L42.637 11.2752L35.2523 9.61038ZM22.2615 27.8736L16.0752 21.6873L13.9539 23.8086L20.1402 29.9949C21.5053 31.36 23.7181 31.362 25.0856 29.9992L35.766 19.356L33.6484 17.231L22.968 27.8742C22.7726 28.0689 22.4565 28.0686 22.2615 27.8736Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/view-list/index.tsx

@@ -1,31 +1,32 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ViewListProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const ViewList = ({ fill = false, thick = false, size = 24 }: ViewListProps) => {
+export const ViewList = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ViewListProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M4 10.5C4 9.39543 4.89543 8.5 6 8.5H42C43.1046 8.5 44 9.39543 44 10.5V37.5C44 38.6046 43.1046 39.5 42 39.5H6C4.89543 39.5 4 38.6046 4 37.5V10.5ZM7 18L7 11.5H14.5V18L7 18ZM7 21L7 27H14.5V21L7 21ZM7 30L7 36.5H14.5V30H7ZM17.5 36.5H41V30L17.5 30V36.5ZM41 27V21L17.5 21V27L41 27ZM41 18V11.5H17.5V18L41 18Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M4 10.5C4 9.39543 4.89543 8.5 6 8.5H42C43.1046 8.5 44 9.39543 44 10.5V37.5C44 38.6046 43.1046 39.5 42 39.5H6C4.89543 39.5 4 38.6046 4 37.5V10.5ZM7 18L7 11.5H14.5V18L7 18ZM7 21L7 27H14.5V21L7 21ZM7 30L7 36.5H14.5V30H7ZM17.5 36.5H41V30L17.5 30V36.5ZM41 27V21L17.5 21V27L41 27ZM41 18V11.5H17.5V18L41 18Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M4 10.5C4 9.39543 4.89543 8.5 6 8.5H42C43.1046 8.5 44 9.39543 44 10.5V37.5C44 38.6046 43.1046 39.5 42 39.5H6C4.89543 39.5 4 38.6046 4 37.5V10.5ZM7 18L7 11.5H14.5V18L7 18ZM7 21L7 27H14.5V21L7 21ZM7 30L7 36.5H14.5V30H7ZM17.5 36.5H41V30L17.5 30V36.5ZM41 27V21L17.5 21V27L41 27ZM41 18V11.5H17.5V18L41 18Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M4 10.5C4 9.39543 4.89543 8.5 6 8.5H42C43.1046 8.5 44 9.39543 44 10.5V37.5C44 38.6046 43.1046 39.5 42 39.5H6C4.89543 39.5 4 38.6046 4 37.5V10.5ZM7 18L7 11.5H14.5V18L7 18ZM7 21L7 27H14.5V21L7 21ZM7 30L7 36.5H14.5V30H7ZM17.5 36.5H41V30L17.5 30V36.5ZM41 27V21L17.5 21V27L41 27ZM41 18V11.5H17.5V18L41 18Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M4 10.5C4 9.39543 4.89543 8.5 6 8.5H42C43.1046 8.5 44 9.39543 44 10.5V37.5C44 38.6046 43.1046 39.5 42 39.5H6C4.89543 39.5 4 38.6046 4 37.5V10.5ZM8 17.5V12.5H14V17.5L8 17.5ZM8 21.5V26.5H14V21.5L8 21.5ZM8 30.5V35.5H14V30.5H8ZM18 35.5H40V30.5L18 30.5V35.5ZM40 26.5V21.5L18 21.5V26.5L40 26.5ZM40 17.5V12.5H18V17.5L40 17.5Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M4 10.5C4 9.39543 4.89543 8.5 6 8.5H42C43.1046 8.5 44 9.39543 44 10.5V37.5C44 38.6046 43.1046 39.5 42 39.5H6C4.89543 39.5 4 38.6046 4 37.5V10.5ZM8 17.5V12.5H14V17.5L8 17.5ZM8 21.5V26.5H14V21.5L8 21.5ZM8 30.5V35.5H14V30.5H8ZM18 35.5H40V30.5L18 30.5V35.5ZM40 26.5V21.5L18 21.5V26.5L40 26.5ZM40 17.5V12.5H18V17.5L40 17.5Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M4 10.5C4 9.39543 4.89543 8.5 6 8.5H42C43.1046 8.5 44 9.39543 44 10.5V37.5C44 38.6046 43.1046 39.5 42 39.5H6C4.89543 39.5 4 38.6046 4 37.5V10.5ZM7 18L7 11.5H14.5V18L7 18ZM7 21L7 27H14.5V21L7 21ZM7 30L7 36.5H14.5V30H7ZM17.5 36.5H41V30L17.5 30V36.5ZM41 27V21L17.5 21V27L41 27ZM41 18V11.5H17.5V18L41 18Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M4 10.5C4 9.39543 4.89543 8.5 6 8.5H42C43.1046 8.5 44 9.39543 44 10.5V37.5C44 38.6046 43.1046 39.5 42 39.5H6C4.89543 39.5 4 38.6046 4 37.5V10.5ZM7 18L7 11.5H14.5V18L7 18ZM7 21L7 27H14.5V21L7 21ZM7 30L7 36.5H14.5V30H7ZM17.5 36.5H41V30L17.5 30V36.5ZM41 27V21L17.5 21V27L41 27ZM41 18V11.5H17.5V18L41 18Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/visibility/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface VisibilityProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Visibility = ({ fill = false, thick = false, size = 24 }: VisibilityProps) => {
+export const Visibility = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: VisibilityProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M29 24C29 26.7614 26.7614 29 24 29C21.2386 29 19 26.7614 19 24C19 21.2386 21.2386 19 24 19C26.7614 19 29 21.2386 29 24Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M24 38C36.1503 38 46 26 46 24C46 22 36.1503 10 24 10C11.8497 10 2 22 2 24C2 26 11.8497 38 24 38ZM33 24C33 28.9706 28.9706 33 24 33C19.0294 33 15 28.9706 15 24C15 19.0294 19.0294 15 24 15C28.9706 15 33 19.0294 33 24Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29 24C29 26.7614 26.7614 29 24 29C21.2386 29 19 26.7614 19 24C19 21.2386 21.2386 19 24 19C26.7614 19 29 21.2386 29 24Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M24 38C36.1503 38 46 26 46 24C46 22 36.1503 10 24 10C11.8497 10 2 22 2 24C2 26 11.8497 38 24 38ZM33 24C33 28.9706 28.9706 33 24 33C19.0294 33 15 28.9706 15 24C15 19.0294 19.0294 15 24 15C28.9706 15 33 19.0294 33 24Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M30 24C30 27.3137 27.3137 30 24 30C20.6863 30 18 27.3137 18 24C18 20.6863 20.6863 18 24 18C27.3137 18 30 20.6863 30 24Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M24 38C36.1503 38 46 26 46 24C46 22 36.1503 10 24 10C11.8497 10 2 22 2 24C2 26 11.8497 38 24 38ZM33 24C33 28.9706 28.9706 33 24 33C19.0294 33 15 28.9706 15 24C15 19.0294 19.0294 15 24 15C28.9706 15 33 19.0294 33 24Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30 24C30 27.3137 27.3137 30 24 30C20.6863 30 18 27.3137 18 24C18 20.6863 20.6863 18 24 18C27.3137 18 30 20.6863 30 24Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M24 38C36.1503 38 46 26 46 24C46 22 36.1503 10 24 10C11.8497 10 2 22 2 24C2 26 11.8497 38 24 38ZM33 24C33 28.9706 28.9706 33 24 33C19.0294 33 15 28.9706 15 24C15 19.0294 19.0294 15 24 15C28.9706 15 33 19.0294 33 24Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M32 24C32 28.4183 28.4183 32 24 32C19.5817 32 16 28.4183 16 24C16 19.5817 19.5817 16 24 16C28.4183 16 32 19.5817 32 24ZM28 24C28 26.2091 26.2091 28 24 28C21.7909 28 20 26.2091 20 24C20 21.7909 21.7909 20 24 20C26.2091 20 28 21.7909 28 24Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M46 24C46 26 36.1503 38 24 38C11.8497 38 2 26 2 24C2 22 11.8497 10 24 10C36.1503 10 46 22 46 24ZM41.1349 23.4515C41.292 23.6499 41.4304 23.8332 41.5511 24C41.4304 24.1668 41.292 24.3501 41.1349 24.5485C40.2049 25.7232 38.7984 27.2051 37.0268 28.6514C33.4144 31.6003 28.7889 34 24 34C19.2111 34 14.5856 31.6003 10.9732 28.6514C9.20156 27.2051 7.79508 25.7232 6.86507 24.5485C6.70804 24.3501 6.56963 24.1668 6.44888 24C6.56963 23.8332 6.70804 23.6499 6.86507 23.4515C7.79508 22.2768 9.20156 20.7949 10.9732 19.3486C14.5856 16.3997 19.2111 14 24 14C28.7889 14 33.4144 16.3997 37.0268 19.3486C38.7984 20.7949 40.2049 22.2768 41.1349 23.4515Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M32 24C32 28.4183 28.4183 32 24 32C19.5817 32 16 28.4183 16 24C16 19.5817 19.5817 16 24 16C28.4183 16 32 19.5817 32 24ZM28 24C28 26.2091 26.2091 28 24 28C21.7909 28 20 26.2091 20 24C20 21.7909 21.7909 20 24 20C26.2091 20 28 21.7909 28 24Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M46 24C46 26 36.1503 38 24 38C11.8497 38 2 26 2 24C2 22 11.8497 10 24 10C36.1503 10 46 22 46 24ZM41.1349 23.4515C41.292 23.6499 41.4304 23.8332 41.5511 24C41.4304 24.1668 41.292 24.3501 41.1349 24.5485C40.2049 25.7232 38.7984 27.2051 37.0268 28.6514C33.4144 31.6003 28.7889 34 24 34C19.2111 34 14.5856 31.6003 10.9732 28.6514C9.20156 27.2051 7.79508 25.7232 6.86507 24.5485C6.70804 24.3501 6.56963 24.1668 6.44888 24C6.56963 23.8332 6.70804 23.6499 6.86507 23.4515C7.79508 22.2768 9.20156 20.7949 10.9732 19.3486C14.5856 16.3997 19.2111 14 24 14C28.7889 14 33.4144 16.3997 37.0268 19.3486C38.7984 20.7949 40.2049 22.2768 41.1349 23.4515Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M32 24C32 28.4183 28.4183 32 24 32C19.5817 32 16 28.4183 16 24C16 19.5817 19.5817 16 24 16C28.4183 16 32 19.5817 32 24ZM29 24C29 26.7614 26.7614 29 24 29C21.2386 29 19 26.7614 19 24C19 21.2386 21.2386 19 24 19C26.7614 19 29 21.2386 29 24Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M46 24C46 26 36.1503 38 24 38C11.8497 38 2 26 2 24C2 22 11.8497 10 24 10C36.1503 10 46 22 46 24ZM43.0785 23.4302L43.0819 23.4216C43.0857 23.4117 43.0863 23.4089 43.0846 23.413C43.0835 23.4158 43.0813 23.4215 43.0785 23.4302ZM41.919 22.8308C42.2832 23.2909 42.5616 23.6856 42.7608 24C42.5616 24.3144 42.2832 24.7091 41.919 25.1692C40.9432 26.4018 39.4856 27.9351 37.6592 29.426C33.9546 32.4502 29.1105 35 24 35C18.8895 35 14.0454 32.4502 10.3408 29.426C8.51443 27.9351 7.05684 26.4018 6.08102 25.1692C5.71684 24.7091 5.43835 24.3144 5.23917 24C5.43835 23.6856 5.71684 23.2909 6.08102 22.8308C7.05684 21.5982 8.51443 20.0649 10.3408 18.574C14.0454 15.5498 18.8895 13 24 13C29.1105 13 33.9546 15.5498 37.6592 18.574C39.4856 20.0649 40.9432 21.5982 41.919 22.8308ZM4.91812 23.4216C4.91179 23.405 4.91434 23.4086 4.92157 23.4302L4.91812 23.4216ZM4.91812 24.5784L4.92157 24.5698C4.91434 24.5914 4.91179 24.595 4.91812 24.5784ZM43.0785 24.5698L43.0819 24.5784C43.0882 24.595 43.0857 24.5914 43.0785 24.5698Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M32 24C32 28.4183 28.4183 32 24 32C19.5817 32 16 28.4183 16 24C16 19.5817 19.5817 16 24 16C28.4183 16 32 19.5817 32 24ZM29 24C29 26.7614 26.7614 29 24 29C21.2386 29 19 26.7614 19 24C19 21.2386 21.2386 19 24 19C26.7614 19 29 21.2386 29 24Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M46 24C46 26 36.1503 38 24 38C11.8497 38 2 26 2 24C2 22 11.8497 10 24 10C36.1503 10 46 22 46 24ZM43.0785 23.4302L43.0819 23.4216C43.0857 23.4117 43.0863 23.4089 43.0846 23.413C43.0835 23.4158 43.0813 23.4215 43.0785 23.4302ZM41.919 22.8308C42.2832 23.2909 42.5616 23.6856 42.7608 24C42.5616 24.3144 42.2832 24.7091 41.919 25.1692C40.9432 26.4018 39.4856 27.9351 37.6592 29.426C33.9546 32.4502 29.1105 35 24 35C18.8895 35 14.0454 32.4502 10.3408 29.426C8.51443 27.9351 7.05684 26.4018 6.08102 25.1692C5.71684 24.7091 5.43835 24.3144 5.23917 24C5.43835 23.6856 5.71684 23.2909 6.08102 22.8308C7.05684 21.5982 8.51443 20.0649 10.3408 18.574C14.0454 15.5498 18.8895 13 24 13C29.1105 13 33.9546 15.5498 37.6592 18.574C39.4856 20.0649 40.9432 21.5982 41.919 22.8308ZM4.91812 23.4216C4.91179 23.405 4.91434 23.4086 4.92157 23.4302L4.91812 23.4216ZM4.91812 24.5784L4.92157 24.5698C4.91434 24.5914 4.91179 24.595 4.91812 24.5784ZM43.0785 24.5698L43.0819 24.5784C43.0882 24.595 43.0857 24.5914 43.0785 24.5698Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };