@liner-fe/icon 0.0.50 → 0.0.52

package/assets/check-mark-in-circle/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface CheckMarkInCircleProps {
+interface CheckMarkInCircleProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,26 +12,26 @@ interface CheckMarkInCircleProps {
 }
 
 export const CheckMarkInCircle = forwardRef<SVGSVGElement, CheckMarkInCircleProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM22.6155 27.5188L16.4292 21.3325L13.6008 24.1609L19.7871 30.3472C21.3472 31.9074 23.8761 31.9096 25.439 30.3522L36.1194 19.709L33.296 16.8756L22.6155 27.5188Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path fillRule="evenodd" clipRule="evenodd" d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM22.2619 27.8723L16.0756 21.686L13.9543 23.8074L20.1406 29.9937C21.5058 31.3588 23.7185 31.3608 25.0861 29.998L35.7665 19.3548L33.6489 17.2298L22.9684 27.873C22.7731 28.0676 22.457 28.0674 22.2619 27.8723Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M35.1045 20.0361L24.4238 30.6787C22.861 32.2361 20.3326 32.2338 18.7725 30.6738L12.5859 24.4883L15.4141 21.6592L21.6006 27.8457L32.2812 17.2031L35.1045 20.0361Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4ZM24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M34.752 19.6816L24.0713 30.3252C22.7038 31.6876 20.491 31.6852 19.126 30.3203L12.9395 24.1338L15.0605 22.0127L21.2471 28.1992C21.442 28.3939 21.7578 28.3944 21.9531 28.2002L32.6338 17.5566L34.752 19.6816Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M24 4C35.0457 4 44 12.9543 44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4ZM24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/chrome/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ChromeProps {
+interface ChromeProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,9 +12,9 @@ interface ChromeProps {
 }
 
 export const Chrome = forwardRef<SVGSVGElement, ChromeProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--${type})` }}/>
 <path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--${type})` }}/>
@@ -21,7 +22,7 @@ export const Chrome = forwardRef<SVGSVGElement, ChromeProps>(
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--${type})` }}/>
 <path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--${type})` }}/>
@@ -29,7 +30,7 @@ export const Chrome = forwardRef<SVGSVGElement, ChromeProps>(
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--${type})` }}/>
 <path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--${type})` }}/>
@@ -38,7 +39,7 @@ export const Chrome = forwardRef<SVGSVGElement, ChromeProps>(
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M42.7393 17C43.5535 19.1788 44 21.5372 44 24C44 34.8307 35.3909 43.649 24.6426 43.9883L32.4453 29.3506C32.7148 28.926 32.9531 28.4804 33.1572 28.0156L33.293 27.6895C33.7467 26.5475 34 25.3036 34 24C34 21.2741 32.9084 18.8038 31.1396 17H42.7393Z" style={{ fill: `var(--${type})` }}/>
 <path d="M15.7891 29.7061C17.5956 32.3008 20.5987 34 24 34C24.9641 34 25.8953 33.8601 26.7773 33.6055L21.332 43.8213C11.5479 42.5169 4 34.141 4 24C4 20.4151 4.94295 17.0503 6.59473 14.1406L15.7891 29.7061Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 17C27.866 17 31 20.134 31 24C31 27.866 27.866 31 24 31C20.134 31 17 27.866 17 24C17 20.134 20.134 17 24 17Z" style={{ fill: `var(--${type})` }}/>

package/assets/clock/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ClockProps {
+interface ClockProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface ClockProps {
 }
 
 export const Clock = forwardRef<SVGSVGElement, ClockProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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(--${type})` }}/>
 <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(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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(--${type})` }}/>
 <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(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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(--${type})` }}/>
 <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(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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(--${type})` }}/>
 <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(--${type})` }}/>
 </svg>

package/assets/close/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface CloseProps {
+interface CloseProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface CloseProps {
 }
 
 export const Close = forwardRef<SVGSVGElement, CloseProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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(--${type})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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(--${type})` }}/>
 </svg>
 ;

