@liner-fe/icon 0.0.50 → 0.0.52

package/assets/new-thread-folder/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface NewThreadFolderProps {
+interface NewThreadFolderProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,23 +12,23 @@ interface NewThreadFolderProps {
 }
 
 export const NewThreadFolder = forwardRef<SVGSVGElement, NewThreadFolderProps>(
-  ({ 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="M30 27H34V30H30V34H27V30H23V27H27V23H30V27Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M41.2041 17.0107C42.2128 17.113 43 17.9643 43 19V38L42.9893 38.2041C42.8938 39.1457 42.1457 39.8938 41.2041 39.9893L41 40H38.2773V41.8828L38.2725 42.0303C38.1704 43.4882 36.5664 44.3482 35.2959 43.626L35.1709 43.5479L29.833 40H16L15.7959 39.9893C14.8543 39.8938 14.1062 39.1457 14.0107 38.2041L14 38V19C14 17.8954 14.8954 17 16 17H41L41.2041 17.0107ZM17 37H30.7393L35.2773 40.0166V37H40V20H17V37Z" style={{ fill: `var(--${type})` }}/>
 <path d="M21.5 9H34C35.1046 9 36 9.89543 36 11V14H15C12.7909 14 11 15.7909 11 18V31H7C5.89543 31 5 30.1046 5 29V7C5 5.89543 5.89543 5 7 5H18.5L21.5 9Z" 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="M30 27H34V30H30V34H27V30H23V27H27V23H30V27Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M41.2041 17.0107C42.2128 17.113 43 17.9643 43 19V38L42.9893 38.2041C42.8938 39.1457 42.1457 39.8938 41.2041 39.9893L41 40H38.2773V41.8828L38.2725 42.0303C38.1704 43.4882 36.5664 44.3482 35.2959 43.626L35.1709 43.5479L29.833 40H16L15.7959 39.9893C14.8543 39.8938 14.1062 39.1457 14.0107 38.2041L14 38V19C14 17.8954 14.8954 17 16 17H41L41.2041 17.0107ZM17 37H30.7393L35.2773 40.0166V37H40V20H17V37Z" style={{ fill: `var(--${type})` }}/>
 <path d="M21.5 9H34C35.1046 9 36 9.89543 36 11V14H15C12.7909 14 11 15.7909 11 18V31H7C5.89543 31 5 30.1046 5 29V7C5 5.89543 5.89543 5 7 5H18.5L21.5 9Z" 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="M30.5 26.5H34V30.5H30.5V34H26.5V30.5H23V26.5H26.5V23H30.5V26.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M41.2041 17.0107C42.2128 17.113 43 17.9643 43 19V38L42.9893 38.2041C42.8938 39.1457 42.1457 39.8938 41.2041 39.9893L41 40H38.2773V41.8828L38.2725 42.0303C38.1704 43.4882 36.5664 44.3482 35.2959 43.626L35.1709 43.5479L29.833 40H16L15.7959 39.9893C14.8543 39.8938 14.1062 39.1457 14.0107 38.2041L14 38V19C14 17.8954 14.8954 17 16 17H41L41.2041 17.0107ZM18 36H31.042L34.2773 38.1504V36H39V21H18V36Z" style={{ fill: `var(--${type})` }}/>
 <path d="M21.5 9H34C35.1046 9 36 9.89543 36 11V14H15C12.7909 14 11 15.7909 11 18V31H7L6.7959 30.9893C6.73278 30.9829 6.67062 30.9731 6.60938 30.9609C6.58365 30.9558 6.55857 30.9485 6.5332 30.9424C6.49943 30.9343 6.4657 30.9268 6.43262 30.917C6.40458 30.9087 6.37711 30.8991 6.34961 30.8896C6.31696 30.8784 6.28479 30.8664 6.25293 30.8535C6.2296 30.8441 6.20648 30.8345 6.18359 30.8242C6.14988 30.8091 6.11668 30.7933 6.08398 30.7764C6.06169 30.7648 6.03937 30.7535 6.01758 30.7412C5.98558 30.7231 5.9547 30.7034 5.92383 30.6836C5.90297 30.6702 5.88165 30.6577 5.86133 30.6436C5.83552 30.6256 5.81104 30.606 5.78613 30.5869C5.64546 30.4791 5.51978 30.3536 5.41211 30.2129C5.39787 30.1943 5.38273 30.1763 5.36914 30.1572L5.3418 30.1182C5.33239 30.1042 5.32449 30.0894 5.31543 30.0752C5.29568 30.0443 5.27588 30.0135 5.25781 29.9814C5.24551 29.9596 5.23416 29.9373 5.22266 29.915C5.20579 29.8823 5.18989 29.8491 5.1748 29.8154C5.16456 29.7925 5.1549 29.7694 5.14551 29.7461C5.13268 29.7142 5.12058 29.6821 5.10938 29.6494C5.09993 29.6219 5.0903 29.5944 5.08203 29.5664C5.07228 29.5333 5.0647 29.4996 5.05664 29.4658C5.05059 29.4405 5.04317 29.4154 5.03809 29.3896C5.02607 29.3288 5.0171 29.2668 5.01074 29.2041L5 29V7C5 6.86559 5.01378 6.73439 5.03906 6.60742C5.04338 6.58575 5.0487 6.56438 5.05371 6.54297C5.06342 6.50149 5.07369 6.46036 5.08594 6.41992C5.09293 6.39681 5.10157 6.37431 5.10938 6.35156C5.12221 6.31413 5.13445 6.27663 5.14941 6.24023C5.1584 6.21837 5.16898 6.19725 5.17871 6.17578C5.19469 6.14055 5.21059 6.10539 5.22852 6.07129C5.2423 6.04504 5.25756 6.01968 5.27246 5.99414C5.28848 5.9667 5.305 5.93967 5.32227 5.91309C5.33748 5.88965 5.35299 5.86649 5.36914 5.84375C5.39032 5.81394 5.41183 5.78442 5.43457 5.75586C5.4507 5.73559 5.46749 5.7159 5.48438 5.69629C5.50846 5.66833 5.53302 5.64084 5.55859 5.61426C5.57551 5.59666 5.59281 5.57947 5.61035 5.5625C5.6372 5.53655 5.66509 5.51173 5.69336 5.4873C5.71364 5.46977 5.73391 5.45226 5.75488 5.43555C5.78146 5.41438 5.80926 5.39482 5.83691 5.375C5.85988 5.35853 5.88257 5.34168 5.90625 5.32617C5.93398 5.30802 5.96255 5.2912 5.99121 5.27441C6.01711 5.25924 6.04271 5.24352 6.06934 5.22949C6.09739 5.21473 6.12646 5.20193 6.15527 5.18848C6.18402 5.17505 6.21272 5.16149 6.24219 5.14941C6.26855 5.13861 6.29535 5.12883 6.32227 5.11914C6.35425 5.10761 6.38623 5.09586 6.41895 5.08594C6.46537 5.07187 6.51276 5.06052 6.56055 5.0498C6.57331 5.04694 6.58578 5.04266 6.59863 5.04004C6.66326 5.02688 6.72916 5.01751 6.7959 5.01074L7 5H18.5L21.5 9Z" style={{ fill: `var(--${type})` }}/>
@@ -35,7 +36,7 @@ export const NewThreadFolder = forwardRef<SVGSVGElement, NewThreadFolderProps>(
 ;
   } 
   
-  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="M30 27H34V30H30V34H27V30H23V27H27V23H30V27Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M41.2041 17.0107C42.2128 17.113 43 17.9643 43 19V38L42.9893 38.2041C42.8938 39.1457 42.1457 39.8938 41.2041 39.9893L41 40H38.2773V41.8828L38.2725 42.0303C38.1704 43.4882 36.5664 44.3482 35.2959 43.626L35.1709 43.5479L29.833 40H16L15.7959 39.9893C14.8543 39.8938 14.1062 39.1457 14.0107 38.2041L14 38V19C14 17.8954 14.8954 17 16 17H41L41.2041 17.0107ZM17 37H30.7393L35.2773 40.0166V37H40V20H17V37Z" style={{ fill: `var(--${type})` }}/>
 <path d="M21.5 9H34C35.1046 9 36 9.89543 36 11V14H15C12.7909 14 11 15.7909 11 18V31H7C5.89543 31 5 30.1046 5 29V7C5 5.89543 5.89543 5 7 5H18.5L21.5 9Z" style={{ fill: `var(--${type})` }}/>

package/assets/palette/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface PaletteProps {
+interface PaletteProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,9 +12,9 @@ interface PaletteProps {
 }
 
 export const Palette = forwardRef<SVGSVGElement, PaletteProps>(
-  ({ 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="M27.5 16.5C28.6046 16.5 29.5 15.6046 29.5 14.5C29.5 13.3954 28.6046 12.5 27.5 12.5C26.3954 12.5 25.5 13.3954 25.5 14.5C25.5 15.6046 26.3954 16.5 27.5 16.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M21.5 15C21.5 16.1046 20.6046 17 19.5 17C18.3954 17 17.5 16.1046 17.5 15C17.5 13.8954 18.3954 13 19.5 13C20.6046 13 21.5 13.8954 21.5 15Z" style={{ fill: `var(--${type})` }}/>
 <path d="M16.5 21C16.5 22.1046 15.6046 23 14.5 23C13.3954 23 12.5 22.1046 12.5 21C12.5 19.8954 13.3954 19 14.5 19C15.6046 19 16.5 19.8954 16.5 21Z" style={{ fill: `var(--${type})` }}/>
@@ -22,7 +23,7 @@ export const Palette = forwardRef<SVGSVGElement, PaletteProps>(
 </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="M27.5 16.5C28.6046 16.5 29.5 15.6046 29.5 14.5C29.5 13.3954 28.6046 12.5 27.5 12.5C26.3954 12.5 25.5 13.3954 25.5 14.5C25.5 15.6046 26.3954 16.5 27.5 16.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M21.5 15C21.5 16.1046 20.6046 17 19.5 17C18.3954 17 17.5 16.1046 17.5 15C17.5 13.8954 18.3954 13 19.5 13C20.6046 13 21.5 13.8954 21.5 15Z" style={{ fill: `var(--${type})` }}/>
 <path d="M16.5 21C16.5 22.1046 15.6046 23 14.5 23C13.3954 23 12.5 22.1046 12.5 21C12.5 19.8954 13.3954 19 14.5 19C15.6046 19 16.5 19.8954 16.5 21Z" style={{ fill: `var(--${type})` }}/>
@@ -31,7 +32,7 @@ export const Palette = forwardRef<SVGSVGElement, PaletteProps>(
 </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="M28 17.5C29.3807 17.5 30.5 16.3807 30.5 15C30.5 13.6193 29.3807 12.5 28 12.5C26.6193 12.5 25.5 13.6193 25.5 15C25.5 16.3807 26.6193 17.5 28 17.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22.5 15.5C22.5 16.8807 21.3807 18 20 18C18.6193 18 17.5 16.8807 17.5 15.5C17.5 14.1193 18.6193 13 20 13C21.3807 13 22.5 14.1193 22.5 15.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M17.5 21.5C17.5 22.8807 16.3807 24 15 24C13.6193 24 12.5 22.8807 12.5 21.5C12.5 20.1193 13.6193 19 15 19C16.3807 19 17.5 20.1193 17.5 21.5Z" style={{ fill: `var(--${type})` }}/>
@@ -41,7 +42,7 @@ export const Palette = forwardRef<SVGSVGElement, PaletteProps>(
 ;
   } 
   
-  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="M27.5 16.5C28.6046 16.5 29.5 15.6046 29.5 14.5C29.5 13.3954 28.6046 12.5 27.5 12.5C26.3954 12.5 25.5 13.3954 25.5 14.5C25.5 15.6046 26.3954 16.5 27.5 16.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M21.5 15C21.5 16.1046 20.6046 17 19.5 17C18.3954 17 17.5 16.1046 17.5 15C17.5 13.8954 18.3954 13 19.5 13C20.6046 13 21.5 13.8954 21.5 15Z" style={{ fill: `var(--${type})` }}/>
 <path d="M16.5 21C16.5 22.1046 15.6046 23 14.5 23C13.3954 23 12.5 22.1046 12.5 21C12.5 19.8954 13.3954 19 14.5 19C15.6046 19 16.5 19.8954 16.5 21Z" style={{ fill: `var(--${type})` }}/>

package/assets/paperclip/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface PaperclipProps {
+interface PaperclipProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface PaperclipProps {
 }
 
 export const Paperclip = forwardRef<SVGSVGElement, PaperclipProps>(
-  ({ 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="M12.6238 23.9682C9.03255 27.5595 9.03255 33.382 12.6238 36.9732C16.215 40.5644 22.0375 40.5644 25.6287 36.9732L39.3219 23.2799L41.4432 25.4012L27.75 39.0945C22.9872 43.8573 15.2652 43.8573 10.5024 39.0945C5.73966 34.3317 5.73966 26.6097 10.5024 21.8469L24.3681 7.98122C27.7386 4.61077 33.2032 4.61077 36.5736 7.98122C39.9441 11.3517 39.9441 16.8162 36.5736 20.1867L22.9703 33.79C20.9425 35.8179 17.6547 35.8179 15.6268 33.79C13.599 31.7622 13.599 28.4744 15.6268 26.4465L29.0577 13.0157L31.179 15.137L17.7482 28.5679C16.8919 29.4241 16.8919 30.8124 17.7482 31.6687C18.6044 32.525 19.9927 32.525 20.849 31.6687L34.4523 18.0654C36.6512 15.8665 36.6512 12.3014 34.4523 10.1025C32.2534 7.90366 28.6883 7.90366 26.4895 10.1025L12.6238 23.9682Z" 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="M12.6238 23.9682C9.03255 27.5595 9.03255 33.382 12.6238 36.9732C16.215 40.5644 22.0375 40.5644 25.6287 36.9732L39.3219 23.2799L41.4432 25.4012L27.75 39.0945C22.9872 43.8573 15.2652 43.8573 10.5024 39.0945C5.73966 34.3317 5.73966 26.6097 10.5024 21.8469L24.3681 7.98122C27.7386 4.61077 33.2032 4.61077 36.5736 7.98122C39.9441 11.3517 39.9441 16.8162 36.5736 20.1867L22.9703 33.79C20.9425 35.8179 17.6547 35.8179 15.6268 33.79C13.599 31.7622 13.599 28.4744 15.6268 26.4465L29.0577 13.0157L31.179 15.137L17.7482 28.5679C16.8919 29.4241 16.8919 30.8124 17.7482 31.6687C18.6044 32.525 19.9927 32.525 20.849 31.6687L34.4523 18.0654C36.6512 15.8665 36.6512 12.3014 34.4523 10.1025C32.2534 7.90366 28.6883 7.90366 26.4895 10.1025L12.6238 23.9682Z" 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 fillRule="evenodd" clipRule="evenodd" d="M12.9774 24.3215C9.58143 27.7175 9.58143 33.2234 12.9774 36.6193C16.3733 40.0153 21.8792 40.0153 25.2752 36.6194L38.9684 22.9261L41.7969 25.7545L28.1036 39.4478C23.1456 44.4058 15.107 44.4058 10.149 39.4478C5.19091 34.4897 5.19091 26.4512 10.149 21.4931L24.0147 7.62741C27.5804 4.06169 33.3615 4.0617 36.9272 7.62741C40.493 11.1931 40.493 16.9743 36.9272 20.54L23.3239 34.1433C21.1008 36.3664 17.4965 36.3664 15.2733 34.1433C13.0502 31.9202 13.0502 28.3158 15.2733 26.0927L28.7042 12.6619L31.5326 15.4903L18.1018 28.9212C17.4408 29.5822 17.4408 30.6539 18.1018 31.3149C18.7628 31.9759 19.8345 31.9759 20.4955 31.3149L34.0988 17.7116C36.1024 15.708 36.1024 12.4595 34.0988 10.4558C32.0952 8.45222 28.8467 8.45222 26.8431 10.4558L12.9774 24.3215Z" 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 fillRule="evenodd" clipRule="evenodd" d="M12.6238 23.9682C9.03255 27.5595 9.03255 33.382 12.6238 36.9732C16.215 40.5644 22.0375 40.5644 25.6287 36.9732L39.3219 23.2799L41.4432 25.4012L27.75 39.0945C22.9872 43.8573 15.2652 43.8573 10.5024 39.0945C5.73966 34.3317 5.73966 26.6097 10.5024 21.8469L24.3681 7.98122C27.7386 4.61077 33.2032 4.61077 36.5736 7.98122C39.9441 11.3517 39.9441 16.8162 36.5736 20.1867L22.9703 33.79C20.9425 35.8179 17.6547 35.8179 15.6268 33.79C13.599 31.7622 13.599 28.4744 15.6268 26.4465L29.0577 13.0157L31.179 15.137L17.7482 28.5679C16.8919 29.4241 16.8919 30.8124 17.7482 31.6687C18.6044 32.525 19.9927 32.525 20.849 31.6687L34.4523 18.0654C36.6512 15.8665 36.6512 12.3014 34.4523 10.1025C32.2534 7.90366 28.6883 7.90366 26.4895 10.1025L12.6238 23.9682Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/paragraph/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ParagraphProps {
+interface ParagraphProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,9 +12,9 @@ interface ParagraphProps {
 }
 
 export const Paragraph = forwardRef<SVGSVGElement, ParagraphProps>(
-  ({ 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 7.5H9V10.5H39V7.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 17.5H9V20.5H39V17.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M9 27.5H39V30.5H9V27.5Z" style={{ fill: `var(--${type})` }}/>
@@ -21,7 +22,7 @@ export const Paragraph = forwardRef<SVGSVGElement, ParagraphProps>(
 </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 7.5H9V10.5H39V7.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 17.5H9V20.5H39V17.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M9 27.5H39V30.5H9V27.5Z" style={{ fill: `var(--${type})` }}/>
@@ -29,7 +30,7 @@ export const Paragraph = forwardRef<SVGSVGElement, ParagraphProps>(
 </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 7H9V11H39V7Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 17H9V21H39V17Z" style={{ fill: `var(--${type})` }}/>
 <path d="M9 27H39V31H9V27Z" style={{ fill: `var(--${type})` }}/>
@@ -38,7 +39,7 @@ export const Paragraph = forwardRef<SVGSVGElement, ParagraphProps>(
 ;
   } 
   
-  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 7.5H9V10.5H39V7.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 17.5H9V20.5H39V17.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M9 27.5H39V30.5H9V27.5Z" style={{ fill: `var(--${type})` }}/>

package/assets/paraphrase/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ParaphraseProps {
+interface ParaphraseProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,9 +12,9 @@ interface ParaphraseProps {
 }
 
 export const Paraphrase = forwardRef<SVGSVGElement, ParaphraseProps>(
-  ({ 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="M31 6.5H7V9.5H31V6.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M31 15.5H7V18.5H31V15.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M7 24.5H21V27.5H7V24.5Z" style={{ fill: `var(--${type})` }}/>
@@ -21,7 +22,7 @@ export const Paraphrase = forwardRef<SVGSVGElement, ParaphraseProps>(
 </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="M31 6.5H7V9.5H31V6.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M31 15.5H7V18.5H31V15.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M7 24.5H21V27.5H7V24.5Z" style={{ fill: `var(--${type})` }}/>
@@ -29,7 +30,7 @@ export const Paraphrase = forwardRef<SVGSVGElement, ParaphraseProps>(
 </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="M31 6H7V10H31V6Z" style={{ fill: `var(--${type})` }}/>
 <path d="M31 15H7V19H31V15Z" style={{ fill: `var(--${type})` }}/>
 <path d="M7 24H21V28H7V24Z" style={{ fill: `var(--${type})` }}/>
@@ -38,7 +39,7 @@ export const Paraphrase = forwardRef<SVGSVGElement, ParaphraseProps>(
 ;
   } 
   
-  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="M31 6.5H7V9.5H31V6.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M31 15.5H7V18.5H31V15.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M7 24.5H21V27.5H7V24.5Z" style={{ fill: `var(--${type})` }}/>

package/assets/pencil/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface PencilProps {
+interface PencilProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,26 +12,26 @@ interface PencilProps {
 }
 
 export const Pencil = forwardRef<SVGSVGElement, PencilProps>(
-  ({ 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="M31.7619 7.19394C33.1286 5.82631 35.3453 5.82593 36.7125 7.1931L40.9532 11.4339C42.3197 12.8004 42.3201 15.0158 40.9541 16.3828L19.8399 37.496C19.4366 37.8993 18.9408 38.1979 18.3957 38.3658L12.1302 40.2959C9.41813 41.1314 6.89145 38.5614 7.77292 35.8639L9.7854 29.7052C9.95639 29.182 10.2484 28.7064 10.6377 28.3172L31.7619 7.19394ZM28.7486 14.4524L12.7588 30.4388C12.7032 30.4944 12.6614 30.5623 12.637 30.6371L10.6245 36.7957C10.4986 37.1811 10.8596 37.5482 11.247 37.4289L17.5125 35.4987C17.5904 35.4748 17.6612 35.4321 17.7188 35.3745L33.6963 19.4005L28.7486 14.4524ZM35.8173 17.2789L38.832 14.2622C39.0272 14.0669 39.0271 13.7504 38.8319 13.5552L34.5911 9.31442C34.3958 9.11911 34.0792 9.11916 33.8839 9.31454L30.8697 12.3308L35.8173 17.2789Z" 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="M31.7619 7.19394C33.1286 5.82631 35.3453 5.82593 36.7125 7.1931L40.9532 11.4339C42.3197 12.8004 42.3201 15.0158 40.9541 16.3828L37.938 19.3987L28.7471 10.2086L31.7619 7.19394Z" style={{ fill: `var(--${type})` }}/>
 <path d="M26.6257 12.3298L10.6377 28.3172C10.2484 28.7065 9.95639 29.182 9.7854 29.7053L7.77292 35.8639C6.89145 38.5614 9.41812 41.1314 12.1302 40.2959L18.3957 38.3658C18.9408 38.1979 19.4366 37.8993 19.8399 37.496L35.8167 21.52L26.6257 12.3298Z" 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 fillRule="evenodd" clipRule="evenodd" d="M31.408 6.8405C32.97 5.2775 35.5034 5.27707 37.0658 6.83954L41.3066 11.0803C42.8683 12.642 42.8688 15.174 41.3076 16.7362L20.1933 37.8496C19.7323 38.3105 19.1657 38.6517 18.5428 38.8436L12.2772 40.7738C9.1777 41.7286 6.29008 38.7915 7.29747 35.7086L9.30995 29.5499C9.50536 28.9519 9.83908 28.4085 10.284 27.9637L31.408 6.8405ZM28.7484 15.1595L13.1121 30.7924L11.0996 36.951L17.3651 35.0209L32.989 19.4004L28.7484 15.1595ZM35.8171 16.5717L38.4782 13.9087L34.2374 9.66797L31.5765 12.3307L35.8171 16.5717Z" 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 fillRule="evenodd" clipRule="evenodd" d="M31.7619 7.19394C33.1286 5.82631 35.3453 5.82593 36.7125 7.1931L40.9532 11.4339C42.3197 12.8004 42.3201 15.0158 40.9541 16.3828L19.8399 37.496C19.4366 37.8993 18.9408 38.1979 18.3957 38.3658L12.1302 40.2959C9.41813 41.1314 6.89145 38.5614 7.77292 35.8639L9.7854 29.7052C9.95639 29.182 10.2484 28.7064 10.6377 28.3172L31.7619 7.19394ZM28.7486 14.4524L12.7588 30.4388C12.7032 30.4944 12.6614 30.5623 12.637 30.6371L10.6245 36.7957C10.4986 37.1811 10.8596 37.5482 11.247 37.4289L17.5125 35.4987C17.5904 35.4748 17.6612 35.4321 17.7188 35.3745L33.6963 19.4005L28.7486 14.4524ZM35.8173 17.2789L38.832 14.2622C39.0272 14.0669 39.0271 13.7504 38.8319 13.5552L34.5911 9.31442C34.3958 9.11911 34.0792 9.11916 33.8839 9.31454L30.8697 12.3308L35.8173 17.2789Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/person/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface PersonProps {
+interface PersonProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface PersonProps {
 }
 
 export const Person = forwardRef<SVGSVGElement, PersonProps>(
-  ({ 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="M31.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM28.5 12.5C28.5 14.9853 26.4853 17 24 17C21.5147 17 19.5 14.9853 19.5 12.5C19.5 10.0147 21.5147 8 24 8C26.4853 8 28.5 10.0147 28.5 12.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M9 35C9 27.8203 14.8203 22 22 22H26C33.1797 22 39 27.8203 39 35V41C39 42.1046 38.1046 43 37 43H11C9.89543 43 9 42.1046 9 41V35ZM22 25H26C31.5228 25 36 29.4772 36 35V40H12V35C12 29.4772 16.4772 25 22 25Z" 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="M24 20C28.1422 20 31.5 16.6422 31.5 12.5C31.5 8.35787 28.1422 5 24 5C19.8579 5 16.5 8.35787 16.5 12.5C16.5 16.6422 19.8579 20 24 20Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22 22C14.8203 22 9 27.8203 9 35V41C9 42.1046 9.89543 43 11 43H37C38.1046 43 39 42.1046 39 41V35C39 27.8203 33.1797 22 26 22H22Z" 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 fillRule="evenodd" clipRule="evenodd" d="M31.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM27.5 12.5C27.5 14.433 25.933 16 24 16C22.067 16 20.5 14.433 20.5 12.5C20.5 10.567 22.067 9 24 9C25.933 9 27.5 10.567 27.5 12.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M9 35C9 27.8203 14.8203 22 22 22H26C33.1797 22 39 27.8203 39 35V41C39 42.1046 38.1046 43 37 43H11C9.89543 43 9 42.1046 9 41V35ZM22 26H26C30.9706 26 35 30.0294 35 35V39H13V35C13 30.0294 17.0294 26 22 26Z" 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 fillRule="evenodd" clipRule="evenodd" d="M31.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM28.5 12.5C28.5 14.9853 26.4853 17 24 17C21.5147 17 19.5 14.9853 19.5 12.5C19.5 10.0147 21.5147 8 24 8C26.4853 8 28.5 10.0147 28.5 12.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M9 35C9 27.8203 14.8203 22 22 22H26C33.1797 22 39 27.8203 39 35V41C39 42.1046 38.1046 43 37 43H11C9.89543 43 9 42.1046 9 41V35ZM22 25H26C31.5228 25 36 29.4772 36 35V40H12V35C12 29.4772 16.4772 25 22 25Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/person-add/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface PersonAddProps {
+interface PersonAddProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,23 +12,23 @@ interface PersonAddProps {
 }
 
 export const PersonAdd = forwardRef<SVGSVGElement, PersonAddProps>(
-  ({ 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="M24 20C28.1421 20 31.5 16.6422 31.5 12.5C31.5 8.35787 28.1421 5 24 5C19.8578 5 16.5 8.35787 16.5 12.5C16.5 16.6422 19.8578 20 24 20Z" style={{ fill: `var(--${type})` }}/>
 <path d="M9 35C9 27.8203 14.8203 22 22 22H26C28.6485 22 31.112 22.792 33.1666 24.1521C27.9642 25.025 24 29.5495 24 35C24 38.1521 25.3258 40.9945 27.4501 43H11C9.89543 43 9 42.1046 9 41V35Z" style={{ fill: `var(--${type})` }}/>
 <path d="M32.9996 33V26.9999H36.9996V33H43V37H36.9996V43H32.9996V37H27.0004V33H32.9996Z" 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="M24 20C28.1421 20 31.5 16.6422 31.5 12.5C31.5 8.35787 28.1421 5 24 5C19.8578 5 16.5 8.35787 16.5 12.5C16.5 16.6422 19.8578 20 24 20Z" style={{ fill: `var(--${type})` }}/>
 <path d="M9 35C9 27.8203 14.8203 22 22 22H26C28.6485 22 31.112 22.792 33.1666 24.1521C27.9642 25.025 24 29.5495 24 35C24 38.1521 25.3258 40.9945 27.4501 43H11C9.89543 43 9 42.1046 9 41V35Z" style={{ fill: `var(--${type})` }}/>
 <path d="M33.4996 33.5V26.9999H36.4996V33.5H43V36.5H36.4996V43H33.4996V36.5H27.0004V33.5H33.4996Z" 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 fillRule="evenodd" clipRule="evenodd" d="M31.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM27.5 12.5C27.5 14.433 25.933 16 24 16C22.067 16 20.5 14.433 20.5 12.5C20.5 10.567 22.067 9 24 9C25.933 9 27.5 10.567 27.5 12.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22 26C17.0294 26 13 30.0294 13 35V39H24.7499C25.3472 40.5294 26.2768 41.8923 27.4501 43H11C9.89543 43 9 42.1046 9 41V35C9 27.8203 14.8203 22 22 22H26C28.6485 22 31.112 22.792 33.1666 24.1521C31.3472 24.4574 29.6792 25.2092 28.2793 26.2911C27.5514 26.1011 26.7875 26 26 26H22Z" style={{ fill: `var(--${type})` }}/>
 <path d="M32.9996 33V26.9999H36.9996V33H43V37H36.9996V43H32.9996V37H27.0004V33H32.9996Z" style={{ fill: `var(--${type})` }}/>
@@ -35,7 +36,7 @@ export const PersonAdd = forwardRef<SVGSVGElement, PersonAddProps>(
 ;
   } 
   
-  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="M31.5 12.5C31.5 16.6422 28.1422 20 24 20C19.8579 20 16.5 16.6422 16.5 12.5C16.5 8.35787 19.8579 5 24 5C28.1422 5 31.5 8.35787 31.5 12.5ZM28.5 12.5C28.5 14.9853 26.4853 17 24 17C21.5147 17 19.5 14.9853 19.5 12.5C19.5 10.0147 21.5147 8 24 8C26.4853 8 28.5 10.0147 28.5 12.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22 25C16.4772 25 12 29.4772 12 35V40H25.1994C25.7751 41.1262 26.5392 42.14 27.4501 43H11C9.89543 43 9 42.1046 9 41V35C9 27.8203 14.8203 22 22 22H26C28.6485 22 31.112 22.792 33.1666 24.1521C31.7848 24.3839 30.4904 24.8734 29.3343 25.5694C28.2915 25.2006 27.1692 25 26 25H22Z" style={{ fill: `var(--${type})` }}/>
 <path d="M33.4996 33.5V26.9999H36.4996V33.5H43V36.5H36.4996V43H33.4996V36.5H27.0004V33.5H33.4996Z" style={{ fill: `var(--${type})` }}/>

package/assets/person-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 PersonFillProps {
+interface PersonFillProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,23 +12,23 @@ interface PersonFillProps {
 }
 
 export const PersonFill = forwardRef<SVGSVGElement, PersonFillProps>(
-  ({ 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 21.6624 4.40103 19.4185 5.13804 17.3333C7.88361 9.56538 15.2919 4 24 4C32.7081 4 40.1164 9.56538 42.862 17.3333C43.599 19.4185 44 21.6624 44 24Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 23.5C27.0376 23.5 29.5 21.0376 29.5 18C29.5 14.9624 27.0376 12.5 24 12.5C20.9624 12.5 18.5 14.9624 18.5 18C18.5 21.0376 20.9624 23.5 24 23.5Z" style={{ fill: `var(--${fillType})` }}/>
 <path d="M11 38V39.1992C14.4961 42.1922 19.0369 44 24 44C28.9631 44 33.5039 42.1922 37 39.1992V38C37 31.9249 32.0751 27 26 27H22C15.9249 27 11 31.9249 11 38Z" 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 21.6624 4.40103 19.4185 5.13804 17.3333C7.88361 9.56538 15.2919 4 24 4C32.7081 4 40.1164 9.56538 42.862 17.3333C43.599 19.4185 44 21.6624 44 24Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 23.5C27.0376 23.5 29.5 21.0376 29.5 18C29.5 14.9624 27.0376 12.5 24 12.5C20.9624 12.5 18.5 14.9624 18.5 18C18.5 21.0376 20.9624 23.5 24 23.5Z" style={{ fill: `var(--${fillType})` }}/>
 <path d="M11 38V39.1992C14.4961 42.1922 19.0369 44 24 44C28.9631 44 33.5039 42.1922 37 39.1992V38C37 31.9249 32.0751 27 26 27H22C15.9249 27 11 31.9249 11 38Z" 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 21.6624 4.40103 19.4185 5.13804 17.3333C7.88361 9.56538 15.2919 4 24 4C32.7081 4 40.1164 9.56538 42.862 17.3333C43.599 19.4185 44 21.6624 44 24Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 23.5C27.0376 23.5 29.5 21.0376 29.5 18C29.5 14.9624 27.0376 12.5 24 12.5C20.9624 12.5 18.5 14.9624 18.5 18C18.5 21.0376 20.9624 23.5 24 23.5Z" style={{ fill: `var(--${fillType})` }}/>
 <path d="M11 38V39.1992C14.4961 42.1922 19.0369 44 24 44C28.9631 44 33.5039 42.1922 37 39.1992V38C37 31.9249 32.0751 27 26 27H22C15.9249 27 11 31.9249 11 38Z" style={{ fill: `var(--${fillType})` }}/>
@@ -35,7 +36,7 @@ export const PersonFill = forwardRef<SVGSVGElement, PersonFillProps>(
 ;
   } 
   
-  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 21.6624 4.40103 19.4185 5.13804 17.3333C7.88361 9.56538 15.2919 4 24 4C32.7081 4 40.1164 9.56538 42.862 17.3333C43.599 19.4185 44 21.6624 44 24Z" style={{ fill: `var(--${type})` }}/>
 <path d="M24 23.5C27.0376 23.5 29.5 21.0376 29.5 18C29.5 14.9624 27.0376 12.5 24 12.5C20.9624 12.5 18.5 14.9624 18.5 18C18.5 21.0376 20.9624 23.5 24 23.5Z" style={{ fill: `var(--${fillType})` }}/>
 <path d="M11 38V39.1992C14.4961 42.1922 19.0369 44 24 44C28.9631 44 33.5039 42.1922 37 39.1992V38C37 31.9249 32.0751 27 26 27H22C15.9249 27 11 31.9249 11 38Z" style={{ fill: `var(--${fillType})` }}/>

package/assets/photo/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface PhotoProps {
+interface PhotoProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,27 +12,27 @@ interface PhotoProps {
 }
 
 export const Photo = forwardRef<SVGSVGElement, PhotoProps>(
-  ({ 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="M23 18C23 20.2091 21.2091 22 19 22C16.7909 22 15 20.2091 15 18C15 15.7909 16.7909 14 19 14C21.2091 14 23 15.7909 23 18Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M43 7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41.25C5 42.3546 5.89543 43.25 7 43.25H41C42.1046 43.25 43 42.3546 43 41.25V7ZM8 39.1976V40H40V31.5142L32.5002 24.1926L21.6095 34.8246L17.0002 30.234L8 39.1976ZM40 27.3217L33.8973 21.3639C33.1203 20.6054 31.8801 20.6054 31.1031 21.3639L21.6305 30.6115L18.4115 27.4056C17.6311 26.6284 16.3693 26.6284 15.5889 27.4056L8 34.9636V8H40V27.3217Z" 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="M7 5C5.89543 5 5 5.89543 5 7V40.9999C5 42.1045 5.89543 42.9999 7 42.9999H41C42.1046 42.9999 43 42.1045 43 40.9999V7C43 5.89543 42.1046 5 41 5H7ZM21.6095 34.5744L17.0002 29.9839L8 38.9475V39.9999H40V31.2641L32.5002 23.9424L21.6095 34.5744ZM19 22C21.2091 22 23 20.2091 23 18C23 15.7909 21.2091 14 19 14C16.7909 14 15 15.7909 15 18C15 20.2091 16.7909 22 19 22Z" 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="M23 18C23 20.2091 21.2091 22 19 22C16.7909 22 15 20.2091 15 18C15 15.7909 16.7909 14 19 14C21.2091 14 23 15.7909 23 18Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M43 7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41.25C5 42.3546 5.89543 43.25 7 43.25H41C42.1046 43.25 43 42.3546 43 41.25V7ZM39 39V31.9355L32.5002 25.5901L21.6025 36.2289L17.0002 31.6454L9.61549 39H39ZM39 26.3454L33.8973 21.3639C33.1203 20.6054 31.8801 20.6054 31.1031 21.3639L21.6305 30.6115L18.4115 27.4056C17.6311 26.6284 16.3693 26.6284 15.5889 27.4056L9 33.9676V9H39V26.3454Z" 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="M23 18C23 20.2091 21.2091 22 19 22C16.7909 22 15 20.2091 15 18C15 15.7909 16.7909 14 19 14C21.2091 14 23 15.7909 23 18Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M43 7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41.25C5 42.3546 5.89543 43.25 7 43.25H41C42.1046 43.25 43 42.3546 43 41.25V7ZM8 39.1976V40H40V31.5142L32.5002 24.1926L21.6095 34.8246L17.0002 30.234L8 39.1976ZM40 27.3217L33.8973 21.3639C33.1203 20.6054 31.8801 20.6054 31.1031 21.3639L21.6305 30.6115L18.4115 27.4056C17.6311 26.6284 16.3693 26.6284 15.5889 27.4056L8 34.9636V8H40V27.3217Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/play-button/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface PlayButtonProps {
+interface PlayButtonProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,27 +12,27 @@ interface PlayButtonProps {
 }
 
 export const PlayButton = forwardRef<SVGSVGElement, PlayButtonProps>(
-  ({ 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 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41ZM24 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 44Z" style={{ fill: `var(--${type})` }}/>
 <path d="M33 23.5L18.75 31.7272L18.75 15.2728L33 23.5Z" 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 44ZM18.75 31.7272L33 23.5L18.75 15.2728L18.75 31.7272Z" 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 fillRule="evenodd" clipRule="evenodd" d="M24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40ZM24 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 44Z" style={{ fill: `var(--${type})` }}/>
 <path d="M33 23.5L18.75 31.7272L18.75 15.2728L33 23.5Z" 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 fillRule="evenodd" clipRule="evenodd" d="M24 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41ZM24 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 44Z" style={{ fill: `var(--${type})` }}/>
 <path d="M33 23.5L18.75 31.7272L18.75 15.2728L33 23.5Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/plus/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface PlusProps {
+interface PlusProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface PlusProps {
 }
 
 export const Plus = forwardRef<SVGSVGElement, PlusProps>(
-  ({ 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 44ZM21.9997 35.9991V25.9998H11.9997V21.9998H21.9997V11.9998H25.9997V21.9998H35.9991V25.9998H25.9997V35.9991H21.9997Z" 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.4997 35.9991V25.4998H11.9997V22.4998H22.4997V11.9998H25.4997V22.4998H35.9991V25.4998H25.4997V35.9991H22.4997Z" 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="M22.0001 26V39.9993H26.0001V26H40.0001V22H26.0001V8H22.0001V22H8.00073V26H22.0001Z" 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.5001 25.5V39.9993H25.5001V25.5H40.0001V22.5H25.5001V8H22.5001V22.5H8.00073V25.5H22.5001Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;