@liner-fe/icon 0.0.25 → 0.0.27

package/assets/clock/index.tsx

@@ -4,33 +4,34 @@ import { BasicColorType } from '@liner-fe/prism';
 interface ClockProps {
   fill?: boolean;
   thick?: boolean;
+  className?: string;
   size?: number
   color?: BasicColorType;
 }
 
 export const Clock = forwardRef<SVGSVGElement, ClockProps>(
-  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary', className, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M22.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M22.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M21.9682 13.0006L21.9684 23.1789L15.5834 29.5883L18.4172 32.4114L25.9684 24.8313L25.9682 13.0006L21.9682 13.0006Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM38 24C38 31.732 31.732 38 24 38C16.268 38 10 31.732 10 24C10 16.268 16.268 10 24 10C31.732 10 38 16.268 38 24Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M22.4682 13.0001L22.4684 23.385L15.9376 29.9407L18.0629 32.058L25.4684 24.6243L25.4682 13.0001L22.4682 13.0001Z" style={{ fill: `var(--${color})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24ZM39 24C39 32.2843 32.2843 39 24 39C15.7157 39 9 32.2843 9 24C9 15.7157 15.7157 9 24 9C32.2843 9 39 15.7157 39 24Z" style={{ fill: `var(--${color})` }}/>
 </svg>

package/assets/close/index.tsx

@@ -4,30 +4,31 @@ import { BasicColorType } from '@liner-fe/prism';
 interface CloseProps {
   fill?: boolean;
   thick?: boolean;
+  className?: string;
   size?: number
   color?: BasicColorType;
 }
 
 export const Close = forwardRef<SVGSVGElement, CloseProps>(
-  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary', className, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path fillRule="evenodd" clipRule="evenodd" d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM24.0304 21.2242L29.6689 15.5858L32.4973 18.4142L26.8588 24.0527L32.4504 29.6443L29.622 32.4727L24.0304 26.8811L18.4859 32.4256L15.6574 29.5972L21.202 24.0527L15.6106 18.4613L18.439 15.6329L24.0304 21.2242Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path fillRule="evenodd" clipRule="evenodd" d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM24.0304 21.9314L30.0224 15.9393L32.1437 18.0607L26.1517 24.0527L32.0969 29.9978L29.9756 32.1192L24.0304 26.174L18.1323 32.0721L16.011 29.9508L21.9091 24.0527L15.9641 18.1077L18.0855 15.9864L24.0304 21.9314Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M24.0006 21.1712L12.4153 9.58594L9.58692 12.4144L21.1722 23.9997L9.58691 35.585L12.4153 38.4134L24.0006 26.8281L35.5859 38.4134L38.4144 35.585L26.8291 23.9997L38.4144 12.4144L35.5859 9.58594L24.0006 21.1712Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M24.0006 21.8783L12.0618 9.93945L9.94043 12.0608L21.8793 23.9996L9.94043 35.9385L12.0618 38.0598L24.0006 26.1209L35.9395 38.0598L38.0608 35.9385L26.1219 23.9996L38.0608 12.0608L35.9395 9.93946L24.0006 21.8783Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;

package/assets/close-fill/index.tsx

@@ -4,33 +4,34 @@ import { BasicColorType } from '@liner-fe/prism';
 interface CloseFillProps {
   fill?: boolean;
   thick?: boolean;
+  className?: string;
   size?: number
   color?: BasicColorType;
 }
 
 export const CloseFill = forwardRef<SVGSVGElement, CloseFillProps>(
-  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary', className, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--${color})` }}/>
 <path d="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6575 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" fill="white"/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--${color})` }}/>
 <path d="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6575 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" fill="white"/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--${color})` }}/>
 <path d="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6575 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" fill="white"/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24Z" style={{ fill: `var(--${color})` }}/>
 <path d="M32.4973 18.4141L26.8586 24.0527L32.4504 29.6445L29.6223 32.4727L24.0295 26.8809L18.4856 32.4258L15.6575 29.5977L21.2014 24.0527L15.6106 18.4619L18.4387 15.6328L24.0305 21.2246L29.6692 15.5859L32.4973 18.4141Z" fill="white"/>
 </svg>

package/assets/color-docx/index.tsx