package/assets/close-fill/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface CloseFillProps {
+interface CloseFillProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface CloseFillProps {
 }
 
 export const CloseFill = forwardRef<SVGSVGElement, CloseFillProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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(--${type})` }}/>
 <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" style={{ fill: `var(--${fillType})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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(--${type})` }}/>
 <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" style={{ fill: `var(--${fillType})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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(--${type})` }}/>
 <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" style={{ fill: `var(--${fillType})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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(--${type})` }}/>
 <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" style={{ fill: `var(--${fillType})` }}/>
 </svg>

package/assets/color-docx/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ColorDocxProps {
+interface ColorDocxProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,9 +12,9 @@ interface ColorDocxProps {
 }
 
 export const ColorDocx = forwardRef<SVGSVGElement, ColorDocxProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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(--${type})` }}/>
 <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" style={{ fill: `var(--${fillType})` }}/>
@@ -23,7 +24,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} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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(--${type})` }}/>
 <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" style={{ fill: `var(--${fillType})` }}/>
@@ -33,7 +34,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} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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(--${type})` }}/>
 <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" style={{ fill: `var(--${fillType})` }}/>
@@ -44,7 +45,7 @@ export const ColorDocx = forwardRef<SVGSVGElement, ColorDocxProps>(
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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(--${type})` }}/>
 <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" style={{ fill: `var(--${fillType})` }}/>

package/assets/color-facebook/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ColorFacebookProps {
+interface ColorFacebookProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface ColorFacebookProps {
 }
 
 export const ColorFacebook = forwardRef<SVGSVGElement, ColorFacebookProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ColorFireProps {
+interface ColorFireProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface ColorFireProps {
 }
 
 export const ColorFire = forwardRef<SVGSVGElement, ColorFireProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ColorGoogleProps {
+interface ColorGoogleProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,9 +12,9 @@ interface ColorGoogleProps {
 }
 
 export const ColorGoogle = forwardRef<SVGSVGElement, ColorGoogleProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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"/>
@@ -21,7 +22,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} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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"/>
@@ -29,7 +30,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} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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"/>
@@ -38,7 +39,7 @@ export const ColorGoogle = forwardRef<SVGSVGElement, ColorGoogleProps>(
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ColorLinerProps {
+interface ColorLinerProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface ColorLinerProps {
 }
 
 export const ColorLiner = forwardRef<SVGSVGElement, ColorLinerProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ColorLinerVariationProps {
+interface ColorLinerVariationProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,9 +12,9 @@ interface ColorLinerVariationProps {
 }
 
 export const ColorLinerVariation = forwardRef<SVGSVGElement, ColorLinerVariationProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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>
@@ -25,7 +26,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} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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>
@@ -37,7 +38,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} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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>
@@ -50,7 +51,7 @@ export const ColorLinerVariation = forwardRef<SVGSVGElement, ColorLinerVariation
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ColorPdfProps {
+interface ColorPdfProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,9 +12,9 @@ interface ColorPdfProps {
 }
 
 export const ColorPdf = forwardRef<SVGSVGElement, ColorPdfProps>(
-  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType }, ref) => {
+  ({ fill = false, thick = false, size = 24, type = 'neutral-label-primary', className, fillType, ...props }, ref) => {
   if (fill && thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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(--${type})` }}/>
 <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" style={{ fill: `var(--${fillType})` }}/>
@@ -22,7 +23,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} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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(--${type})` }}/>
 <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" style={{ fill: `var(--${fillType})` }}/>
@@ -31,7 +32,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} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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(--${type})` }}/>
 <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" style={{ fill: `var(--${fillType})` }}/>
@@ -41,7 +42,7 @@ export const ColorPdf = forwardRef<SVGSVGElement, ColorPdfProps>(
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <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(--${type})` }}/>
 <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" style={{ fill: `var(--${fillType})` }}/>