@liner-fe/icon 0.0.49 → 0.0.51

package/assets/search/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface SearchProps {
+interface SearchProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface SearchProps {
 }
 
 export const Search = forwardRef<SVGSVGElement, SearchProps>(
-  ({ 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="M26.6679 28.7892C24.4942 30.5052 21.7491 31.5294 18.7647 31.5294C11.715 31.5294 6 25.8145 6 18.7647C6 11.715 11.715 6 18.7647 6C25.8145 6 31.5294 11.715 31.5294 18.7647C31.5294 21.7491 30.5053 24.4942 28.7892 26.6679L41.5607 39.4394L39.4394 41.5607L26.6679 28.7892ZM28.5294 18.7647C28.5294 24.1576 24.1576 28.5294 18.7647 28.5294C13.3718 28.5294 9 24.1576 9 18.7647C9 13.3718 13.3718 9 18.7647 9C24.1576 9 28.5294 13.3718 28.5294 18.7647Z" 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="M26.6679 28.7892C24.4942 30.5052 21.7491 31.5294 18.7647 31.5294C11.715 31.5294 6 25.8145 6 18.7647C6 11.715 11.715 6 18.7647 6C25.8145 6 31.5294 11.715 31.5294 18.7647C31.5294 21.7491 30.5053 24.4942 28.7892 26.6679L41.5607 39.4394L39.4394 41.5607L26.6679 28.7892ZM28.5294 18.7647C28.5294 24.1576 24.1576 28.5294 18.7647 28.5294C13.3718 28.5294 9 24.1576 9 18.7647C9 13.3718 13.3718 9 18.7647 9C24.1576 9 28.5294 13.3718 28.5294 18.7647Z" 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="M26.2657 29.0941C24.16 30.6258 21.5679 31.5294 18.7647 31.5294C11.715 31.5294 6 25.8145 6 18.7647C6 11.715 11.715 6 18.7647 6C25.8145 6 31.5294 11.715 31.5294 18.7647C31.5294 21.5678 30.6259 24.1599 29.0941 26.2657L41.9143 39.0858L39.0858 41.9142L26.2657 29.0941ZM27.5294 18.7647C27.5294 23.6053 23.6053 27.5294 18.7647 27.5294C13.9241 27.5294 10 23.6053 10 18.7647C10 13.9241 13.9241 10 18.7647 10C23.6053 10 27.5294 13.9241 27.5294 18.7647Z" 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="M26.6679 28.7892C24.4942 30.5052 21.7491 31.5294 18.7647 31.5294C11.715 31.5294 6 25.8145 6 18.7647C6 11.715 11.715 6 18.7647 6C25.8145 6 31.5294 11.715 31.5294 18.7647C31.5294 21.7491 30.5053 24.4942 28.7892 26.6679L41.5607 39.4394L39.4394 41.5607L26.6679 28.7892ZM28.5294 18.7647C28.5294 24.1576 24.1576 28.5294 18.7647 28.5294C13.3718 28.5294 9 24.1576 9 18.7647C9 13.3718 13.3718 9 18.7647 9C24.1576 9 28.5294 13.3718 28.5294 18.7647Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/secret-mode/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface SecretModeProps {
+interface SecretModeProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface SecretModeProps {
 }
 
 export const SecretMode = forwardRef<SVGSVGElement, SecretModeProps>(
-  ({ 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="M37.9077 19.8809L32.2913 7.60357C31.3704 5.59057 28.8355 4.9273 27.0468 6.23131L23.9997 8.45261L20.9586 6.23565C19.1664 4.92916 16.6264 5.59775 15.7097 7.61729L10.1391 19.8899C8.21278 19.5222 6.29744 19.0771 4.39776 18.5547L3.60229 21.4473C7.83456 22.6112 12.1415 23.4061 16.4758 23.8321C21.6631 24.3943 26.8976 24.3753 32.0817 23.7752C36.2278 23.3372 40.347 22.5613 44.3978 21.4473L43.6023 18.5547C41.718 19.0729 39.8183 19.5149 37.9077 19.8809ZM29.5632 8.85157C29.4317 8.564 29.0695 8.46925 28.814 8.65553L23.9997 12.1651L19.1913 8.65988C18.9353 8.47323 18.5725 8.56875 18.4415 8.85725L13.2187 20.3636C14.4037 20.557 15.5926 20.7185 16.7841 20.8479C21.7617 21.3361 26.7768 21.3179 31.7517 20.7934C32.7801 20.6741 33.8063 20.5309 34.8297 20.3639L29.5632 8.85157Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M22.4834 34.698C22.2176 38.9767 18.6632 42.3646 14.3176 42.3646C9.79887 42.3646 6.13574 38.7015 6.13574 34.1828C6.13574 29.6641 9.79887 26.001 14.3176 26.001C17.9727 26.001 21.068 28.3978 22.1176 31.7054C23.4078 31.4397 24.7412 31.4501 26.028 31.7369C27.1985 28.6497 30.1834 26.4551 33.681 26.4551C38.1997 26.4551 41.8628 30.1182 41.8628 34.6369C41.8628 39.1556 38.1997 42.8187 33.681 42.8187C29.1813 42.8187 25.5301 39.1864 25.4993 34.6941C24.5088 34.4522 23.4734 34.4535 22.4834 34.698ZM14.3176 39.3646C17.1794 39.3646 19.4994 37.0446 19.4994 34.1828C19.4994 31.321 17.1794 29.001 14.3176 29.001C11.4557 29.001 9.13574 31.321 9.13574 34.1828C9.13574 37.0446 11.4557 39.3646 14.3176 39.3646ZM33.681 39.8187C36.5428 39.8187 38.8628 37.4987 38.8628 34.6369C38.8628 31.7751 36.5428 29.4551 33.681 29.4551C30.8191 29.4551 28.4991 31.7751 28.4991 34.6369C28.4991 37.4987 30.8191 39.8187 33.681 39.8187Z" 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="M26.7522 5.82741C28.7966 4.33711 31.6936 5.09514 32.746 7.39571L38.1985 19.3147C39.9665 18.9663 41.7248 18.5521 43.4697 18.0723L44.5303 21.9291C40.469 23.046 36.3392 23.8253 32.1825 24.267C26.9329 24.878 21.6317 24.8972 16.3789 24.3246C12.0326 23.8947 7.71385 23.0962 3.46973 21.9291L4.53035 18.0723C6.29032 18.5563 8.06382 18.9734 9.84712 19.3237L15.2545 7.41077C16.3021 5.10272 19.2049 4.33862 21.2531 5.83176L23.9997 7.83399L26.7522 5.82741Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M22.4332 35.2282C21.9199 39.2532 18.4821 42.3646 14.3176 42.3646C9.79887 42.3646 6.13574 38.7015 6.13574 34.1828C6.13574 29.6641 9.79887 26.001 14.3176 26.001C17.795 26.001 20.7657 28.1704 21.9502 31.2297C23.3588 30.9293 24.8182 30.9422 26.2225 31.2684C27.5065 28.43 30.3631 26.4551 33.681 26.4551C38.1997 26.4551 41.8628 30.1182 41.8628 34.6369C41.8628 39.1556 38.1997 42.8187 33.681 42.8187C29.3568 42.8187 25.8161 39.4642 25.5193 35.2154C24.5088 34.9422 23.4419 34.9465 22.4332 35.2282ZM14.3176 38.3646C16.6271 38.3646 18.4994 36.4923 18.4994 34.1828C18.4994 31.8732 16.6271 30.001 14.3176 30.001C12.008 30.001 10.1357 31.8732 10.1357 34.1828C10.1357 36.4923 12.008 38.3646 14.3176 38.3646ZM33.681 38.8187C35.9905 38.8187 37.8628 36.9464 37.8628 34.6369C37.8628 32.3273 35.9905 30.4551 33.681 30.4551C31.3714 30.4551 29.4991 32.3273 29.4991 34.6369C29.4991 36.9464 31.3714 38.8187 33.681 38.8187Z" 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="M26.7522 5.82741C28.7965 4.33711 31.6935 5.09513 32.746 7.39571L38.1985 19.3148C39.9664 18.9663 41.7247 18.5521 43.4697 18.0723L44.5303 21.9291C40.4688 23.046 36.3389 23.8253 32.1819 24.2671C26.9324 24.878 21.6312 24.8972 16.3784 24.3245C12.0323 23.8947 7.71369 23.0962 3.46973 21.9291L4.53035 18.0723C6.2903 18.5563 8.06379 18.9734 9.84708 19.3237L15.2544 7.41077C16.3021 5.10272 19.2049 4.33862 21.2531 5.83176L23.9997 7.83399L26.7522 5.82741ZM31.7394 20.2916C26.7714 20.8181 21.7627 20.8362 16.7919 20.3459C15.8411 20.242 14.8921 20.1175 13.9454 19.9725L18.8968 9.06405L23.9997 12.784L29.1085 9.05971L34.101 19.9731C33.3153 20.0934 32.5279 20.1996 31.7394 20.2916Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M22.4332 35.2282C21.9199 39.2532 18.4821 42.3646 14.3176 42.3646C9.79887 42.3646 6.13574 38.7015 6.13574 34.1828C6.13574 29.6641 9.79887 26.001 14.3176 26.001C17.795 26.001 20.7657 28.1704 21.9502 31.2297C23.3588 30.9293 24.8182 30.9422 26.2225 31.2684C27.5065 28.43 30.3631 26.4551 33.681 26.4551C38.1997 26.4551 41.8628 30.1182 41.8628 34.6369C41.8628 39.1556 38.1997 42.8187 33.681 42.8187C29.3568 42.8187 25.8161 39.4642 25.5193 35.2154C24.5088 34.9422 23.4419 34.9465 22.4332 35.2282ZM14.3176 38.3646C16.6271 38.3646 18.4994 36.4923 18.4994 34.1828C18.4994 31.8732 16.6271 30.001 14.3176 30.001C12.008 30.001 10.1357 31.8732 10.1357 34.1828C10.1357 36.4923 12.008 38.3646 14.3176 38.3646ZM33.681 38.8187C35.9905 38.8187 37.8628 36.9464 37.8628 34.6369C37.8628 32.3273 35.9905 30.4551 33.681 30.4551C31.3714 30.4551 29.4991 32.3273 29.4991 34.6369C29.4991 36.9464 31.3714 38.8187 33.681 38.8187Z" 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="M37.9077 19.8809L32.2913 7.60357C31.3704 5.59057 28.8355 4.9273 27.0468 6.23131L23.9997 8.45261L20.9586 6.23565C19.1664 4.92916 16.6264 5.59775 15.7097 7.61729L10.1391 19.8899C8.21278 19.5222 6.29744 19.0771 4.39776 18.5547L3.60229 21.4473C7.83456 22.6112 12.1415 23.4061 16.4758 23.8321C21.6631 24.3943 26.8976 24.3753 32.0817 23.7752C36.2278 23.3372 40.347 22.5613 44.3978 21.4473L43.6023 18.5547C41.718 19.0729 39.8183 19.5149 37.9077 19.8809ZM29.5632 8.85157C29.4317 8.564 29.0695 8.46925 28.814 8.65553L23.9997 12.1651L19.1913 8.65988C18.9353 8.47323 18.5725 8.56875 18.4415 8.85725L13.2187 20.3636C14.4037 20.557 15.5926 20.7185 16.7841 20.8479C21.7617 21.3361 26.7768 21.3179 31.7517 20.7934C32.7801 20.6741 33.8063 20.5309 34.8297 20.3639L29.5632 8.85157Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M22.4834 34.698C22.2176 38.9767 18.6632 42.3646 14.3176 42.3646C9.79887 42.3646 6.13574 38.7015 6.13574 34.1828C6.13574 29.6641 9.79887 26.001 14.3176 26.001C17.9727 26.001 21.068 28.3978 22.1176 31.7054C23.4078 31.4397 24.7412 31.4501 26.028 31.7369C27.1985 28.6497 30.1834 26.4551 33.681 26.4551C38.1997 26.4551 41.8628 30.1182 41.8628 34.6369C41.8628 39.1556 38.1997 42.8187 33.681 42.8187C29.1813 42.8187 25.5301 39.1864 25.4993 34.6941C24.5088 34.4522 23.4734 34.4535 22.4834 34.698ZM14.3176 39.3646C17.1794 39.3646 19.4994 37.0446 19.4994 34.1828C19.4994 31.321 17.1794 29.001 14.3176 29.001C11.4557 29.001 9.13574 31.321 9.13574 34.1828C9.13574 37.0446 11.4557 39.3646 14.3176 39.3646ZM33.681 39.8187C36.5428 39.8187 38.8628 37.4987 38.8628 34.6369C38.8628 31.7751 36.5428 29.4551 33.681 29.4551C30.8191 29.4551 28.4991 31.7751 28.4991 34.6369C28.4991 37.4987 30.8191 39.8187 33.681 39.8187Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/send/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface SendProps {
+interface SendProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface SendProps {
 }
 
 export const Send = forwardRef<SVGSVGElement, SendProps>(
-  ({ 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.0229 22.6772C42.4872 23.4169 42.4872 25.5078 41.0229 26.2475L8.36699 42.7447C6.77568 43.5486 5.00729 42.026 5.56587 40.3329L9.86122 27.3135L32.5024 25.0494C32.7848 25.0211 32.9999 24.7835 32.9999 24.4996C32.9999 24.2158 32.7848 23.9781 32.5024 23.9499L9.88648 21.6883L5.56582 8.59178C5.00726 6.89871 6.77565 5.37614 8.36695 6.18004L41.0229 22.6772Z" 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="M41.0232 22.6772C42.4874 23.4169 42.4874 25.5078 41.0232 26.2475L8.36723 42.7447C6.77593 43.5486 5.00754 42.026 5.56611 40.3329L10.173 26.3692L32.5011 25.0296C32.7814 25.0127 33.0002 24.7805 33.0002 24.4996C33.0002 24.2188 32.7814 23.9865 32.5011 23.9697L10.1979 22.6315L5.56606 8.59178C5.0075 6.89871 6.77589 5.37614 8.36719 6.18004L41.0232 22.6772Z" 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="M5.56606 8.59196C5.00754 6.89901 6.77564 5.37634 8.36684 6.17985L41.0231 22.6769C42.4873 23.4166 42.4871 25.5074 41.0231 26.2472L8.36684 42.7453C6.77567 43.5487 5.0076 42.0261 5.56606 40.3332L10.5954 25.089C10.7295 24.6822 10.7296 24.2429 10.5954 23.8361L5.56606 8.59196ZM14.3551 26.4621L10.8795 36.9943L31.7272 26.4621H14.3551ZM14.3541 22.4621H31.7272L10.8795 11.9308L14.3541 22.4621Z" 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="M41.0232 22.6772C42.4874 23.4169 42.4874 25.5078 41.0232 26.2475L8.36723 42.7447C6.77593 43.5486 5.00754 42.026 5.56611 40.3329L10.5953 25.0892C10.7295 24.6823 10.7296 24.243 10.5953 23.836L5.56606 8.59178C5.0075 6.89871 6.77589 5.37614 8.36719 6.18004L41.0232 22.6772ZM34.9325 22.9614L9.17253 9.94796L13.4443 22.8961C13.4514 22.9179 13.4584 22.9396 13.4653 22.9614H34.9325ZM13.4661 25.9614C13.4589 25.984 13.4517 26.0066 13.4442 26.0292L9.17259 38.9767L34.9362 25.9614H13.4661Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/setting/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface SettingProps {
+interface SettingProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface SettingProps {
 }
 
 export const Setting = forwardRef<SVGSVGElement, SettingProps>(
-  ({ 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="M32.0001 24C32.0001 28.4183 28.4184 32 24.0001 32C19.5818 32 16.0001 28.4183 16.0001 24C16.0001 19.5817 19.5818 16 24.0001 16C28.4184 16 32.0001 19.5817 32.0001 24ZM29.0001 24C29.0001 26.7614 26.7615 29 24.0001 29C21.2387 29 19.0001 26.7614 19.0001 24C19.0001 21.2386 21.2387 19 24.0001 19C26.7615 19 29.0001 21.2386 29.0001 24Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M29.3335 3L30.3878 9.32595C31.5006 9.81104 32.5475 10.419 33.5115 11.1327L39.52 8.88167L44.8534 18.1193L39.8997 22.1973C39.9661 22.789 40.0002 23.3905 40.0002 24C40.0002 24.6098 39.9661 25.2116 39.8996 25.8036L44.8534 29.8817L39.52 39.1193L33.5106 36.8679C32.5469 37.5814 31.5003 38.1891 30.3878 38.674L29.3335 45H18.6668L17.6125 38.674C16.4997 38.189 15.4528 37.581 14.4889 36.8673L8.48031 39.1183L3.14697 29.8807L8.10059 25.8027C8.03424 25.211 8.00016 24.6095 8.00016 24C8.00016 23.3902 8.03427 22.7884 8.10069 22.1964L3.14697 18.1183L8.48031 8.88073L14.4897 11.1321C15.4534 10.4186 16.5 9.81089 17.6125 9.32595L18.6668 3H29.3335ZM38.1926 12.5826L40.9846 17.4184L36.7372 20.915L36.9184 22.5315C36.9724 23.0125 37.0002 23.5024 37.0002 24C37.0002 24.4978 36.9723 24.9879 36.9183 25.4691L36.737 27.0858L40.9846 30.5826L38.1926 35.4184L33.0361 33.4866L31.7256 34.4568C30.9419 35.0369 30.0917 35.5305 29.189 35.924L27.6963 36.5747L26.7921 42H21.2082L20.304 36.5747L18.8113 35.924C17.9084 35.5304 17.0579 35.0367 16.274 34.4563L14.9635 33.4859L9.80769 35.4174L7.01574 30.5816L11.2632 27.085L11.0819 25.4685C11.028 24.9875 11.0002 24.4976 11.0002 24C11.0002 23.5022 11.028 23.0121 11.082 22.5309L11.2633 20.9142L7.01574 17.4174L9.80769 12.5816L14.9642 14.5134L16.2747 13.5432C17.0584 12.9631 17.9087 12.4695 18.8113 12.076L20.304 11.4253L21.2082 6H26.7921L27.6963 11.4253L29.189 12.076C30.0919 12.4696 30.9424 12.9633 31.7263 13.5437L33.0369 14.5141L38.1926 12.5826Z" 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="M32.0001 24C32.0001 28.4183 28.4184 32 24.0001 32C19.5818 32 16.0001 28.4183 16.0001 24C16.0001 19.5817 19.5818 16 24.0001 16C28.4184 16 32.0001 19.5817 32.0001 24ZM29.0001 24C29.0001 26.7614 26.7615 29 24.0001 29C21.2387 29 19.0001 26.7614 19.0001 24C19.0001 21.2386 21.2387 19 24.0001 19C26.7615 19 29.0001 21.2386 29.0001 24Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M29.3335 3L30.3878 9.32595C31.5006 9.81104 32.5475 10.419 33.5115 11.1327L39.52 8.88167L44.8534 18.1193L39.8997 22.1973C39.9661 22.789 40.0002 23.3905 40.0002 24C40.0002 24.6098 39.9661 25.2116 39.8996 25.8036L44.8534 29.8817L39.52 39.1193L33.5106 36.8679C32.5469 37.5814 31.5003 38.1891 30.3878 38.674L29.3335 45H18.6668L17.6125 38.674C16.4997 38.189 15.4528 37.581 14.4889 36.8673L8.48031 39.1183L3.14697 29.8807L8.10059 25.8027C8.03424 25.211 8.00016 24.6095 8.00016 24C8.00016 23.3902 8.03427 22.7884 8.10069 22.1964L3.14697 18.1183L8.48031 8.88073L14.4897 11.1321C15.4534 10.4186 16.5 9.81089 17.6125 9.32595L18.6668 3H29.3335ZM38.1926 12.5826L40.9846 17.4184L36.7372 20.915L36.9184 22.5315C36.9724 23.0125 37.0002 23.5024 37.0002 24C37.0002 24.4978 36.9723 24.9879 36.9183 25.4691L36.737 27.0858L40.9846 30.5826L38.1926 35.4184L33.0361 33.4866L31.7256 34.4568C30.9419 35.0369 30.0917 35.5305 29.189 35.924L27.6963 36.5747L26.7921 42H21.2082L20.304 36.5747L18.8113 35.924C17.9084 35.5304 17.0579 35.0367 16.274 34.4563L14.9635 33.4859L9.80769 35.4174L7.01574 30.5816L11.2632 27.085L11.0819 25.4685C11.028 24.9875 11.0002 24.4976 11.0002 24C11.0002 23.5022 11.028 23.0121 11.082 22.5309L11.2633 20.9142L7.01574 17.4174L9.80769 12.5816L14.9642 14.5134L16.2747 13.5432C17.0584 12.9631 17.9087 12.4695 18.8113 12.076L20.304 11.4253L21.2082 6H26.7921L27.6963 11.4253L29.189 12.076C30.0919 12.4696 30.9424 12.9633 31.7263 13.5437L33.0369 14.5141L38.1926 12.5826Z" 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="M32.0001 24C32.0001 28.4183 28.4184 32 24.0001 32C19.5818 32 16.0001 28.4183 16.0001 24C16.0001 19.5817 19.5818 16 24.0001 16C28.4184 16 32.0001 19.5817 32.0001 24ZM28.0001 24C28.0001 26.2091 26.2093 28 24.0001 28C21.791 28 20.0001 26.2091 20.0001 24C20.0001 21.7909 21.791 20 24.0001 20C26.2093 20 28.0001 21.7909 28.0001 24Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M29.3335 3L30.3878 9.32595C31.5006 9.81104 32.5475 10.419 33.5115 11.1327L39.52 8.88167L44.8534 18.1193L39.8997 22.1973C39.9661 22.789 40.0002 23.3905 40.0002 24C40.0002 24.6098 39.9661 25.2116 39.8996 25.8036L44.8534 29.8817L39.52 39.1193L33.5106 36.8679C32.5469 37.5814 31.5003 38.1891 30.3878 38.674L29.3335 45H18.6668L17.6125 38.674C16.4997 38.189 15.4528 37.581 14.4889 36.8673L8.48031 39.1183L3.14697 29.8807L8.10059 25.8027C8.03424 25.211 8.00016 24.6095 8.00016 24C8.00016 23.3902 8.03427 22.7884 8.10069 22.1964L3.14697 18.1183L8.48031 8.88073L14.4897 11.1321C15.4534 10.4186 16.5 9.81089 17.6125 9.32595L18.6668 3H29.3335ZM37.7502 13.8162L39.695 17.1847L35.683 20.4876L35.9246 22.643C35.9744 23.087 36.0002 23.5397 36.0002 24C36.0002 24.4605 35.9744 24.9134 35.9246 25.3577L35.6828 27.5132L39.695 30.8162L37.7502 34.1847L32.878 32.3594L31.1306 33.653C30.4069 34.1888 29.6221 34.6443 28.7894 35.0073L26.7992 35.8749L25.945 41H22.0553L21.2011 35.8749L19.2109 35.0073C18.378 34.6442 17.5929 34.1885 16.8691 33.6526L15.1216 32.3588L10.2502 34.1838L8.30533 30.8153L12.3174 27.5124L12.0757 25.357C12.0259 24.913 12.0002 24.4603 12.0002 24C12.0002 23.5395 12.0259 23.0866 12.0758 22.6423L12.3176 20.4868L8.30533 17.1838L10.2502 13.8153L15.1223 15.6406L16.8697 14.347C17.5934 13.8112 18.3782 13.3557 19.2109 12.9927L21.2011 12.1251L22.0553 7H25.945L26.7992 12.1251L28.7894 12.9927C29.6224 13.3558 30.4074 13.8115 31.1312 14.3474L32.8787 15.6412L37.7502 13.8162Z" 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="M32.0001 24C32.0001 28.4183 28.4184 32 24.0001 32C19.5818 32 16.0001 28.4183 16.0001 24C16.0001 19.5817 19.5818 16 24.0001 16C28.4184 16 32.0001 19.5817 32.0001 24ZM29.0001 24C29.0001 26.7614 26.7615 29 24.0001 29C21.2387 29 19.0001 26.7614 19.0001 24C19.0001 21.2386 21.2387 19 24.0001 19C26.7615 19 29.0001 21.2386 29.0001 24Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M29.3335 3L30.3878 9.32595C31.5006 9.81104 32.5475 10.419 33.5115 11.1327L39.52 8.88167L44.8534 18.1193L39.8997 22.1973C39.9661 22.789 40.0002 23.3905 40.0002 24C40.0002 24.6098 39.9661 25.2116 39.8996 25.8036L44.8534 29.8817L39.52 39.1193L33.5106 36.8679C32.5469 37.5814 31.5003 38.1891 30.3878 38.674L29.3335 45H18.6668L17.6125 38.674C16.4997 38.189 15.4528 37.581 14.4889 36.8673L8.48031 39.1183L3.14697 29.8807L8.10059 25.8027C8.03424 25.211 8.00016 24.6095 8.00016 24C8.00016 23.3902 8.03427 22.7884 8.10069 22.1964L3.14697 18.1183L8.48031 8.88073L14.4897 11.1321C15.4534 10.4186 16.5 9.81089 17.6125 9.32595L18.6668 3H29.3335ZM38.1926 12.5826L40.9846 17.4184L36.7372 20.915L36.9184 22.5315C36.9724 23.0125 37.0002 23.5024 37.0002 24C37.0002 24.4978 36.9723 24.9879 36.9183 25.4691L36.737 27.0858L40.9846 30.5826L38.1926 35.4184L33.0361 33.4866L31.7256 34.4568C30.9419 35.0369 30.0917 35.5305 29.189 35.924L27.6963 36.5747L26.7921 42H21.2082L20.304 36.5747L18.8113 35.924C17.9084 35.5304 17.0579 35.0367 16.274 34.4563L14.9635 33.4859L9.80769 35.4174L7.01574 30.5816L11.2632 27.085L11.0819 25.4685C11.028 24.9875 11.0002 24.4976 11.0002 24C11.0002 23.5022 11.028 23.0121 11.082 22.5309L11.2633 20.9142L7.01574 17.4174L9.80769 12.5816L14.9642 14.5134L16.2747 13.5432C17.0584 12.9631 17.9087 12.4695 18.8113 12.076L20.304 11.4253L21.2082 6H26.7921L27.6963 11.4253L29.189 12.076C30.0919 12.4696 30.9424 12.9633 31.7263 13.5437L33.0369 14.5141L38.1926 12.5826Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/share/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ShareProps {
+interface ShareProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface ShareProps {
 }
 
 export const Share = forwardRef<SVGSVGElement, ShareProps>(
-  ({ 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="M25.499 9.62004L34.6261 18.7471L36.7474 16.6257L26.4749 6.35325C25.108 4.98642 22.892 4.98642 21.5251 6.35325L11.2526 16.6257L13.374 18.7471L22.499 9.622V32.9999H25.499V9.62004Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39.5 38.9999V23.9999H42.5V38.9999C42.5 40.9329 40.933 42.4999 39 42.4999H9C7.067 42.4999 5.5 40.9329 5.5 38.9999V24H8.5V38.9999C8.5 39.2761 8.72386 39.4999 9 39.4999H39C39.2761 39.4999 39.5 39.2761 39.5 38.9999Z" 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="M25.499 9.62004L34.6261 18.7471L36.7474 16.6257L26.4749 6.35325C25.108 4.98642 22.892 4.98642 21.5251 6.35325L11.2526 16.6257L13.374 18.7471L22.499 9.622V32.9999H25.499V9.62004Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39.5 38.9999V23.9999H42.5V38.9999C42.5 40.9329 40.933 42.4999 39 42.4999H9C7.067 42.4999 5.5 40.9329 5.5 38.9999V24H8.5V38.9999C8.5 39.2761 8.72386 39.4999 9 39.4999H39C39.2761 39.4999 39.5 39.2761 39.5 38.9999Z" 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="M25.999 10.8271L34.2725 19.1006L37.1009 16.2722L26.8284 5.9997C25.2663 4.4376 22.7337 4.4376 21.1716 5.9997L10.8991 16.2722L13.7275 19.1006L21.999 10.8291V32.9999H25.999V10.8271Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 38.9999V23.9999H43V38.9999C43 41.2091 41.2091 42.9999 39 42.9999H9C6.79086 42.9999 5 41.2091 5 38.9999V24H9V38.9999H39Z" 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="M25.499 9.62004L34.6261 18.7471L36.7474 16.6257L26.4749 6.35325C25.108 4.98642 22.892 4.98642 21.5251 6.35325L11.2526 16.6257L13.374 18.7471L22.499 9.622V32.9999H25.499V9.62004Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39.5 38.9999V23.9999H42.5V38.9999C42.5 40.9329 40.933 42.4999 39 42.4999H9C7.067 42.4999 5.5 40.9329 5.5 38.9999V24H8.5V38.9999C8.5 39.2761 8.72386 39.4999 9 39.4999H39C39.2761 39.4999 39.5 39.2761 39.5 38.9999Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/sheet-export/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface SheetExportProps {
+interface SheetExportProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface SheetExportProps {
 }
 
 export const SheetExport = forwardRef<SVGSVGElement, SheetExportProps>(
-  ({ 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="M4 11C4 9.89543 4.89543 9 6 9H42C43.1046 9 44 9.89543 44 11V21.5H17.5V27.5H26V30.5H17.5V37H26V40H6C4.89543 40 4 39.1046 4 38V11ZM7 27.5V21.5H14.5V27.5H7ZM7 30.5V37H14.5V30.5H7ZM14.5 18.5H7V12H14.5V18.5ZM17.5 18.5H41V12H17.5V18.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M41.0446 37.5V29.5805L30.5598 40.0603L28.439 37.9385L38.3822 28H31.5446V25H40.7289C42.5601 25 44.0446 26.4845 44.0446 28.3157V37.5H41.0446Z" 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="M4 11C4 9.89543 4.89543 9 6 9H42C43.1046 9 44 9.89543 44 11V21.5H17.5V27.5H26V30.5H17.5V37H26V40H6C4.89543 40 4 39.1046 4 38V11ZM7 27.5V21.5H14.5V27.5H7ZM7 30.5V37H14.5V30.5H7ZM14.5 18.5H7V12H14.5V18.5ZM17.5 18.5H41V12H17.5V18.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M41.0446 37.5V29.5805L30.5598 40.0603L28.439 37.9385L38.3822 28H31.5446V25H40.7289C42.5601 25 44.0446 26.4845 44.0446 28.3157V37.5H41.0446Z" 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="M4 11C4 9.89543 4.89543 9 6 9H42C43.1046 9 44 9.89543 44 11V22H18V27H26V31H18V36H26V40H6C4.89543 40 4 39.1046 4 38V11ZM8 27V22H14V27H8ZM8 31V36H14V31H8ZM14 18H8V13H14V18ZM18 18H40V13H18V18Z" style={{ fill: `var(--${type})` }}/>
 <path d="M28.0741 37.5758L37.1894 28.4648H31.537V24.4648H40.1842C42.2916 24.4648 43.9999 26.1732 43.9999 28.2805V37.4873H39.9999V31.3112L30.9018 40.4049L28.0741 37.5758Z" 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="M4 11C4 9.89543 4.89543 9 6 9H42C43.1046 9 44 9.89543 44 11V21.5H17.5V27.5H26V30.5H17.5V37H26V40H6C4.89543 40 4 39.1046 4 38V11ZM7 27.5V21.5H14.5V27.5H7ZM7 30.5V37H14.5V30.5H7ZM14.5 18.5H7V12H14.5V18.5ZM17.5 18.5H41V12H17.5V18.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M41.0446 37.5V29.5805L30.5598 40.0603L28.439 37.9385L38.3822 28H31.5446V25H40.7289C42.5601 25 44.0446 26.4845 44.0446 28.3157V37.5H41.0446Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/shield/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ShieldProps {
+interface ShieldProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,26 +12,26 @@ interface ShieldProps {
 }
 
 export const Shield = forwardRef<SVGSVGElement, ShieldProps>(
-  ({ 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="M7.29089 9.33562C6.51387 9.63026 6 10.3747 6 11.2057V20.9789C6 29.688 10.5324 37.7695 17.9637 42.3109L22.9571 45.3624C23.5973 45.7536 24.4027 45.7536 25.0429 45.3624L30.0363 42.3109C37.4676 37.7695 42 29.688 42 20.9788V11.2057C42 10.3747 41.4861 9.63026 40.7091 9.33562L24.7091 3.2686C24.2522 3.09536 23.7478 3.09536 23.2909 3.2686L7.29089 9.33562ZM16.6763 20.667L22.0738 26.0645L31.4986 16.6726L34.322 19.506L24.2884 29.5046C23.062 30.7268 21.0775 30.7251 19.8531 29.5007L13.8479 23.4955L16.6763 20.667Z" 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.29089 9.33562C6.51387 9.63026 6 10.3747 6 11.2057V20.9789C6 29.688 10.5324 37.7695 17.9637 42.3109L22.9571 45.3624C23.5973 45.7536 24.4027 45.7536 25.0429 45.3624L30.0363 42.3109C37.4676 37.7695 42 29.688 42 20.9788V11.2057C42 10.3747 41.4861 9.63026 40.7091 9.33562L24.7091 3.2686C24.2522 3.09536 23.7478 3.09536 23.2909 3.2686L7.29089 9.33562ZM16.3224 21.0211L22.0728 26.7715L31.8511 17.0273L33.9687 19.1523L23.9351 29.1509C22.904 30.1784 21.2356 30.177 20.2063 29.1477L14.2011 23.1424L16.3224 21.0211Z" 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="M16.6763 20.667L22.0738 26.0645L31.4986 16.6726L34.322 19.506L24.2884 29.5046C23.062 30.7268 21.0775 30.7251 19.8531 29.5007L13.8479 23.4955L16.6763 20.667Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M6 11.2057C6 10.3747 6.51387 9.63026 7.29089 9.33562L23.2909 3.2686C23.7478 3.09536 24.2522 3.09536 24.7091 3.2686L40.7091 9.33562C41.4861 9.63026 42 10.3747 42 11.2057V20.9789C42 29.688 37.4676 37.7695 30.0363 42.3109L25.0429 45.3624C24.4027 45.7536 23.5973 45.7536 22.9571 45.3624L17.9637 42.3109C10.5324 37.7695 6 29.688 6 20.9789V11.2057ZM24 7.27763L38 12.5863V20.9789C38 28.2945 34.1928 35.083 27.9505 38.8978L24 41.3119L20.0495 38.8978C13.8072 35.083 10 28.2945 10 20.9789L10 12.5863L24 7.27763Z" 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="M16.3224 21.0211L22.0728 26.7715L31.8511 17.0273L33.9687 19.1523L23.9351 29.1509C22.904 30.1784 21.2356 30.177 20.2063 29.1477L14.2011 23.1424L16.3224 21.0211Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M6 11.2057C6 10.3747 6.51387 9.63026 7.29089 9.33562L23.2909 3.2686C23.7478 3.09536 24.2522 3.09536 24.7091 3.2686L40.7091 9.33562C41.4861 9.63026 42 10.3747 42 11.2057V20.9789C42 29.688 37.4676 37.7695 30.0363 42.3109L25.0429 45.3624C24.4027 45.7536 23.5973 45.7536 22.9571 45.3624L17.9637 42.3109C10.5324 37.7695 6 29.688 6 20.9789V11.2057ZM24 6.20815L39 11.896V20.9789C39 28.6429 35.0115 35.7546 28.4719 39.751L24 42.4839L19.5281 39.751C12.9885 35.7546 9 28.6429 9 20.9789L9 11.896L24 6.20815Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/shield-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 ShieldPersonProps {
+interface ShieldPersonProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,23 +12,23 @@ interface ShieldPersonProps {
 }
 
 export const ShieldPerson = forwardRef<SVGSVGElement, ShieldPersonProps>(
-  ({ 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 d="M9 35C9 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 25H22C16.4772 25 12 29.4772 12 35V40H25.1994C25.7751 41.1262 26.5392 42.14 27.4501 43H11C9.89543 43 9 42.1046 9 41V35Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M28 30.3293C28 29.9922 28.2085 29.6902 28.5237 29.5706L35.0147 27.1094C35.2 27.0391 35.4047 27.0391 35.59 27.1094L42.081 29.5706C42.3962 29.6902 42.6047 29.9922 42.6047 30.3293V34.2941C42.6047 37.8273 40.7659 41.1058 37.7511 42.9482L35.7254 44.1862C35.4657 44.3449 35.139 44.3449 34.8792 44.1862L32.8535 42.9482C29.8387 41.1058 28 37.8273 28 34.2941V30.3293ZM34.4234 36.1488L32.0381 33.7635L30.6239 35.1777L33.5221 38.076C34.0188 38.5726 34.8237 38.5733 35.3212 38.0776L40.0485 33.3668L38.6367 31.9501L34.4234 36.1488Z" 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="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="M9 35C9 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 25H22C16.4772 25 12 29.4772 12 35V40H25.1994C25.7751 41.1262 26.5392 42.14 27.4501 43H11C9.89543 43 9 42.1046 9 41V35Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M28 30.3293C28 29.9922 28.2085 29.6902 28.5237 29.5706L35.0147 27.1094C35.2 27.0391 35.4047 27.0391 35.59 27.1094L42.081 29.5706C42.3962 29.6902 42.6047 29.9922 42.6047 30.3293V34.2941C42.6047 37.8273 40.7659 41.1058 37.7511 42.9482L35.7254 44.1862C35.4657 44.3449 35.139 44.3449 34.8792 44.1862L32.8535 42.9482C29.8387 41.1058 28 37.8273 28 34.2941V30.3293ZM34.4234 36.1488L32.0381 33.7635L30.6239 35.1777L33.5221 38.076C34.0188 38.5726 34.8237 38.5733 35.3212 38.0776L40.0485 33.3668L38.6367 31.9501L34.4234 36.1488Z" 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="M9 35C9 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 26H22C17.0294 26 13 30.0294 13 35V39H24.7499C25.3472 40.5294 26.2768 41.8923 27.4501 43H11C9.89543 43 9 42.1046 9 41V35Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M28 30.3293C28 29.9922 28.2085 29.6902 28.5237 29.5706L35.0147 27.1094C35.2 27.0391 35.4047 27.0391 35.59 27.1094L42.081 29.5706C42.3962 29.6902 42.6047 29.9922 42.6047 30.3293V34.2941C42.6047 37.8273 40.7659 41.1058 37.7511 42.9482L35.7254 44.1862C35.4657 44.3449 35.139 44.3449 34.8792 44.1862L32.8535 42.9482C29.8387 41.1058 28 37.8273 28 34.2941V30.3293ZM34.4234 36.1488L32.0381 33.7635L30.6239 35.1777L33.5221 38.076C34.0188 38.5726 34.8237 38.5733 35.3212 38.0776L40.0485 33.3668L38.6367 31.9501L34.4234 36.1488Z" style={{ fill: `var(--${type})` }}/>
@@ -35,7 +36,7 @@ export const ShieldPerson = forwardRef<SVGSVGElement, ShieldPersonProps>(
 ;
   } 
   
-  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="M9 35C9 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 25H22C16.4772 25 12 29.4772 12 35V40H25.1994C25.7751 41.1262 26.5392 42.14 27.4501 43H11C9.89543 43 9 42.1046 9 41V35Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M28 30.3293C28 29.9922 28.2085 29.6902 28.5237 29.5706L35.0147 27.1094C35.2 27.0391 35.4047 27.0391 35.59 27.1094L42.081 29.5706C42.3962 29.6902 42.6047 29.9922 42.6047 30.3293V34.2941C42.6047 37.8273 40.7659 41.1058 37.7511 42.9482L35.7254 44.1862C35.4657 44.3449 35.139 44.3449 34.8792 44.1862L32.8535 42.9482C29.8387 41.1058 28 37.8273 28 34.2941V30.3293ZM34.4234 36.1488L32.0381 33.7635L30.6239 35.1777L33.5221 38.076C34.0188 38.5726 34.8237 38.5733 35.3212 38.0776L40.0485 33.3668L38.6367 31.9501L34.4234 36.1488Z" style={{ fill: `var(--${type})` }}/>

package/assets/shield-usage/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ShieldUsageProps {
+interface ShieldUsageProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,9 +12,9 @@ interface ShieldUsageProps {
 }
 
 export const ShieldUsage = forwardRef<SVGSVGElement, ShieldUsageProps>(
-  ({ 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="M7 43H26.7819C26.0143 42.1085 25.3811 41.0981 24.9138 40H8V8H40V24.9138C41.0981 25.3811 42.1085 26.0143 43 26.7819V7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41C5 42.1046 5.89543 43 7 43Z" style={{ fill: `var(--${type})` }}/>
 <path d="M14.5 33.5H24.1733C24.3586 32.4433 24.6882 31.4363 25.1409 30.5H14.5V33.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M29.8171 25.5H14.5V22.5H33.5V24.1733C32.1814 24.4045 30.9401 24.8604 29.8171 25.5Z" style={{ fill: `var(--${type})` }}/>
@@ -22,7 +23,7 @@ export const ShieldUsage = forwardRef<SVGSVGElement, ShieldUsageProps>(
 </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="M7 43H26.7819C26.0143 42.1085 25.3811 41.0981 24.9138 40H8V8H40V24.9138C41.0981 25.3811 42.1085 26.0143 43 26.7819V7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41C5 42.1046 5.89543 43 7 43Z" style={{ fill: `var(--${type})` }}/>
 <path d="M14.5 33.5H24.1733C24.3586 32.4433 24.6882 31.4363 25.1409 30.5H14.5V33.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M29.8171 25.5H14.5V22.5H33.5V24.1733C32.1814 24.4045 30.9401 24.8604 29.8171 25.5Z" style={{ fill: `var(--${type})` }}/>
@@ -31,7 +32,7 @@ export const ShieldUsage = forwardRef<SVGSVGElement, ShieldUsageProps>(
 </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="M7 43H26.7819C25.7865 41.844 25.0171 40.4878 24.5423 39H9V9H39V24.5423C40.4878 25.0171 41.844 25.7865 43 26.7819V7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41C5 42.1046 5.89543 43 7 43Z" style={{ fill: `var(--${type})` }}/>
 <path d="M14 34H24.0969C24.2836 32.567 24.7341 31.2169 25.398 30H14V34Z" style={{ fill: `var(--${type})` }}/>
 <path d="M29.0173 26H14V22H34V24.0969C32.1687 24.3355 30.4728 25.0048 29.0173 26Z" style={{ fill: `var(--${type})` }}/>
@@ -41,7 +42,7 @@ export const ShieldUsage = forwardRef<SVGSVGElement, ShieldUsageProps>(
 ;
   } 
   
-  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="M7 43H26.7819C26.0143 42.1085 25.3811 41.0981 24.9138 40H8V8H40V24.9138C41.0981 25.3811 42.1085 26.0143 43 26.7819V7C43 5.89543 42.1046 5 41 5H7C5.89543 5 5 5.89543 5 7V41C5 42.1046 5.89543 43 7 43Z" style={{ fill: `var(--${type})` }}/>
 <path d="M14.5 33.5H24.1733C24.3586 32.4433 24.6882 31.4363 25.1409 30.5H14.5V33.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M29.8171 25.5H14.5V22.5H33.5V24.1733C32.1814 24.4045 30.9401 24.8604 29.8171 25.5Z" style={{ fill: `var(--${type})` }}/>

package/assets/shorten/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ShortenProps {
+interface ShortenProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface ShortenProps {
 }
 
 export const Shorten = forwardRef<SVGSVGElement, ShortenProps>(
-  ({ 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.6212 22.4991L38.0615 15.0588L35.9402 12.9375L26.981 21.8967C25.8199 23.0577 25.8199 24.9402 26.981 26.1013L35.9402 35.0604L38.0615 32.9391L30.6215 25.4991H46.0673V22.4991H30.6212Z" style={{ fill: `var(--${type})` }}/>
 <path d="M2 22.4991L17.3801 22.4991L9.94016 15.0592L12.0615 12.9378L21.0206 21.897C22.1817 23.0581 22.1817 24.9405 21.0206 26.1016L12.0615 35.0608L9.94016 32.9395L17.3805 25.4991L2 25.4991V22.4991Z" 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.6212 22.4991L38.0615 15.0588L35.9402 12.9375L26.981 21.8967C25.8199 23.0577 25.8199 24.9402 26.981 26.1013L35.9402 35.0604L38.0615 32.9391L30.6215 25.4991H46.0673V22.4991H30.6212Z" style={{ fill: `var(--${type})` }}/>
 <path d="M2 22.4991L17.3801 22.4991L9.94016 15.0592L12.0615 12.9378L21.0206 21.897C22.1817 23.0581 22.1817 24.9405 21.0206 26.1016L12.0615 35.0608L9.94016 32.9395L17.3805 25.4991L2 25.4991V22.4991Z" 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="M31.8283 21.9992L38.415 15.4124L35.5866 12.584L26.6275 21.5431C25.2711 22.8995 25.2711 25.0985 26.6275 26.4549L35.5866 35.414L38.415 32.5856L31.8286 25.9992H46.0673V21.9992H31.8283Z" style={{ fill: `var(--${type})` }}/>
 <path d="M2 21.9992L16.173 21.9992L9.58661 15.4128L12.415 12.5843L21.3742 21.5435C22.7305 22.8998 22.7305 25.0989 21.3742 26.4552L12.415 35.4144L9.58661 32.5859L16.1734 25.9992L2 25.9992V21.9992Z" 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="M30.6212 22.4991L38.0615 15.0588L35.9402 12.9375L26.981 21.8967C25.8199 23.0577 25.8199 24.9402 26.981 26.1013L35.9402 35.0604L38.0615 32.9391L30.6215 25.4991H46.0673V22.4991H30.6212Z" style={{ fill: `var(--${type})` }}/>
 <path d="M2 22.4991L17.3801 22.4991L9.94016 15.0592L12.0615 12.9378L21.0206 21.897C22.1817 23.0581 22.1817 24.9405 21.0206 26.1016L12.0615 35.0608L9.94016 32.9395L17.3805 25.4991L2 25.4991V22.4991Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/show-all/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface ShowAllProps {
+interface ShowAllProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,9 +12,9 @@ interface ShowAllProps {
 }
 
 export const ShowAll = forwardRef<SVGSVGElement, ShowAllProps>(
-  ({ 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="M8 6H17V9L9 9L9 17H6V8C6 6.89543 6.89543 6 8 6Z" style={{ fill: `var(--${type})` }}/>
 <path d="M6 31V40C6 41.1046 6.89543 42 8 42H17V39H9L9 31H6Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 31V39H31V42H40C41.1046 42 42 41.1046 42 40V31H39Z" style={{ fill: `var(--${type})` }}/>
@@ -21,7 +22,7 @@ export const ShowAll = forwardRef<SVGSVGElement, ShowAllProps>(
 </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="M8 6H17V9L9 9L9 17H6V8C6 6.89543 6.89543 6 8 6Z" style={{ fill: `var(--${type})` }}/>
 <path d="M6 31V40C6 41.1046 6.89543 42 8 42H17V39H9L9 31H6Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 31V39H31V42H40C41.1046 42 42 41.1046 42 40V31H39Z" style={{ fill: `var(--${type})` }}/>
@@ -29,7 +30,7 @@ export const ShowAll = forwardRef<SVGSVGElement, ShowAllProps>(
 </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="M8 6H17V10L10 10L10 17H6V8C6 6.89543 6.89543 6 8 6Z" style={{ fill: `var(--${type})` }}/>
 <path d="M6 31V40C6 41.1046 6.89543 42 8 42H17V38H10L10 31H6Z" style={{ fill: `var(--${type})` }}/>
 <path d="M38 31V38H31V42H40C41.1046 42 42 41.1046 42 40V31H38Z" style={{ fill: `var(--${type})` }}/>
@@ -38,7 +39,7 @@ export const ShowAll = forwardRef<SVGSVGElement, ShowAllProps>(
 ;
   } 
   
-  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="M8 6H17V9L9 9L9 17H6V8C6 6.89543 6.89543 6 8 6Z" style={{ fill: `var(--${type})` }}/>
 <path d="M6 31V40C6 41.1046 6.89543 42 8 42H17V39H9L9 31H6Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 31V39H31V42H40C41.1046 42 42 41.1046 42 40V31H39Z" style={{ fill: `var(--${type})` }}/>

package/assets/sign-out/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface SignOutProps {
+interface SignOutProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface SignOutProps {
 }
 
 export const SignOut = forwardRef<SVGSVGElement, SignOutProps>(
-  ({ 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="M38.294 25.4131L29.1669 34.5401L31.2883 36.6614L41.5608 26.3889C42.9276 25.0221 42.9276 22.806 41.5608 21.4392L31.2883 11.1667L29.1669 13.288L38.292 22.4131L14.9141 22.4131V25.4131L38.294 25.4131Z" style={{ fill: `var(--${type})` }}/>
 <path d="M8.91406 39.4141H23.9141V42.4141H8.91406C6.98106 42.4141 5.41406 40.8471 5.41406 38.9141L5.41406 8.91406C5.41406 6.98107 6.98107 5.41406 8.91406 5.41406L23.914 5.41406V8.41406L8.91406 8.41406C8.63792 8.41406 8.41406 8.63792 8.41406 8.91406L8.41406 38.9141C8.41406 39.1902 8.63792 39.4141 8.91406 39.4141Z" 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="M38.294 25.4131L29.1669 34.5401L31.2883 36.6614L41.5608 26.3889C42.9276 25.0221 42.9276 22.806 41.5608 21.4392L31.2883 11.1667L29.1669 13.288L38.292 22.4131L14.9141 22.4131V25.4131L38.294 25.4131Z" style={{ fill: `var(--${type})` }}/>
 <path d="M8.91406 39.4141H23.9141V42.4141H8.91406C6.98106 42.4141 5.41406 40.8471 5.41406 38.9141L5.41406 8.91406C5.41406 6.98107 6.98107 5.41406 8.91406 5.41406L23.914 5.41406V8.41406L8.91406 8.41406C8.63792 8.41406 8.41406 8.63792 8.41406 8.91406L8.41406 38.9141C8.41406 39.1902 8.63792 39.4141 8.91406 39.4141Z" 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="M37.0869 25.9131L28.8134 34.1866L31.6418 37.015L41.9143 26.7425C43.4764 25.1804 43.4764 22.6477 41.9143 21.0856L31.6418 10.8131L28.8134 13.6416L37.0849 21.9131L14.9141 21.9131V25.9131L37.0869 25.9131Z" style={{ fill: `var(--${type})` }}/>
 <path d="M8.91406 38.9141H23.9141V42.9141H8.91406C6.70492 42.9141 4.91406 41.1232 4.91406 38.9141L4.91406 8.91406C4.91406 6.70492 6.70492 4.91406 8.91406 4.91406L23.914 4.91406V8.91406L8.91406 8.91406L8.91406 38.9141Z" 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="M38.294 25.4131L29.1669 34.5401L31.2883 36.6614L41.5608 26.3889C42.9276 25.0221 42.9276 22.806 41.5608 21.4392L31.2883 11.1667L29.1669 13.288L38.292 22.4131L14.9141 22.4131V25.4131L38.294 25.4131Z" style={{ fill: `var(--${type})` }}/>
 <path d="M8.91406 39.4141H23.9141V42.4141H8.91406C6.98106 42.4141 5.41406 40.8471 5.41406 38.9141L5.41406 8.91406C5.41406 6.98107 6.98107 5.41406 8.91406 5.41406L23.914 5.41406V8.41406L8.91406 8.41406C8.63792 8.41406 8.41406 8.63792 8.41406 8.91406L8.41406 38.9141C8.41406 39.1902 8.63792 39.4141 8.91406 39.4141Z" style={{ fill: `var(--${type})` }}/>
 </svg>