@@ -4,14 +4,15 @@ import { BasicColorType } from '@liner-fe/prism';
 interface ColorDocxProps {
   fill?: boolean;
   thick?: boolean;
+  className?: string;
   size?: number
   color?: BasicColorType;
 }
 
 export const ColorDocx = forwardRef<SVGSVGElement, ColorDocxProps>(
-  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary', className, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.1318 4C23.6862 4.00012 24.2156 4.23041 24.5938 4.63574L38.4619 19.501C38.8074 19.8713 39 20.3588 39 20.8652V27H36V21.5771H26.001C24.0681 21.5771 22.5011 20.01 22.501 18.0771V7H12V27H9V6C9 4.89543 9.89543 4 11 4H23.1318ZM25.501 18.0771C25.5011 18.3532 25.7249 18.5771 26.001 18.5771H33.498L25.501 10.0059V18.0771Z" style={{ fill: `var(--${color})` }}/>
 <rect x="1" y="27" width="46" height="20" fill="#2A59B8"/>
 <path d="M33.9874 44.0009C33.893 44.0009 33.8324 43.974 33.8054 43.92C33.7784 43.8661 33.7784 43.7987 33.8054 43.7178L36.5556 36.9838C36.5691 36.9434 36.5691 36.9029 36.5556 36.8625L33.8054 30.1285C33.7919 30.1015 33.7852 30.0611 33.7852 30.0071C33.7852 29.8993 33.8526 29.8454 33.9874 29.8454H36.4141C36.5489 29.8454 36.6365 29.9128 36.677 30.0476L38.0318 33.9303C38.0453 33.9707 38.0656 33.9909 38.0925 33.9909C38.1195 33.9909 38.1397 33.9707 38.1532 33.9303L39.5081 30.0476C39.5485 29.9128 39.6361 29.8454 39.771 29.8454H42.1774C42.2718 29.8454 42.3324 29.8723 42.3594 29.9263C42.3864 29.9802 42.3864 30.0476 42.3594 30.1285L39.6092 36.8625C39.5957 36.9029 39.5957 36.9434 39.6092 36.9838L42.3594 43.7178C42.3729 43.7448 42.3796 43.7852 42.3796 43.8391C42.3796 43.947 42.3122 44.0009 42.1774 44.0009H39.771C39.6361 44.0009 39.5485 43.9335 39.5081 43.7987L38.1532 39.9363C38.1397 39.8958 38.1195 39.8756 38.0925 39.8756C38.0656 39.8756 38.0453 39.8958 38.0318 39.9363L36.6567 43.7987C36.6163 43.9335 36.5287 44.0009 36.3938 44.0009H33.9874Z" fill="white"/>
@@ -21,7 +22,7 @@ export const ColorDocx = forwardRef<SVGSVGElement, ColorDocxProps>(
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.1318 4C23.6862 4.00012 24.2156 4.23041 24.5938 4.63574L38.4619 19.501C38.8074 19.8713 39 20.3588 39 20.8652V27H36V21.5771H26.001C24.0681 21.5771 22.5011 20.01 22.501 18.0771V7H12V27H9V6C9 4.89543 9.89543 4 11 4H23.1318ZM25.501 18.0771C25.5011 18.3532 25.7249 18.5771 26.001 18.5771H33.498L25.501 10.0059V18.0771Z" style={{ fill: `var(--${color})` }}/>
 <rect x="1" y="27" width="46" height="20" fill="#2A59B8"/>
 <path d="M33.9874 44.0009C33.893 44.0009 33.8324 43.974 33.8054 43.92C33.7784 43.8661 33.7784 43.7987 33.8054 43.7178L36.5556 36.9838C36.5691 36.9434 36.5691 36.9029 36.5556 36.8625L33.8054 30.1285C33.7919 30.1015 33.7852 30.0611 33.7852 30.0071C33.7852 29.8993 33.8526 29.8454 33.9874 29.8454H36.4141C36.5489 29.8454 36.6365 29.9128 36.677 30.0476L38.0318 33.9303C38.0453 33.9707 38.0656 33.9909 38.0925 33.9909C38.1195 33.9909 38.1397 33.9707 38.1532 33.9303L39.5081 30.0476C39.5485 29.9128 39.6361 29.8454 39.771 29.8454H42.1774C42.2718 29.8454 42.3324 29.8723 42.3594 29.9263C42.3864 29.9802 42.3864 30.0476 42.3594 30.1285L39.6092 36.8625C39.5957 36.9029 39.5957 36.9434 39.6092 36.9838L42.3594 43.7178C42.3729 43.7448 42.3796 43.7852 42.3796 43.8391C42.3796 43.947 42.3122 44.0009 42.1774 44.0009H39.771C39.6361 44.0009 39.5485 43.9335 39.5081 43.7987L38.1532 39.9363C38.1397 39.8958 38.1195 39.8756 38.0925 39.8756C38.0656 39.8756 38.0453 39.8958 38.0318 39.9363L36.6567 43.7987C36.6163 43.9335 36.5287 44.0009 36.3938 44.0009H33.9874Z" fill="white"/>
@@ -31,7 +32,7 @@ export const ColorDocx = forwardRef<SVGSVGElement, ColorDocxProps>(
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.1318 4C23.6862 4.00012 24.2156 4.23041 24.5938 4.63574L38.4619 19.501C38.8074 19.8713 39 20.3588 39 20.8652V27H36V21.5771H26.001C24.0681 21.5771 22.5011 20.01 22.501 18.0771V7H12V27H9V6C9 4.89543 9.89543 4 11 4H23.1318ZM25.501 18.0771C25.5011 18.3532 25.7249 18.5771 26.001 18.5771H33.498L25.501 10.0059V18.0771Z" style={{ fill: `var(--${color})` }}/>
 <rect x="1" y="27" width="46" height="20" fill="#2A59B8"/>
 <path d="M33.9874 44.0009C33.893 44.0009 33.8324 43.974 33.8054 43.92C33.7784 43.8661 33.7784 43.7987 33.8054 43.7178L36.5556 36.9838C36.5691 36.9434 36.5691 36.9029 36.5556 36.8625L33.8054 30.1285C33.7919 30.1015 33.7852 30.0611 33.7852 30.0071C33.7852 29.8993 33.8526 29.8454 33.9874 29.8454H36.4141C36.5489 29.8454 36.6365 29.9128 36.677 30.0476L38.0318 33.9303C38.0453 33.9707 38.0656 33.9909 38.0925 33.9909C38.1195 33.9909 38.1397 33.9707 38.1532 33.9303L39.5081 30.0476C39.5485 29.9128 39.6361 29.8454 39.771 29.8454H42.1774C42.2718 29.8454 42.3324 29.8723 42.3594 29.9263C42.3864 29.9802 42.3864 30.0476 42.3594 30.1285L39.6092 36.8625C39.5957 36.9029 39.5957 36.9434 39.6092 36.9838L42.3594 43.7178C42.3729 43.7448 42.3796 43.7852 42.3796 43.8391C42.3796 43.947 42.3122 44.0009 42.1774 44.0009H39.771C39.6361 44.0009 39.5485 43.9335 39.5081 43.7987L38.1532 39.9363C38.1397 39.8958 38.1195 39.8756 38.0925 39.8756C38.0656 39.8756 38.0453 39.8958 38.0318 39.9363L36.6567 43.7987C36.6163 43.9335 36.5287 44.0009 36.3938 44.0009H33.9874Z" fill="white"/>
@@ -42,7 +43,7 @@ export const ColorDocx = forwardRef<SVGSVGElement, ColorDocxProps>(
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.1318 4C23.6862 4.00012 24.2156 4.23041 24.5938 4.63574L38.4619 19.501C38.8074 19.8713 39 20.3588 39 20.8652V27H36V21.5771H26.001C24.0681 21.5771 22.5011 20.01 22.501 18.0771V7H12V27H9V6C9 4.89543 9.89543 4 11 4H23.1318ZM25.501 18.0771C25.5011 18.3532 25.7249 18.5771 26.001 18.5771H33.498L25.501 10.0059V18.0771Z" style={{ fill: `var(--${color})` }}/>
 <rect x="1" y="27" width="46" height="20" fill="#2A59B8"/>
 <path d="M33.9874 44.0009C33.893 44.0009 33.8324 43.974 33.8054 43.92C33.7784 43.8661 33.7784 43.7987 33.8054 43.7178L36.5556 36.9838C36.5691 36.9434 36.5691 36.9029 36.5556 36.8625L33.8054 30.1285C33.7919 30.1015 33.7852 30.0611 33.7852 30.0071C33.7852 29.8993 33.8526 29.8454 33.9874 29.8454H36.4141C36.5489 29.8454 36.6365 29.9128 36.677 30.0476L38.0318 33.9303C38.0453 33.9707 38.0656 33.9909 38.0925 33.9909C38.1195 33.9909 38.1397 33.9707 38.1532 33.9303L39.5081 30.0476C39.5485 29.9128 39.6361 29.8454 39.771 29.8454H42.1774C42.2718 29.8454 42.3324 29.8723 42.3594 29.9263C42.3864 29.9802 42.3864 30.0476 42.3594 30.1285L39.6092 36.8625C39.5957 36.9029 39.5957 36.9434 39.6092 36.9838L42.3594 43.7178C42.3729 43.7448 42.3796 43.7852 42.3796 43.8391C42.3796 43.947 42.3122 44.0009 42.1774 44.0009H39.771C39.6361 44.0009 39.5485 43.9335 39.5081 43.7987L38.1532 39.9363C38.1397 39.8958 38.1195 39.8756 38.0925 39.8756C38.0656 39.8756 38.0453 39.8958 38.0318 39.9363L36.6567 43.7987C36.6163 43.9335 36.5287 44.0009 36.3938 44.0009H33.9874Z" fill="white"/>

package/assets/color-facebook/index.tsx

@@ -4,30 +4,31 @@ import { BasicColorType } from '@liner-fe/prism';
 interface ColorFacebookProps {
   fill?: boolean;
   thick?: boolean;
+  className?: string;
   size?: number
   color?: BasicColorType;
 }
 
 export const ColorFacebook = forwardRef<SVGSVGElement, ColorFacebookProps>(
-  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary', className, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" fill="#1877F2"/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" fill="#1877F2"/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" fill="#1877F2"/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M44 24C44 13 35 4 24 4C13 4 4 13 4 24C4 34 11.25 42.25 20.75 43.75V29.75H15.75V24H20.75V19.5C20.75 14.5 23.75 11.75 28.25 11.75C30.5 11.75 32.75 12.25 32.75 12.25V17.25H30.25C27.75 17.25 27 18.75 27 20.25V24H32.5L31.5 29.75H26.75V44C36.75 42.5 44 34 44 24Z" fill="#1877F2"/>
 </svg>
 ;

package/assets/color-fire/index.tsx

@@ -4,33 +4,34 @@ import { BasicColorType } from '@liner-fe/prism';
 interface ColorFireProps {
   fill?: boolean;
   thick?: boolean;
+  className?: string;
   size?: number
   color?: BasicColorType;
 }
 
 export const ColorFire = forwardRef<SVGSVGElement, ColorFireProps>(
-  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary', className, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M42 27.683C42 37.6241 33.9411 45 24 45C14.0589 45 6 37.6241 6 27.683C6 21.5445 9 15.5 15 12L16.9042 14.3273C19.2846 17.2367 24 15.5535 24 11.7944V3.5C24 3.5 42 12 42 27.683Z" fill="#FF8142"/>
 <path d="M32 31.2895C32 35.5479 28.4183 39 24 39C19.5817 39 16 35.5479 16 31.2895C16 27.7203 17.7142 26.3154 19.5556 24.6C21.6921 22.6097 24 21 24 21C24 21 26.3079 22.6097 28.4444 24.6C30.2858 26.3154 32 27.7203 32 31.2895Z" fill="#FFCC00"/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M42 27.683C42 37.6241 33.9411 45 24 45C14.0589 45 6 37.6241 6 27.683C6 21.5445 9 15.5 15 12L16.9042 14.3273C19.2846 17.2367 24 15.5535 24 11.7944V3.5C24 3.5 42 12 42 27.683Z" fill="#FF8142"/>
 <path d="M32 31.2895C32 35.5479 28.4183 39 24 39C19.5817 39 16 35.5479 16 31.2895C16 27.7203 17.7142 26.3154 19.5556 24.6C21.6921 22.6097 24 21 24 21C24 21 26.3079 22.6097 28.4444 24.6C30.2858 26.3154 32 27.7203 32 31.2895Z" fill="#FFCC00"/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M42 27.683C42 37.6241 33.9411 45 24 45C14.0589 45 6 37.6241 6 27.683C6 21.5445 9 15.5 15 12L16.9042 14.3273C19.2846 17.2367 24 15.5535 24 11.7944V3.5C24 3.5 42 12 42 27.683Z" fill="#FF8142"/>
 <path d="M32 31.2895C32 35.5479 28.4183 39 24 39C19.5817 39 16 35.5479 16 31.2895C16 27.7203 17.7142 26.3154 19.5556 24.6C21.6921 22.6097 24 21 24 21C24 21 26.3079 22.6097 28.4444 24.6C30.2858 26.3154 32 27.7203 32 31.2895Z" fill="#FFCC00"/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M42 27.683C42 37.6241 33.9411 45 24 45C14.0589 45 6 37.6241 6 27.683C6 21.5445 9 15.5 15 12L16.9042 14.3273C19.2846 17.2367 24 15.5535 24 11.7944V3.5C24 3.5 42 12 42 27.683Z" fill="#FF8142"/>
 <path d="M32 31.2895C32 35.5479 28.4183 39 24 39C19.5817 39 16 35.5479 16 31.2895C16 27.7203 17.7142 26.3154 19.5556 24.6C21.6921 22.6097 24 21 24 21C24 21 26.3079 22.6097 28.4444 24.6C30.2858 26.3154 32 27.7203 32 31.2895Z" fill="#FFCC00"/>
 </svg>

package/assets/color-google/index.tsx

@@ -4,14 +4,15 @@ import { BasicColorType } from '@liner-fe/prism';
 interface ColorGoogleProps {
   fill?: boolean;
   thick?: boolean;
+  className?: string;
   size?: number
   color?: BasicColorType;
 }
 
 export const ColorGoogle = forwardRef<SVGSVGElement, ColorGoogleProps>(
-  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary', className, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M41.895 20.5469C42.1195 21.7905 42.2405 23.086 42.2405 24.4333C42.2405 30.2198 40.1677 35.0909 36.5749 38.3987H36.5703L36.5727 38.3965L30.4346 33.631C32.4467 32.2837 33.7853 30.2715 34.2257 27.8966H24V20.5469H41.895Z" fill="#4285F4"/>
 <path d="M7.01831 32.5284L7.02096 32.5337L13.3671 27.6121C14.862 32.1018 19.0501 35.4428 23.9978 35.4428C26.5543 35.4428 28.7307 34.7691 30.4321 33.6291L36.5727 38.3965C33.429 41.2984 29.128 42.9998 23.9978 42.9998C16.5704 42.9998 10.1448 38.7419 7.01831 32.5322V32.5284Z" fill="#34A853"/>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.9979 12.557C26.7875 12.557 29.2921 13.5157 31.2612 15.3984L36.7109 9.94876C33.4204 6.88277 29.1193 5 23.9979 5C16.5704 5 10.1448 9.25783 7.01834 15.4675L13.3662 20.3904C14.8604 15.8994 19.0491 12.557 23.9979 12.557Z" fill="#EA4335"/>
@@ -19,7 +20,7 @@ export const ColorGoogle = forwardRef<SVGSVGElement, ColorGoogleProps>(
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M41.895 20.5469C42.1195 21.7905 42.2405 23.086 42.2405 24.4333C42.2405 30.2198 40.1677 35.0909 36.5749 38.3987H36.5703L36.5727 38.3965L30.4346 33.631C32.4467 32.2837 33.7853 30.2715 34.2257 27.8966H24V20.5469H41.895Z" fill="#4285F4"/>
 <path d="M7.01831 32.5284L7.02096 32.5337L13.3671 27.6121C14.862 32.1018 19.0501 35.4428 23.9978 35.4428C26.5543 35.4428 28.7307 34.7691 30.4321 33.6291L36.5727 38.3965C33.429 41.2984 29.128 42.9998 23.9978 42.9998C16.5704 42.9998 10.1448 38.7419 7.01831 32.5322V32.5284Z" fill="#34A853"/>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.9979 12.557C26.7875 12.557 29.2921 13.5157 31.2612 15.3984L36.7109 9.94876C33.4204 6.88277 29.1193 5 23.9979 5C16.5704 5 10.1448 9.25783 7.01834 15.4675L13.3662 20.3904C14.8604 15.8994 19.0491 12.557 23.9979 12.557Z" fill="#EA4335"/>
@@ -27,7 +28,7 @@ export const ColorGoogle = forwardRef<SVGSVGElement, ColorGoogleProps>(
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M41.895 20.5469C42.1195 21.7905 42.2405 23.086 42.2405 24.4333C42.2405 30.2198 40.1677 35.0909 36.5749 38.3987H36.5703L36.5727 38.3965L30.4346 33.631C32.4467 32.2837 33.7853 30.2715 34.2257 27.8966H24V20.5469H41.895Z" fill="#4285F4"/>
 <path d="M7.01831 32.5284L7.02096 32.5337L13.3671 27.6121C14.862 32.1018 19.0501 35.4428 23.9978 35.4428C26.5543 35.4428 28.7307 34.7691 30.4321 33.6291L36.5727 38.3965C33.429 41.2984 29.128 42.9998 23.9978 42.9998C16.5704 42.9998 10.1448 38.7419 7.01831 32.5322V32.5284Z" fill="#34A853"/>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.9979 12.557C26.7875 12.557 29.2921 13.5157 31.2612 15.3984L36.7109 9.94876C33.4204 6.88277 29.1193 5 23.9979 5C16.5704 5 10.1448 9.25783 7.01834 15.4675L13.3662 20.3904C14.8604 15.8994 19.0491 12.557 23.9979 12.557Z" fill="#EA4335"/>
@@ -36,7 +37,7 @@ export const ColorGoogle = forwardRef<SVGSVGElement, ColorGoogleProps>(
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M41.895 20.5469C42.1195 21.7905 42.2405 23.086 42.2405 24.4333C42.2405 30.2198 40.1677 35.0909 36.5749 38.3987H36.5703L36.5727 38.3965L30.4346 33.631C32.4467 32.2837 33.7853 30.2715 34.2257 27.8966H24V20.5469H41.895Z" fill="#4285F4"/>
 <path d="M7.01831 32.5284L7.02096 32.5337L13.3671 27.6121C14.862 32.1018 19.0501 35.4428 23.9978 35.4428C26.5543 35.4428 28.7307 34.7691 30.4321 33.6291L36.5727 38.3965C33.429 41.2984 29.128 42.9998 23.9978 42.9998C16.5704 42.9998 10.1448 38.7419 7.01831 32.5322V32.5284Z" fill="#34A853"/>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.9979 12.557C26.7875 12.557 29.2921 13.5157 31.2612 15.3984L36.7109 9.94876C33.4204 6.88277 29.1193 5 23.9979 5C16.5704 5 10.1448 9.25783 7.01834 15.4675L13.3662 20.3904C14.8604 15.8994 19.0491 12.557 23.9979 12.557Z" fill="#EA4335"/>

package/assets/color-liner/index.tsx

@@ -4,30 +4,31 @@ import { BasicColorType } from '@liner-fe/prism';
 interface ColorLinerProps {
   fill?: boolean;
   thick?: boolean;
+  className?: string;
   size?: number
   color?: BasicColorType;
 }
 
 export const ColorLiner = forwardRef<SVGSVGElement, ColorLinerProps>(
-  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary', className, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M39.6001 18.2152V8.52042C39.6001 8.41885 39.5211 8.33984 39.4196 8.33984H29.6499C29.6499 8.33984 29.5596 8.36242 29.5258 8.39627L23.9189 13.9942C23.9189 13.9942 23.8399 14.0506 23.7948 14.0506H13.4949C13.4949 14.0506 13.4046 14.0732 13.3708 14.1071L6.17321 21.2738C6.0604 21.3866 6.13937 21.5898 6.29731 21.5898H15.5819C15.8527 21.5898 16.067 21.8042 16.067 22.0751V31.7022C16.067 31.8037 16.146 31.8827 16.2475 31.8827H25.8932C26.1639 31.8827 26.3783 32.1085 26.3783 32.3681V41.634C26.3783 41.792 26.5701 41.8823 26.6941 41.7694L33.7902 34.6817C33.7902 34.6817 33.8466 34.6027 33.8466 34.5463V24.0953C33.8466 24.0953 33.8691 23.9937 33.903 23.9599L39.5437 18.3168C39.5437 18.3168 39.6001 18.2378 39.6001 18.1814V18.2152ZM24.6071 22.7974V15.2808C24.6071 15.01 24.8214 14.7955 25.0922 14.7955H32.6282C32.8989 14.7955 33.1133 15.01 33.1133 15.2808V22.7974C33.1133 23.0683 32.8989 23.2827 32.6282 23.2827H25.0922C24.8214 23.2827 24.6071 23.0683 24.6071 22.7974Z" fill="#14371B"/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M39.6001 18.2152V8.52042C39.6001 8.41885 39.5211 8.33984 39.4196 8.33984H29.6499C29.6499 8.33984 29.5596 8.36242 29.5258 8.39627L23.9189 13.9942C23.9189 13.9942 23.8399 14.0506 23.7948 14.0506H13.4949C13.4949 14.0506 13.4046 14.0732 13.3708 14.1071L6.17321 21.2738C6.0604 21.3866 6.13937 21.5898 6.29731 21.5898H15.5819C15.8527 21.5898 16.067 21.8042 16.067 22.0751V31.7022C16.067 31.8037 16.146 31.8827 16.2475 31.8827H25.8932C26.1639 31.8827 26.3783 32.1085 26.3783 32.3681V41.634C26.3783 41.792 26.5701 41.8823 26.6941 41.7694L33.7902 34.6817C33.7902 34.6817 33.8466 34.6027 33.8466 34.5463V24.0953C33.8466 24.0953 33.8691 23.9937 33.903 23.9599L39.5437 18.3168C39.5437 18.3168 39.6001 18.2378 39.6001 18.1814V18.2152ZM24.6071 22.7974V15.2808C24.6071 15.01 24.8214 14.7955 25.0922 14.7955H32.6282C32.8989 14.7955 33.1133 15.01 33.1133 15.2808V22.7974C33.1133 23.0683 32.8989 23.2827 32.6282 23.2827H25.0922C24.8214 23.2827 24.6071 23.0683 24.6071 22.7974Z" fill="#14371B"/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M39.6001 18.2152V8.52042C39.6001 8.41885 39.5211 8.33984 39.4196 8.33984H29.6499C29.6499 8.33984 29.5596 8.36242 29.5258 8.39627L23.9189 13.9942C23.9189 13.9942 23.8399 14.0506 23.7948 14.0506H13.4949C13.4949 14.0506 13.4046 14.0732 13.3708 14.1071L6.17321 21.2738C6.0604 21.3866 6.13937 21.5898 6.29731 21.5898H15.5819C15.8527 21.5898 16.067 21.8042 16.067 22.0751V31.7022C16.067 31.8037 16.146 31.8827 16.2475 31.8827H25.8932C26.1639 31.8827 26.3783 32.1085 26.3783 32.3681V41.634C26.3783 41.792 26.5701 41.8823 26.6941 41.7694L33.7902 34.6817C33.7902 34.6817 33.8466 34.6027 33.8466 34.5463V24.0953C33.8466 24.0953 33.8691 23.9937 33.903 23.9599L39.5437 18.3168C39.5437 18.3168 39.6001 18.2378 39.6001 18.1814V18.2152ZM24.6071 22.7974V15.2808C24.6071 15.01 24.8214 14.7955 25.0922 14.7955H32.6282C32.8989 14.7955 33.1133 15.01 33.1133 15.2808V22.7974C33.1133 23.0683 32.8989 23.2827 32.6282 23.2827H25.0922C24.8214 23.2827 24.6071 23.0683 24.6071 22.7974Z" fill="#14371B"/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M39.6001 18.2152V8.52042C39.6001 8.41885 39.5211 8.33984 39.4196 8.33984H29.6499C29.6499 8.33984 29.5596 8.36242 29.5258 8.39627L23.9189 13.9942C23.9189 13.9942 23.8399 14.0506 23.7948 14.0506H13.4949C13.4949 14.0506 13.4046 14.0732 13.3708 14.1071L6.17321 21.2738C6.0604 21.3866 6.13937 21.5898 6.29731 21.5898H15.5819C15.8527 21.5898 16.067 21.8042 16.067 22.0751V31.7022C16.067 31.8037 16.146 31.8827 16.2475 31.8827H25.8932C26.1639 31.8827 26.3783 32.1085 26.3783 32.3681V41.634C26.3783 41.792 26.5701 41.8823 26.6941 41.7694L33.7902 34.6817C33.7902 34.6817 33.8466 34.6027 33.8466 34.5463V24.0953C33.8466 24.0953 33.8691 23.9937 33.903 23.9599L39.5437 18.3168C39.5437 18.3168 39.6001 18.2378 39.6001 18.1814V18.2152ZM24.6071 22.7974V15.2808C24.6071 15.01 24.8214 14.7955 25.0922 14.7955H32.6282C32.8989 14.7955 33.1133 15.01 33.1133 15.2808V22.7974C33.1133 23.0683 32.8989 23.2827 32.6282 23.2827H25.0922C24.8214 23.2827 24.6071 23.0683 24.6071 22.7974Z" fill="#14371B"/>
 </svg>
 ;

package/assets/color-liner-variation/index.tsx

@@ -4,14 +4,15 @@ import { BasicColorType } from '@liner-fe/prism';
 interface ColorLinerVariationProps {
   fill?: boolean;
   thick?: boolean;
+  className?: string;
   size?: number
   color?: BasicColorType;
 }
 
 export const ColorLinerVariation = forwardRef<SVGSVGElement, ColorLinerVariationProps>(
-  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary', className, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <g clip-path="url(#clip0_774_42385)">
 <path d="M44.7999 16.2883V3.36186C44.7999 3.22643 44.6946 3.12109 44.5592 3.12109H31.5329C31.5329 3.12109 31.4126 3.15119 31.3675 3.19633L23.8916 10.6602C23.8916 10.6602 23.7863 10.7355 23.7262 10.7355H9.99291C9.99291 10.7355 9.87257 10.7656 9.82745 10.8107L0.230706 20.3663C0.0802863 20.5168 0.18558 20.7877 0.396167 20.7877H12.7757C13.1367 20.7877 13.4225 21.0736 13.4225 21.4348V34.2709C13.4225 34.4063 13.5278 34.5116 13.6631 34.5116H26.524C26.885 34.5116 27.1708 34.8126 27.1708 35.1587V47.5133C27.1708 47.724 27.4265 47.8443 27.592 47.6939L37.0533 38.2436C37.0533 38.2436 37.1285 38.1383 37.1285 38.063V24.1284C37.1285 24.1284 37.1586 23.9929 37.2037 23.9478L44.7247 16.4237C44.7247 16.4237 44.7999 16.3184 44.7999 16.2431V16.2883ZM24.8092 22.3978V12.3757C24.8092 12.0146 25.095 11.7287 25.456 11.7287H35.504C35.865 11.7287 36.1508 12.0146 36.1508 12.3757V22.3978C36.1508 22.759 35.865 23.0449 35.504 23.0449H25.456C25.095 23.0449 24.8092 22.759 24.8092 22.3978Z" fill="#14371B"/>
 </g>
@@ -23,7 +24,7 @@ export const ColorLinerVariation = forwardRef<SVGSVGElement, ColorLinerVariation
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <g clip-path="url(#clip0_774_42385)">
 <path d="M44.7999 16.2883V3.36186C44.7999 3.22643 44.6946 3.12109 44.5592 3.12109H31.5329C31.5329 3.12109 31.4126 3.15119 31.3675 3.19633L23.8916 10.6602C23.8916 10.6602 23.7863 10.7355 23.7262 10.7355H9.99291C9.99291 10.7355 9.87257 10.7656 9.82745 10.8107L0.230706 20.3663C0.0802863 20.5168 0.18558 20.7877 0.396167 20.7877H12.7757C13.1367 20.7877 13.4225 21.0736 13.4225 21.4348V34.2709C13.4225 34.4063 13.5278 34.5116 13.6631 34.5116H26.524C26.885 34.5116 27.1708 34.8126 27.1708 35.1587V47.5133C27.1708 47.724 27.4265 47.8443 27.592 47.6939L37.0533 38.2436C37.0533 38.2436 37.1285 38.1383 37.1285 38.063V24.1284C37.1285 24.1284 37.1586 23.9929 37.2037 23.9478L44.7247 16.4237C44.7247 16.4237 44.7999 16.3184 44.7999 16.2431V16.2883ZM24.8092 22.3978V12.3757C24.8092 12.0146 25.095 11.7287 25.456 11.7287H35.504C35.865 11.7287 36.1508 12.0146 36.1508 12.3757V22.3978C36.1508 22.759 35.865 23.0449 35.504 23.0449H25.456C25.095 23.0449 24.8092 22.759 24.8092 22.3978Z" fill="#14371B"/>
 </g>
@@ -35,7 +36,7 @@ export const ColorLinerVariation = forwardRef<SVGSVGElement, ColorLinerVariation
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <g clip-path="url(#clip0_774_42385)">
 <path d="M44.7999 16.2883V3.36186C44.7999 3.22643 44.6946 3.12109 44.5592 3.12109H31.5329C31.5329 3.12109 31.4126 3.15119 31.3675 3.19633L23.8916 10.6602C23.8916 10.6602 23.7863 10.7355 23.7262 10.7355H9.99291C9.99291 10.7355 9.87257 10.7656 9.82745 10.8107L0.230706 20.3663C0.0802863 20.5168 0.18558 20.7877 0.396167 20.7877H12.7757C13.1367 20.7877 13.4225 21.0736 13.4225 21.4348V34.2709C13.4225 34.4063 13.5278 34.5116 13.6631 34.5116H26.524C26.885 34.5116 27.1708 34.8126 27.1708 35.1587V47.5133C27.1708 47.724 27.4265 47.8443 27.592 47.6939L37.0533 38.2436C37.0533 38.2436 37.1285 38.1383 37.1285 38.063V24.1284C37.1285 24.1284 37.1586 23.9929 37.2037 23.9478L44.7247 16.4237C44.7247 16.4237 44.7999 16.3184 44.7999 16.2431V16.2883ZM24.8092 22.3978V12.3757C24.8092 12.0146 25.095 11.7287 25.456 11.7287H35.504C35.865 11.7287 36.1508 12.0146 36.1508 12.3757V22.3978C36.1508 22.759 35.865 23.0449 35.504 23.0449H25.456C25.095 23.0449 24.8092 22.759 24.8092 22.3978Z" fill="#14371B"/>
 </g>
@@ -48,7 +49,7 @@ export const ColorLinerVariation = forwardRef<SVGSVGElement, ColorLinerVariation
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <g clip-path="url(#clip0_774_42385)">
 <path d="M44.7999 16.2883V3.36186C44.7999 3.22643 44.6946 3.12109 44.5592 3.12109H31.5329C31.5329 3.12109 31.4126 3.15119 31.3675 3.19633L23.8916 10.6602C23.8916 10.6602 23.7863 10.7355 23.7262 10.7355H9.99291C9.99291 10.7355 9.87257 10.7656 9.82745 10.8107L0.230706 20.3663C0.0802863 20.5168 0.18558 20.7877 0.396167 20.7877H12.7757C13.1367 20.7877 13.4225 21.0736 13.4225 21.4348V34.2709C13.4225 34.4063 13.5278 34.5116 13.6631 34.5116H26.524C26.885 34.5116 27.1708 34.8126 27.1708 35.1587V47.5133C27.1708 47.724 27.4265 47.8443 27.592 47.6939L37.0533 38.2436C37.0533 38.2436 37.1285 38.1383 37.1285 38.063V24.1284C37.1285 24.1284 37.1586 23.9929 37.2037 23.9478L44.7247 16.4237C44.7247 16.4237 44.7999 16.3184 44.7999 16.2431V16.2883ZM24.8092 22.3978V12.3757C24.8092 12.0146 25.095 11.7287 25.456 11.7287H35.504C35.865 11.7287 36.1508 12.0146 36.1508 12.3757V22.3978C36.1508 22.759 35.865 23.0449 35.504 23.0449H25.456C25.095 23.0449 24.8092 22.759 24.8092 22.3978Z" fill="#14371B"/>
 </g>

package/assets/color-pdf/index.tsx

@@ -4,14 +4,15 @@ import { BasicColorType } from '@liner-fe/prism';
 interface ColorPdfProps {
   fill?: boolean;
   thick?: boolean;
+  className?: string;
   size?: number
   color?: BasicColorType;
 }
 
 export const ColorPdf = forwardRef<SVGSVGElement, ColorPdfProps>(
-  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary', className, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.1318 4C23.6862 4.00012 24.2156 4.23041 24.5938 4.63574L38.4619 19.501C38.8074 19.8713 39 20.3588 39 20.8652V27H36V21.5771H26.001C24.0681 21.5771 22.5011 20.01 22.501 18.0771V7H12V27H9V6C9 4.89543 9.89543 4 11 4H23.1318ZM25.501 18.0771C25.5011 18.3532 25.7249 18.5771 26.001 18.5771H33.498L25.501 10.0059V18.0771Z" style={{ fill: `var(--${color})` }}/>
 <rect x="1" y="27" width="46" height="20" fill="#EF6B68"/>
 <path d="M37.2495 32.0487C37.2495 32.1161 37.2226 32.1767 37.1686 32.2307C37.1282 32.2711 37.0743 32.2913 37.0069 32.2913H32.8006C32.7332 32.2913 32.6995 32.325 32.6995 32.3924V35.5876C32.6995 35.655 32.7332 35.6887 32.8006 35.6887H35.2071C35.2745 35.6887 35.3284 35.7156 35.3689 35.7696C35.4228 35.81 35.4497 35.8639 35.4497 35.9313V37.8929C35.4497 37.9603 35.4228 38.021 35.3689 38.0749C35.3284 38.1153 35.2745 38.1356 35.2071 38.1356H32.8006C32.7332 38.1356 32.6995 38.1693 32.6995 38.2367V43.7573C32.6995 43.8247 32.6726 43.8854 32.6186 43.9393C32.5782 43.9798 32.5243 44 32.4568 44H30.0909C30.0234 44 29.9628 43.9798 29.9089 43.9393C29.8684 43.8854 29.8482 43.8247 29.8482 43.7573V30.0871C29.8482 30.0197 29.8684 29.9658 29.9089 29.9253C29.9628 29.8714 30.0234 29.8444 30.0909 29.8444H37.0069C37.0743 29.8444 37.1282 29.8714 37.1686 29.9253C37.2226 29.9658 37.2495 30.0197 37.2495 30.0871V32.0487Z" fill="white"/>
@@ -20,7 +21,7 @@ export const ColorPdf = forwardRef<SVGSVGElement, ColorPdfProps>(
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.1318 4C23.6862 4.00012 24.2156 4.23041 24.5938 4.63574L38.4619 19.501C38.8074 19.8713 39 20.3588 39 20.8652V27H36V21.5771H26.001C24.0681 21.5771 22.5011 20.01 22.501 18.0771V7H12V27H9V6C9 4.89543 9.89543 4 11 4H23.1318ZM25.501 18.0771C25.5011 18.3532 25.7249 18.5771 26.001 18.5771H33.498L25.501 10.0059V18.0771Z" style={{ fill: `var(--${color})` }}/>
 <rect x="1" y="27" width="46" height="20" fill="#EF6B68"/>
 <path d="M37.2495 32.0487C37.2495 32.1161 37.2226 32.1767 37.1686 32.2307C37.1282 32.2711 37.0743 32.2913 37.0069 32.2913H32.8006C32.7332 32.2913 32.6995 32.325 32.6995 32.3924V35.5876C32.6995 35.655 32.7332 35.6887 32.8006 35.6887H35.2071C35.2745 35.6887 35.3284 35.7156 35.3689 35.7696C35.4228 35.81 35.4497 35.8639 35.4497 35.9313V37.8929C35.4497 37.9603 35.4228 38.021 35.3689 38.0749C35.3284 38.1153 35.2745 38.1356 35.2071 38.1356H32.8006C32.7332 38.1356 32.6995 38.1693 32.6995 38.2367V43.7573C32.6995 43.8247 32.6726 43.8854 32.6186 43.9393C32.5782 43.9798 32.5243 44 32.4568 44H30.0909C30.0234 44 29.9628 43.9798 29.9089 43.9393C29.8684 43.8854 29.8482 43.8247 29.8482 43.7573V30.0871C29.8482 30.0197 29.8684 29.9658 29.9089 29.9253C29.9628 29.8714 30.0234 29.8444 30.0909 29.8444H37.0069C37.0743 29.8444 37.1282 29.8714 37.1686 29.9253C37.2226 29.9658 37.2495 30.0197 37.2495 30.0871V32.0487Z" fill="white"/>
@@ -29,7 +30,7 @@ export const ColorPdf = forwardRef<SVGSVGElement, ColorPdfProps>(
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.1318 4C23.6862 4.00012 24.2156 4.23041 24.5938 4.63574L38.4619 19.501C38.8074 19.8713 39 20.3588 39 20.8652V27H36V21.5771H26.001C24.0681 21.5771 22.5011 20.01 22.501 18.0771V7H12V27H9V6C9 4.89543 9.89543 4 11 4H23.1318ZM25.501 18.0771C25.5011 18.3532 25.7249 18.5771 26.001 18.5771H33.498L25.501 10.0059V18.0771Z" style={{ fill: `var(--${color})` }}/>
 <rect x="1" y="27" width="46" height="20" fill="#EF6B68"/>
 <path d="M37.2495 32.0487C37.2495 32.1161 37.2226 32.1767 37.1686 32.2307C37.1282 32.2711 37.0743 32.2913 37.0069 32.2913H32.8006C32.7332 32.2913 32.6995 32.325 32.6995 32.3924V35.5876C32.6995 35.655 32.7332 35.6887 32.8006 35.6887H35.2071C35.2745 35.6887 35.3284 35.7156 35.3689 35.7696C35.4228 35.81 35.4497 35.8639 35.4497 35.9313V37.8929C35.4497 37.9603 35.4228 38.021 35.3689 38.0749C35.3284 38.1153 35.2745 38.1356 35.2071 38.1356H32.8006C32.7332 38.1356 32.6995 38.1693 32.6995 38.2367V43.7573C32.6995 43.8247 32.6726 43.8854 32.6186 43.9393C32.5782 43.9798 32.5243 44 32.4568 44H30.0909C30.0234 44 29.9628 43.9798 29.9089 43.9393C29.8684 43.8854 29.8482 43.8247 29.8482 43.7573V30.0871C29.8482 30.0197 29.8684 29.9658 29.9089 29.9253C29.9628 29.8714 30.0234 29.8444 30.0909 29.8444H37.0069C37.0743 29.8444 37.1282 29.8714 37.1686 29.9253C37.2226 29.9658 37.2495 30.0197 37.2495 30.0871V32.0487Z" fill="white"/>
@@ -39,7 +40,7 @@ export const ColorPdf = forwardRef<SVGSVGElement, ColorPdfProps>(
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.1318 4C23.6862 4.00012 24.2156 4.23041 24.5938 4.63574L38.4619 19.501C38.8074 19.8713 39 20.3588 39 20.8652V27H36V21.5771H26.001C24.0681 21.5771 22.5011 20.01 22.501 18.0771V7H12V27H9V6C9 4.89543 9.89543 4 11 4H23.1318ZM25.501 18.0771C25.5011 18.3532 25.7249 18.5771 26.001 18.5771H33.498L25.501 10.0059V18.0771Z" style={{ fill: `var(--${color})` }}/>
 <rect x="1" y="27" width="46" height="20" fill="#EF6B68"/>
 <path d="M37.2495 32.0487C37.2495 32.1161 37.2226 32.1767 37.1686 32.2307C37.1282 32.2711 37.0743 32.2913 37.0069 32.2913H32.8006C32.7332 32.2913 32.6995 32.325 32.6995 32.3924V35.5876C32.6995 35.655 32.7332 35.6887 32.8006 35.6887H35.2071C35.2745 35.6887 35.3284 35.7156 35.3689 35.7696C35.4228 35.81 35.4497 35.8639 35.4497 35.9313V37.8929C35.4497 37.9603 35.4228 38.021 35.3689 38.0749C35.3284 38.1153 35.2745 38.1356 35.2071 38.1356H32.8006C32.7332 38.1356 32.6995 38.1693 32.6995 38.2367V43.7573C32.6995 43.8247 32.6726 43.8854 32.6186 43.9393C32.5782 43.9798 32.5243 44 32.4568 44H30.0909C30.0234 44 29.9628 43.9798 29.9089 43.9393C29.8684 43.8854 29.8482 43.8247 29.8482 43.7573V30.0871C29.8482 30.0197 29.8684 29.9658 29.9089 29.9253C29.9628 29.8714 30.0234 29.8444 30.0909 29.8444H37.0069C37.0743 29.8444 37.1282 29.8714 37.1686 29.9253C37.2226 29.9658 37.2495 30.0197 37.2495 30.0871V32.0487Z" fill="white"/>

package/assets/color-txt/index.tsx

@@ -4,14 +4,15 @@ import { BasicColorType } from '@liner-fe/prism';
 interface ColorTxtProps {
   fill?: boolean;
   thick?: boolean;
+  className?: string;
   size?: number
   color?: BasicColorType;
 }
 
 export const ColorTxt = forwardRef<SVGSVGElement, ColorTxtProps>(
-  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary', className, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.1318 4C23.6862 4.00012 24.2156 4.23041 24.5938 4.63574L38.4619 19.501C38.8074 19.8713 39 20.3588 39 20.8652V27H36V21.5771H26.001C24.0681 21.5771 22.5011 20.01 22.501 18.0771V7H12V27H9V6C9 4.89543 9.89543 4 11 4H23.1318ZM25.501 18.0771C25.5011 18.3532 25.7249 18.5771 26.001 18.5771H33.498L25.501 10.0059V18.0771Z" style={{ fill: `var(--${color})` }}/>
 <rect x="1" y="27" width="46" height="20" fill="#A8A8A8"/>
 <path d="M37.7931 29.8438C37.8605 29.8438 37.9144 29.8707 37.9549 29.9246C38.0088 29.9651 38.0358 30.019 38.0358 30.0864V32.048C38.0358 32.1154 38.0088 32.176 37.9549 32.23C37.9144 32.2704 37.8605 32.2906 37.7931 32.2906H35.2653C35.1979 32.2906 35.1642 32.3243 35.1642 32.3918V43.7566C35.1642 43.824 35.1372 43.8847 35.0833 43.9386C35.0429 43.9791 34.9889 43.9993 34.9215 43.9993H32.5555C32.4881 43.9993 32.4275 43.9791 32.3735 43.9386C32.3331 43.8847 32.3129 43.824 32.3129 43.7566V32.3918C32.3129 32.3243 32.2792 32.2906 32.2118 32.2906H29.7851C29.7177 32.2906 29.657 32.2704 29.6031 32.23C29.5626 32.176 29.5424 32.1154 29.5424 32.048V30.0864C29.5424 30.019 29.5626 29.9651 29.6031 29.9246C29.657 29.8707 29.7177 29.8438 29.7851 29.8438H37.7931Z" fill="white"/>
@@ -20,7 +21,7 @@ export const ColorTxt = forwardRef<SVGSVGElement, ColorTxtProps>(
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.1318 4C23.6862 4.00012 24.2156 4.23041 24.5938 4.63574L38.4619 19.501C38.8074 19.8713 39 20.3588 39 20.8652V27H36V21.5771H26.001C24.0681 21.5771 22.5011 20.01 22.501 18.0771V7H12V27H9V6C9 4.89543 9.89543 4 11 4H23.1318ZM25.501 18.0771C25.5011 18.3532 25.7249 18.5771 26.001 18.5771H33.498L25.501 10.0059V18.0771Z" style={{ fill: `var(--${color})` }}/>
 <rect x="1" y="27" width="46" height="20" fill="#A8A8A8"/>
 <path d="M37.7931 29.8438C37.8605 29.8438 37.9144 29.8707 37.9549 29.9246C38.0088 29.9651 38.0358 30.019 38.0358 30.0864V32.048C38.0358 32.1154 38.0088 32.176 37.9549 32.23C37.9144 32.2704 37.8605 32.2906 37.7931 32.2906H35.2653C35.1979 32.2906 35.1642 32.3243 35.1642 32.3918V43.7566C35.1642 43.824 35.1372 43.8847 35.0833 43.9386C35.0429 43.9791 34.9889 43.9993 34.9215 43.9993H32.5555C32.4881 43.9993 32.4275 43.9791 32.3735 43.9386C32.3331 43.8847 32.3129 43.824 32.3129 43.7566V32.3918C32.3129 32.3243 32.2792 32.2906 32.2118 32.2906H29.7851C29.7177 32.2906 29.657 32.2704 29.6031 32.23C29.5626 32.176 29.5424 32.1154 29.5424 32.048V30.0864C29.5424 30.019 29.5626 29.9651 29.6031 29.9246C29.657 29.8707 29.7177 29.8438 29.7851 29.8438H37.7931Z" fill="white"/>
@@ -29,7 +30,7 @@ export const ColorTxt = forwardRef<SVGSVGElement, ColorTxtProps>(
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.1318 4C23.6862 4.00012 24.2156 4.23041 24.5938 4.63574L38.4619 19.501C38.8074 19.8713 39 20.3588 39 20.8652V27H36V21.5771H26.001C24.0681 21.5771 22.5011 20.01 22.501 18.0771V7H12V27H9V6C9 4.89543 9.89543 4 11 4H23.1318ZM25.501 18.0771C25.5011 18.3532 25.7249 18.5771 26.001 18.5771H33.498L25.501 10.0059V18.0771Z" style={{ fill: `var(--${color})` }}/>
 <rect x="1" y="27" width="46" height="20" fill="#A8A8A8"/>
 <path d="M37.7931 29.8438C37.8605 29.8438 37.9144 29.8707 37.9549 29.9246C38.0088 29.9651 38.0358 30.019 38.0358 30.0864V32.048C38.0358 32.1154 38.0088 32.176 37.9549 32.23C37.9144 32.2704 37.8605 32.2906 37.7931 32.2906H35.2653C35.1979 32.2906 35.1642 32.3243 35.1642 32.3918V43.7566C35.1642 43.824 35.1372 43.8847 35.0833 43.9386C35.0429 43.9791 34.9889 43.9993 34.9215 43.9993H32.5555C32.4881 43.9993 32.4275 43.9791 32.3735 43.9386C32.3331 43.8847 32.3129 43.824 32.3129 43.7566V32.3918C32.3129 32.3243 32.2792 32.2906 32.2118 32.2906H29.7851C29.7177 32.2906 29.657 32.2704 29.6031 32.23C29.5626 32.176 29.5424 32.1154 29.5424 32.048V30.0864C29.5424 30.019 29.5626 29.9651 29.6031 29.9246C29.657 29.8707 29.7177 29.8438 29.7851 29.8438H37.7931Z" fill="white"/>
@@ -39,7 +40,7 @@ export const ColorTxt = forwardRef<SVGSVGElement, ColorTxtProps>(
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path fillRule="evenodd" clipRule="evenodd" d="M23.1318 4C23.6862 4.00012 24.2156 4.23041 24.5938 4.63574L38.4619 19.501C38.8074 19.8713 39 20.3588 39 20.8652V27H36V21.5771H26.001C24.0681 21.5771 22.5011 20.01 22.501 18.0771V7H12V27H9V6C9 4.89543 9.89543 4 11 4H23.1318ZM25.501 18.0771C25.5011 18.3532 25.7249 18.5771 26.001 18.5771H33.498L25.501 10.0059V18.0771Z" style={{ fill: `var(--${color})` }}/>
 <rect x="1" y="27" width="46" height="20" fill="#A8A8A8"/>
 <path d="M37.7931 29.8438C37.8605 29.8438 37.9144 29.8707 37.9549 29.9246C38.0088 29.9651 38.0358 30.019 38.0358 30.0864V32.048C38.0358 32.1154 38.0088 32.176 37.9549 32.23C37.9144 32.2704 37.8605 32.2906 37.7931 32.2906H35.2653C35.1979 32.2906 35.1642 32.3243 35.1642 32.3918V43.7566C35.1642 43.824 35.1372 43.8847 35.0833 43.9386C35.0429 43.9791 34.9889 43.9993 34.9215 43.9993H32.5555C32.4881 43.9993 32.4275 43.9791 32.3735 43.9386C32.3331 43.8847 32.3129 43.824 32.3129 43.7566V32.3918C32.3129 32.3243 32.2792 32.2906 32.2118 32.2906H29.7851C29.7177 32.2906 29.657 32.2704 29.6031 32.23C29.5626 32.176 29.5424 32.1154 29.5424 32.048V30.0864C29.5424 30.019 29.5626 29.9651 29.6031 29.9246C29.657 29.8707 29.7177 29.8438 29.7851 29.8438H37.7931Z" fill="white"/>

package/assets/copy/index.tsx

@@ -4,31 +4,32 @@ import { BasicColorType } from '@liner-fe/prism';
 interface CopyProps {
   fill?: boolean;
   thick?: boolean;
+  className?: string;
   size?: number
   color?: BasicColorType;
 }
 
 export const Copy = forwardRef<SVGSVGElement, CopyProps>(
-  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }, ref) => {
+  ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary', className, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path fillRule="evenodd" clipRule="evenodd" d="M36 36V41C36 42.1046 35.1046 43 34 43H7C5.89543 43 5 42.1046 5 41V14C5 12.8954 5.89543 12 7 12H12V7C12 5.89543 12.8954 5 14 5H41C42.1046 5 43 5.89543 43 7V34C43 35.1046 42.1046 36 41 36H36ZM15 8V12H34C35.1046 12 36 12.8954 36 14V33H40V8H15ZM8 40V15H33V40H8Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path d="M7 12C5.89543 12 5 12.8954 5 14V41C5 42.1046 5.89543 43 7 43H34C35.1046 43 36 42.1046 36 41V14C36 12.8954 35.1046 12 34 12H7Z" style={{ fill: `var(--${color})` }}/>
 <path d="M11 9L39 9V37H40C41.1046 37 42 36.1046 42 35V8C42 6.89543 41.1046 6 40 6H13C11.8954 6 11 6.89543 11 8V9Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path fillRule="evenodd" clipRule="evenodd" d="M36 36V41C36 42.1046 35.1046 43 34 43H7C5.89543 43 5 42.1046 5 41V14C5 12.8954 5.89543 12 7 12H12V7C12 5.89543 12.8954 5 14 5H41C42.1046 5 43 5.89543 43 7V34C43 35.1046 42.1046 36 41 36H36ZM16 9V12H34C35.1046 12 36 12.8954 36 14V32H39V9H16ZM9 39V16H32V39H9Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
 <path fillRule="evenodd" clipRule="evenodd" d="M36 36V41C36 42.1046 35.1046 43 34 43H7C5.89543 43 5 42.1046 5 41V14C5 12.8954 5.89543 12 7 12H12V7C12 5.89543 12.8954 5 14 5H41C42.1046 5 43 5.89543 43 7V34C43 35.1046 42.1046 36 41 36H36ZM15 8V12H34C35.1046 12 36 12.8954 36 14V33H40V8H15ZM8 40V15H33V40H8Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;