@liner-fe/icon 0.0.50 → 0.0.51

package/assets/menu/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface MenuProps {
+interface MenuProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,23 +12,23 @@ interface MenuProps {
 }
 
 export const Menu = forwardRef<SVGSVGElement, MenuProps>(
-  ({ 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="M9 9.5H39V12.5H9V9.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M9 22.5H39V25.5H9V22.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 35.5H9V38.5H39V35.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 d="M9 9.5H39V12.5H9V9.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M9 22.5H39V25.5H9V22.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 35.5H9V38.5H39V35.5Z" 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="M9 9H39V13H9V9Z" style={{ fill: `var(--${type})` }}/>
 <path d="M9 22H39V26H9V22Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 35H9V39H39V35Z" style={{ fill: `var(--${type})` }}/>
@@ -35,7 +36,7 @@ export const Menu = forwardRef<SVGSVGElement, MenuProps>(
 ;
   } 
   
-  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="M9 9.5H39V12.5H9V9.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M9 22.5H39V25.5H9V22.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M39 35.5H9V38.5H39V35.5Z" style={{ fill: `var(--${type})` }}/>

package/assets/microscope/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface MicroscopeProps {
+interface MicroscopeProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface MicroscopeProps {
 }
 
 export const Microscope = forwardRef<SVGSVGElement, MicroscopeProps>(
-  ({ 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="M34.7002 24.8789L31.7891 25.8008L32.3906 27.6973L27.8105 29.1494L27.209 27.252L24.249 28.1904L20.1279 15.1855C15.7778 16.0549 12.5 19.8951 12.5 24.501C12.5 29.7477 16.7533 34.001 22 34.001H38V37.001H25.5V41.501H40V44.501H8V41.501H22.5V37.001H22C15.0964 37.001 9.5 31.4045 9.5 24.501C9.5 18.5537 13.6534 13.5763 19.2178 12.3115L17 5.31152L27.4512 2L34.7002 24.8789ZM20.7656 7.26562L26.2031 24.4248L30.9336 22.9258L25.4971 5.7666L20.7656 7.26562Z" 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="M34.7002 24.8789L31.7891 25.8008L32.3906 27.6973L27.8105 29.1494L27.209 27.252L24.249 28.1904L20.1279 15.1855C15.7778 16.0549 12.5 19.8951 12.5 24.501C12.5 29.7477 16.7533 34.001 22 34.001H38V37.001H25.5V41.501H40V44.501H8V41.501H22.5V37.001H22C15.0964 37.001 9.5 31.4045 9.5 24.501C9.5 18.5537 13.6534 13.5763 19.2178 12.3115L17 5.31152L27.4512 2L34.7002 24.8789ZM20.7656 7.26562L26.2031 24.4248L30.9336 22.9258L25.4971 5.7666L20.7656 7.26562Z" 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="M34.7002 24.8789L32.0752 25.71L32.8145 28.043L27.6641 29.6748L26.9248 27.3418L24.249 28.1904L20.4648 16.2471C16.7533 17.1591 14 20.5081 14 24.501C14 29.1954 17.8056 33.001 22.5 33.001H38V37.001H26V41.001H40V45.001H8V41.001H22V36.9893C15.3283 36.7268 10 31.2371 10 24.501C10 18.7202 13.9241 13.8561 19.2539 12.4268L17 5.31152L27.4512 2L34.7002 24.8789ZM22.0215 7.91602L26.8545 23.1689L29.6787 22.2744L24.8457 7.02148L22.0215 7.91602Z" 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="M34.7002 24.8789L31.7891 25.8008L32.3906 27.6973L27.8105 29.1494L27.209 27.252L24.249 28.1904L20.1279 15.1855C15.7778 16.0549 12.5 19.8951 12.5 24.501C12.5 29.7477 16.7533 34.001 22 34.001H38V37.001H25.5V41.501H40V44.501H8V41.501H22.5V37.001H22C15.0964 37.001 9.5 31.4045 9.5 24.501C9.5 18.5537 13.6534 13.5763 19.2178 12.3115L17 5.31152L27.4512 2L34.7002 24.8789ZM20.7656 7.26562L26.2031 24.4248L30.9336 22.9258L25.4971 5.7666L20.7656 7.26562Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/mindmap/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface MindmapProps {
+interface MindmapProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface MindmapProps {
 }
 
 export const Mindmap = forwardRef<SVGSVGElement, MindmapProps>(
-  ({ 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="M21.1948 14.29C22.3087 13.2007 23 11.6811 23 10C23 6.68629 20.3137 4 17 4C13.6863 4 11 6.68629 11 10C11 13.3137 13.6863 16 17 16C17.5349 16 18.0534 15.93 18.5469 15.7987L22.2868 20.2866C21.4809 21.3081 21 22.5979 21 24C21 24.4519 21.05 24.8921 21.1447 25.3155L15.1362 28.6535C14.0598 27.6289 12.6034 27 11 27C7.68629 27 5 29.6863 5 33C5 36.3137 7.68629 39 11 39C13.0021 39 14.7751 38.0194 15.8651 36.5123L27.0073 39.2978C27.1625 42.4732 29.7862 45 33 45C36.3137 45 39 42.3137 39 39C39 35.6863 36.3137 33 33 33C30.6349 33 28.5894 34.3684 27.6121 36.3567L16.9603 33.6938C16.9865 33.4661 17 33.2346 17 33C17 32.3737 16.904 31.7698 16.726 31.2022L22.5152 27.9859C23.6142 29.2216 25.2162 30 27 30C30.3137 30 33 27.3137 33 24C33 22.8438 32.673 21.7639 32.1063 20.8479L35.7711 16.5724C36.4602 16.8482 37.2124 17 38 17C41.3137 17 44 14.3137 44 11C44 7.68629 41.3137 5 38 5C34.6863 5 32 7.68629 32 11C32 12.4372 32.5053 13.7564 33.348 14.7896L29.9383 18.7675C29.0699 18.2788 28.0675 18 27 18C26.1758 18 25.3904 18.1662 24.6755 18.4669L21.1948 14.29ZM17 13C18.6569 13 20 11.6569 20 10C20 8.34315 18.6569 7 17 7C15.3431 7 14 8.34315 14 10C14 11.6569 15.3431 13 17 13ZM41 11C41 12.6569 39.6569 14 38 14C36.3431 14 35 12.6569 35 11C35 9.34315 36.3431 8 38 8C39.6569 8 41 9.34315 41 11ZM27 27C28.6569 27 30 25.6569 30 24C30 22.3431 28.6569 21 27 21C25.3431 21 24 22.3431 24 24C24 25.6569 25.3431 27 27 27ZM36 39C36 40.6569 34.6569 42 33 42C31.3431 42 30 40.6569 30 39C30 37.3431 31.3431 36 33 36C34.6569 36 36 37.3431 36 39ZM11 36C12.6569 36 14 34.6569 14 33C14 31.3431 12.6569 30 11 30C9.34315 30 8 31.3431 8 33C8 34.6569 9.34315 36 11 36Z" 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="M21.1948 14.29C22.3087 13.2007 23 11.6811 23 10C23 6.68629 20.3137 4 17 4C13.6863 4 11 6.68629 11 10C11 13.3137 13.6863 16 17 16C17.5349 16 18.0534 15.93 18.5469 15.7987L22.2868 20.2866C21.4809 21.3081 21 22.5979 21 24C21 24.4519 21.05 24.8921 21.1447 25.3155L15.1362 28.6535C14.0598 27.6289 12.6034 27 11 27C7.68629 27 5 29.6863 5 33C5 36.3137 7.68629 39 11 39C13.0021 39 14.7751 38.0194 15.8651 36.5123L27.0073 39.2978C27.1625 42.4732 29.7862 45 33 45C36.3137 45 39 42.3137 39 39C39 35.6863 36.3137 33 33 33C30.6349 33 28.5894 34.3684 27.6121 36.3567L16.9603 33.6938C16.9865 33.4661 17 33.2346 17 33C17 32.3737 16.904 31.7698 16.726 31.2022L22.5152 27.9859C23.6142 29.2216 25.2162 30 27 30C30.3137 30 33 27.3137 33 24C33 22.8438 32.673 21.7639 32.1063 20.8479L35.7711 16.5724C36.4602 16.8482 37.2124 17 38 17C41.3137 17 44 14.3137 44 11C44 7.68629 41.3137 5 38 5C34.6863 5 32 7.68629 32 11C32 12.4372 32.5053 13.7564 33.348 14.7896L29.9383 18.7675C29.0699 18.2788 28.0675 18 27 18C26.1758 18 25.3904 18.1662 24.6755 18.4669L21.1948 14.29ZM17 13C18.6569 13 20 11.6569 20 10C20 8.34315 18.6569 7 17 7C15.3431 7 14 8.34315 14 10C14 11.6569 15.3431 13 17 13ZM41 11C41 12.6569 39.6569 14 38 14C36.3431 14 35 12.6569 35 11C35 9.34315 36.3431 8 38 8C39.6569 8 41 9.34315 41 11ZM27 27C28.6569 27 30 25.6569 30 24C30 22.3431 28.6569 21 27 21C25.3431 21 24 22.3431 24 24C24 25.6569 25.3431 27 27 27ZM36 39C36 40.6569 34.6569 42 33 42C31.3431 42 30 40.6569 30 39C30 37.3431 31.3431 36 33 36C34.6569 36 36 37.3431 36 39ZM11 36C12.6569 36 14 34.6569 14 33C14 31.3431 12.6569 30 11 30C9.34315 30 8 31.3431 8 33C8 34.6569 9.34315 36 11 36Z" 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="M21.5399 13.923C22.4497 12.8712 23 11.4998 23 10C23 6.68629 20.3137 4 17 4C13.6863 4 11 6.68629 11 10C11 13.3137 13.6863 16 17 16C17.3391 16 17.6717 15.9719 17.9954 15.9178L21.9848 20.7051C21.3623 21.6508 21 22.7831 21 24C21 24.2694 21.0178 24.5346 21.0521 24.7945L14.7351 28.304C13.7102 27.4878 12.4121 27 11 27C7.68629 27 5 29.6863 5 33C5 36.3137 7.68629 39 11 39C12.805 39 14.4238 38.203 15.5237 36.9417L27.0562 39.8248C27.4581 42.7482 29.9661 45 33 45C36.3137 45 39 42.3137 39 39C39 35.6863 36.3137 33 33 33C30.8196 33 28.9108 34.1631 27.8602 35.9027L16.9971 33.1869C16.999 33.1248 17 33.0625 17 33C17 32.5536 16.9513 32.1186 16.8588 31.7L22.8754 28.3575C23.9506 29.3756 25.4024 30 27 30C30.3137 30 33 27.3137 33 24C33 23.0337 32.7716 22.1208 32.3658 21.3123L36.2772 16.749C36.8229 16.9123 37.4012 17 38 17C41.3137 17 44 14.3137 44 11C44 7.68629 41.3137 5 38 5C34.6863 5 32 7.68629 32 11C32 12.2529 32.384 13.4162 33.0408 14.3784L29.4787 18.5343C28.7231 18.1911 27.8839 18 27 18C26.3631 18 25.7493 18.0992 25.1734 18.2831L21.5399 13.923ZM17 12C18.1046 12 19 11.1046 19 10C19 8.89543 18.1046 8 17 8C15.8954 8 15 8.89543 15 10C15 11.1046 15.8954 12 17 12ZM40 11C40 12.1046 39.1046 13 38 13C36.8954 13 36 12.1046 36 11C36 9.89543 36.8954 9 38 9C39.1046 9 40 9.89543 40 11ZM27 26C28.1046 26 29 25.1046 29 24C29 22.8954 28.1046 22 27 22C25.8954 22 25 22.8954 25 24C25 25.1046 25.8954 26 27 26ZM35 39C35 40.1046 34.1046 41 33 41C31.8954 41 31 40.1046 31 39C31 37.8954 31.8954 37 33 37C34.1046 37 35 37.8954 35 39ZM11 35C12.1046 35 13 34.1046 13 33C13 31.8954 12.1046 31 11 31C9.89543 31 9 31.8954 9 33C9 34.1046 9.89543 35 11 35Z" 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="M21.1948 14.29C22.3087 13.2007 23 11.6811 23 10C23 6.68629 20.3137 4 17 4C13.6863 4 11 6.68629 11 10C11 13.3137 13.6863 16 17 16C17.5349 16 18.0534 15.93 18.5469 15.7987L22.2868 20.2866C21.4809 21.3081 21 22.5979 21 24C21 24.4519 21.05 24.8921 21.1447 25.3155L15.1362 28.6535C14.0598 27.6289 12.6034 27 11 27C7.68629 27 5 29.6863 5 33C5 36.3137 7.68629 39 11 39C13.0021 39 14.7751 38.0194 15.8651 36.5123L27.0073 39.2978C27.1625 42.4732 29.7862 45 33 45C36.3137 45 39 42.3137 39 39C39 35.6863 36.3137 33 33 33C30.6349 33 28.5894 34.3684 27.6121 36.3567L16.9603 33.6938C16.9865 33.4661 17 33.2346 17 33C17 32.3737 16.904 31.7698 16.726 31.2022L22.5152 27.9859C23.6142 29.2216 25.2162 30 27 30C30.3137 30 33 27.3137 33 24C33 22.8438 32.673 21.7639 32.1063 20.8479L35.7711 16.5724C36.4602 16.8482 37.2124 17 38 17C41.3137 17 44 14.3137 44 11C44 7.68629 41.3137 5 38 5C34.6863 5 32 7.68629 32 11C32 12.4372 32.5053 13.7564 33.348 14.7896L29.9383 18.7675C29.0699 18.2788 28.0675 18 27 18C26.1758 18 25.3904 18.1662 24.6755 18.4669L21.1948 14.29ZM17 13C18.6569 13 20 11.6569 20 10C20 8.34315 18.6569 7 17 7C15.3431 7 14 8.34315 14 10C14 11.6569 15.3431 13 17 13ZM41 11C41 12.6569 39.6569 14 38 14C36.3431 14 35 12.6569 35 11C35 9.34315 36.3431 8 38 8C39.6569 8 41 9.34315 41 11ZM27 27C28.6569 27 30 25.6569 30 24C30 22.3431 28.6569 21 27 21C25.3431 21 24 22.3431 24 24C24 25.6569 25.3431 27 27 27ZM36 39C36 40.6569 34.6569 42 33 42C31.3431 42 30 40.6569 30 39C30 37.3431 31.3431 36 33 36C34.6569 36 36 37.3431 36 39ZM11 36C12.6569 36 14 34.6569 14 33C14 31.3431 12.6569 30 11 30C9.34315 30 8 31.3431 8 33C8 34.6569 9.34315 36 11 36Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/minus/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface MinusProps {
+interface MinusProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface MinusProps {
 }
 
 export const Minus = forwardRef<SVGSVGElement, MinusProps>(
-  ({ 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 44ZM33 22L15 22V26L33 26V22Z" 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 44ZM33 22.5L15 22.5V25.5L33 25.5V22.5Z" 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="M8.00065 22L40 22L40 26L8.00065 26L8.00065 22Z" 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="M7.99992 22.5L39.9993 22.5L39.9993 25.5L7.99992 25.5L7.99992 22.5Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/mobile/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface MobileProps {
+interface MobileProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface MobileProps {
 }
 
 export const Mobile = forwardRef<SVGSVGElement, MobileProps>(
-  ({ 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 32.5C25.1046 32.5 26 33.3954 26 34.5C26 35.6046 25.1046 36.5 24 36.5C22.8954 36.5 22 35.6046 22 34.5C22 33.3954 22.8954 32.5 24 32.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M35.2041 6.01074C36.2128 6.113 37 6.96435 37 8V40L36.9893 40.2041C36.8938 41.1457 36.1457 41.8938 35.2041 41.9893L35 42H13L12.7959 41.9893C11.8543 41.8938 11.1062 41.1457 11.0107 40.2041L11 40V8C11 6.96435 11.7872 6.113 12.7959 6.01074L13 6H35L35.2041 6.01074ZM14 39H34V9H14V39Z" 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 32.5C25.1046 32.5 26 33.3954 26 34.5C26 35.6046 25.1046 36.5 24 36.5C22.8954 36.5 22 35.6046 22 34.5C22 33.3954 22.8954 32.5 24 32.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M35.2041 6.01074C36.2128 6.113 37 6.96435 37 8V40L36.9893 40.2041C36.8938 41.1457 36.1457 41.8938 35.2041 41.9893L35 42H13L12.7959 41.9893C11.8543 41.8938 11.1062 41.1457 11.0107 40.2041L11 40V8C11 6.96435 11.7872 6.113 12.7959 6.01074L13 6H35L35.2041 6.01074ZM14 39H34V9H14V39Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M24 32C25.1046 32 26 32.8954 26 34C26 35.1046 25.1046 36 24 36C22.8954 36 22 35.1046 22 34C22 32.8954 22.8954 32 24 32Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M35.2041 6.01074C36.2128 6.113 37 6.96435 37 8V40L36.9893 40.2041C36.8938 41.1457 36.1457 41.8938 35.2041 41.9893L35 42H13L12.7959 41.9893C11.8543 41.8938 11.1062 41.1457 11.0107 40.2041L11 40V8C11 6.96435 11.7872 6.113 12.7959 6.01074L13 6H35L35.2041 6.01074ZM15 38H33V10H15V38Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M24 32.5C25.1046 32.5 26 33.3954 26 34.5C26 35.6046 25.1046 36.5 24 36.5C22.8954 36.5 22 35.6046 22 34.5C22 33.3954 22.8954 32.5 24 32.5Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M35.2041 6.01074C36.2128 6.113 37 6.96435 37 8V40L36.9893 40.2041C36.8938 41.1457 36.1457 41.8938 35.2041 41.9893L35 42H13L12.7959 41.9893C11.8543 41.8938 11.1062 41.1457 11.0107 40.2041L11 40V8C11 6.96435 11.7872 6.113 12.7959 6.01074L13 6H35L35.2041 6.01074ZM14 39H34V9H14V39Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/more/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface MoreProps {
+interface MoreProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,23 +12,23 @@ interface MoreProps {
 }
 
 export const More = forwardRef<SVGSVGElement, MoreProps>(
-  ({ 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="M6 22C6 20.8954 6.89543 20 8 20H12C13.1046 20 14 20.8954 14 22V26C14 27.1046 13.1046 28 12 28H8C6.89543 28 6 27.1046 6 26V22Z" style={{ fill: `var(--${type})` }}/>
 <path d="M20 22C20 20.8954 20.8954 20 22 20H26C27.1046 20 28 20.8954 28 22V26C28 27.1046 27.1046 28 26 28H22C20.8954 28 20 27.1046 20 26V22Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 20C34.8954 20 34 20.8954 34 22V26C34 27.1046 34.8954 28 36 28H40C41.1046 28 42 27.1046 42 26V22C42 20.8954 41.1046 20 40 20H36Z" 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="M6 22C6 20.8954 6.89543 20 8 20H12C13.1046 20 14 20.8954 14 22V26C14 27.1046 13.1046 28 12 28H8C6.89543 28 6 27.1046 6 26V22Z" style={{ fill: `var(--${type})` }}/>
 <path d="M20 22C20 20.8954 20.8954 20 22 20H26C27.1046 20 28 20.8954 28 22V26C28 27.1046 27.1046 28 26 28H22C20.8954 28 20 27.1046 20 26V22Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 20C34.8954 20 34 20.8954 34 22V26C34 27.1046 34.8954 28 36 28H40C41.1046 28 42 27.1046 42 26V22C42 20.8954 41.1046 20 40 20H36Z" 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="M6 22C6 20.8954 6.89543 20 8 20H12C13.1046 20 14 20.8954 14 22V26C14 27.1046 13.1046 28 12 28H8C6.89543 28 6 27.1046 6 26V22Z" style={{ fill: `var(--${type})` }}/>
 <path d="M20 22C20 20.8954 20.8954 20 22 20H26C27.1046 20 28 20.8954 28 22V26C28 27.1046 27.1046 28 26 28H22C20.8954 28 20 27.1046 20 26V22Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 20C34.8954 20 34 20.8954 34 22V26C34 27.1046 34.8954 28 36 28H40C41.1046 28 42 27.1046 42 26V22C42 20.8954 41.1046 20 40 20H36Z" style={{ fill: `var(--${type})` }}/>
@@ -35,7 +36,7 @@ export const More = forwardRef<SVGSVGElement, MoreProps>(
 ;
   } 
   
-  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="M6 22C6 20.8954 6.89543 20 8 20H12C13.1046 20 14 20.8954 14 22V26C14 27.1046 13.1046 28 12 28H8C6.89543 28 6 27.1046 6 26V22Z" style={{ fill: `var(--${type})` }}/>
 <path d="M20 22C20 20.8954 20.8954 20 22 20H26C27.1046 20 28 20.8954 28 22V26C28 27.1046 27.1046 28 26 28H22C20.8954 28 20 27.1046 20 26V22Z" style={{ fill: `var(--${type})` }}/>
 <path d="M36 20C34.8954 20 34 20.8954 34 22V26C34 27.1046 34.8954 28 36 28H40C41.1046 28 42 27.1046 42 26V22C42 20.8954 41.1046 20 40 20H36Z" style={{ fill: `var(--${type})` }}/>

package/assets/more-horizontal/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface MoreHorizontalProps {
+interface MoreHorizontalProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,23 +12,23 @@ interface MoreHorizontalProps {
 }
 
 export const MoreHorizontal = forwardRef<SVGSVGElement, MoreHorizontalProps>(
-  ({ 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="M11 21C12.1046 21 13 21.8954 13 23V26C13 27.1046 12.1046 28 11 28H8C6.89543 28 6 27.1046 6 26V23C6 21.8954 6.89543 21 8 21H11Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 21C26.6046 21 27.5 21.8954 27.5 23V26C27.5 27.1046 26.6046 28 25.5 28H22.5C21.3954 28 20.5 27.1046 20.5 26V23C20.5 21.8954 21.3954 21 22.5 21H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M40 21C41.1045 21 41.9999 21.8955 42 23V26C42 27.1046 41.1046 28 40 28H37C35.8954 28 35 27.1046 35 26V23C35.0001 21.8955 35.8955 21 37 21H40Z" 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="M11 21C12.1046 21 13 21.8954 13 23V26C13 27.1046 12.1046 28 11 28H8C6.89543 28 6 27.1046 6 26V23C6 21.8954 6.89543 21 8 21H11Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 21C26.6046 21 27.5 21.8954 27.5 23V26C27.5 27.1046 26.6046 28 25.5 28H22.5C21.3954 28 20.5 27.1046 20.5 26V23C20.5 21.8954 21.3954 21 22.5 21H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M40 21C41.1045 21 41.9999 21.8955 42 23V26C42 27.1046 41.1046 28 40 28H37C35.8954 28 35 27.1046 35 26V23C35.0001 21.8955 35.8955 21 37 21H40Z" 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="M11 21C12.1046 21 13 21.8954 13 23V26C13 27.1046 12.1046 28 11 28H8C6.89543 28 6 27.1046 6 26V23C6 21.8954 6.89543 21 8 21H11Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 21C26.6046 21 27.5 21.8954 27.5 23V26C27.5 27.1046 26.6046 28 25.5 28H22.5C21.3954 28 20.5 27.1046 20.5 26V23C20.5 21.8954 21.3954 21 22.5 21H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M40 21C41.1045 21 41.9999 21.8955 42 23V26C42 27.1046 41.1046 28 40 28H37C35.8954 28 35 27.1046 35 26V23C35.0001 21.8955 35.8955 21 37 21H40Z" style={{ fill: `var(--${type})` }}/>
@@ -35,7 +36,7 @@ export const MoreHorizontal = forwardRef<SVGSVGElement, MoreHorizontalProps>(
 ;
   } 
   
-  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="M11 21C12.1046 21 13 21.8954 13 23V26C13 27.1046 12.1046 28 11 28H8C6.89543 28 6 27.1046 6 26V23C6 21.8954 6.89543 21 8 21H11Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 21C26.6046 21 27.5 21.8954 27.5 23V26C27.5 27.1046 26.6046 28 25.5 28H22.5C21.3954 28 20.5 27.1046 20.5 26V23C20.5 21.8954 21.3954 21 22.5 21H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M40 21C41.1045 21 41.9999 21.8955 42 23V26C42 27.1046 41.1046 28 40 28H37C35.8954 28 35 27.1046 35 26V23C35.0001 21.8955 35.8955 21 37 21H40Z" style={{ fill: `var(--${type})` }}/>

package/assets/more-vertical/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface MoreVerticalProps {
+interface MoreVerticalProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,23 +12,23 @@ interface MoreVerticalProps {
 }
 
 export const MoreVertical = forwardRef<SVGSVGElement, MoreVerticalProps>(
-  ({ 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.5 36C26.6046 36 27.5 36.8954 27.5 38V41C27.5 42.1046 26.6046 43 25.5 43H22.5C21.3954 43 20.5 42.1046 20.5 41V38C20.5 36.8954 21.3954 36 22.5 36H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 21C26.6046 21 27.5 21.8954 27.5 23V26C27.5 27.1046 26.6046 28 25.5 28H22.5C21.3954 28 20.5 27.1046 20.5 26V23C20.5 21.8954 21.3954 21 22.5 21H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 6C26.6046 6 27.5 6.89543 27.5 8V11C27.5 12.1046 26.6046 13 25.5 13H22.5C21.3954 13 20.5 12.1046 20.5 11V8C20.5 6.89543 21.3954 6 22.5 6H25.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 d="M25.5 36C26.6046 36 27.5 36.8954 27.5 38V41C27.5 42.1046 26.6046 43 25.5 43H22.5C21.3954 43 20.5 42.1046 20.5 41V38C20.5 36.8954 21.3954 36 22.5 36H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 21C26.6046 21 27.5 21.8954 27.5 23V26C27.5 27.1046 26.6046 28 25.5 28H22.5C21.3954 28 20.5 27.1046 20.5 26V23C20.5 21.8954 21.3954 21 22.5 21H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 6C26.6046 6 27.5 6.89543 27.5 8V11C27.5 12.1046 26.6046 13 25.5 13H22.5C21.3954 13 20.5 12.1046 20.5 11V8C20.5 6.89543 21.3954 6 22.5 6H25.5Z" 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.5 36C26.6046 36 27.5 36.8954 27.5 38V41C27.5 42.1046 26.6046 43 25.5 43H22.5C21.3954 43 20.5 42.1046 20.5 41V38C20.5 36.8954 21.3954 36 22.5 36H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 21C26.6046 21 27.5 21.8954 27.5 23V26C27.5 27.1046 26.6046 28 25.5 28H22.5C21.3954 28 20.5 27.1046 20.5 26V23C20.5 21.8954 21.3954 21 22.5 21H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 6C26.6046 6 27.5 6.89543 27.5 8V11C27.5 12.1046 26.6046 13 25.5 13H22.5C21.3954 13 20.5 12.1046 20.5 11V8C20.5 6.89543 21.3954 6 22.5 6H25.5Z" style={{ fill: `var(--${type})` }}/>
@@ -35,7 +36,7 @@ export const MoreVertical = forwardRef<SVGSVGElement, MoreVerticalProps>(
 ;
   } 
   
-  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.5 36C26.6046 36 27.5 36.8954 27.5 38V41C27.5 42.1046 26.6046 43 25.5 43H22.5C21.3954 43 20.5 42.1046 20.5 41V38C20.5 36.8954 21.3954 36 22.5 36H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 21C26.6046 21 27.5 21.8954 27.5 23V26C27.5 27.1046 26.6046 28 25.5 28H22.5C21.3954 28 20.5 27.1046 20.5 26V23C20.5 21.8954 21.3954 21 22.5 21H25.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M25.5 6C26.6046 6 27.5 6.89543 27.5 8V11C27.5 12.1046 26.6046 13 25.5 13H22.5C21.3954 13 20.5 12.1046 20.5 11V8C20.5 6.89543 21.3954 6 22.5 6H25.5Z" style={{ fill: `var(--${type})` }}/>

package/assets/move/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface MoveProps {
+interface MoveProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface MoveProps {
 }
 
 export const Move = forwardRef<SVGSVGElement, MoveProps>(
-  ({ 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="M37.4295 20.5001L27.7557 30.1738L29.8771 32.2951L40.6464 21.5258C42.0133 20.1589 42.0133 17.9429 40.6464 16.576L29.8771 5.80664L27.7557 7.92796L37.3279 17.5001H10C8.067 17.5001 6.5 19.0671 6.5 21.0001V42.0001H9.5V21.0001C9.5 20.724 9.72386 20.5001 10 20.5001H37.4295Z" 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="M37.4295 20.5001L27.7557 30.1738L29.8771 32.2951L40.6464 21.5258C42.0133 20.1589 42.0133 17.9429 40.6464 16.576L29.8771 5.80664L27.7557 7.92796L37.3279 17.5001H10C8.067 17.5001 6.5 19.0671 6.5 21.0001V42.0001H9.5V21.0001C9.5 20.724 9.72386 20.5001 10 20.5001H37.4295Z" 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="M36.2224 21.0002L27.4022 29.8203L30.2306 32.6487L41 21.8794C42.5621 20.3173 42.5621 17.7846 41 16.2225L30.2306 5.45312L27.4022 8.28155L36.1208 17.0002H10C7.79086 17.0002 6 18.791 6 21.0002V42.5002H10V21.0002H36.2224Z" 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="M37.4295 20.5001L27.7557 30.1738L29.8771 32.2951L40.6464 21.5258C42.0133 20.1589 42.0133 17.9429 40.6464 16.576L29.8771 5.80664L27.7557 7.92796L37.3279 17.5001H10C8.067 17.5001 6.5 19.0671 6.5 21.0001V42.0001H9.5V21.0001C9.5 20.724 9.72386 20.5001 10 20.5001H37.4295Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/move-to-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 MoveToFolderProps {
+interface MoveToFolderProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface MoveToFolderProps {
 }
 
 export const MoveToFolder = forwardRef<SVGSVGElement, MoveToFolderProps>(
-  ({ 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 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H7.5V38H40.5V13.5H22.5L19.5 9.5H7.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22.0195 23.0762C23.1803 24.2373 23.1795 26.1203 22.0186 27.2812L15.8818 33.418L13.7607 31.2969L18.3789 26.6777L4.5 26.6787V23.6787L18.3779 23.6777L13.7607 19.0605L15.8818 16.9395L22.0195 23.0762Z" 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 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H7.5V38H40.5V13.5H22.5L19.5 9.5H7.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22.0195 23.0762C23.1803 24.2373 23.1795 26.1203 22.0186 27.2812L15.8818 33.418L13.7607 31.2969L18.3789 26.6777L4.5 26.6787V23.6787L18.3779 23.6777L13.7607 19.0605L15.8818 16.9395L22.0195 23.0762Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H8.5V37H39.5V14.5H22L18.999 10.5H8.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22.373 22.7227C23.7291 24.079 23.7283 26.2785 22.3721 27.6348L16.2354 33.7715L13.4072 30.9434L17.1719 27.1777L4.5 27.1787V23.1787L17.1709 23.1777L13.4072 19.4141L16.2354 16.5859L22.373 22.7227Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M24 10.5H41.5C42.6046 10.5 43.5 11.3954 43.5 12.5V39L43.4893 39.2041C43.3938 40.1457 42.6457 40.8938 41.7041 40.9893L41.5 41H6.5L6.2959 40.9893C5.35435 40.8938 4.6062 40.1457 4.51074 39.2041L4.5 39V34H7.5V38H40.5V13.5H22.5L19.5 9.5H7.5V16H4.5V8.5C4.5 7.46435 5.28722 6.613 6.2959 6.51074L6.5 6.5H21L24 10.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M22.0195 23.0762C23.1803 24.2373 23.1795 26.1203 22.0186 27.2812L15.8818 33.418L13.7607 31.2969L18.3789 26.6777L4.5 26.6787V23.6787L18.3779 23.6777L13.7607 19.0605L15.8818 16.9395L22.0195 23.0762Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/new-chrome-extension/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface NewChromeExtensionProps {
+interface NewChromeExtensionProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,25 +12,25 @@ interface NewChromeExtensionProps {
 }
 
 export const NewChromeExtension = forwardRef<SVGSVGElement, NewChromeExtensionProps>(
-  ({ 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="M40.2041 11.0107C40.2705 11.0175 40.3361 11.027 40.4004 11.04L40.4033 11.041L40.5713 11.083C40.5742 11.0839 40.5771 11.085 40.5801 11.0859C40.6128 11.0958 40.6448 11.1076 40.6768 11.1191C40.7037 11.1288 40.7305 11.1386 40.7568 11.1494C40.7863 11.1615 40.815 11.1751 40.8438 11.1885C40.8726 11.2019 40.9016 11.2147 40.9297 11.2295C40.9563 11.2435 40.9819 11.2592 41.0078 11.2744C41.0365 11.2912 41.065 11.308 41.0928 11.3262C41.1165 11.3417 41.1391 11.3585 41.1621 11.375C41.1898 11.3948 41.2175 11.4144 41.2441 11.4355C41.2651 11.4523 41.2854 11.4698 41.3057 11.4873C41.334 11.5117 41.3618 11.5365 41.3887 11.5625C41.4062 11.5795 41.4235 11.5967 41.4404 11.6143C41.466 11.6408 41.4905 11.6683 41.5146 11.6963C41.5315 11.7159 41.5483 11.7356 41.5645 11.7559C41.5872 11.7844 41.6087 11.8139 41.6299 11.8438C41.646 11.8665 41.6615 11.8896 41.6768 11.9131C41.694 11.9397 41.7105 11.9667 41.7266 11.9941C41.7415 12.0197 41.7567 12.045 41.7705 12.0713C41.7884 12.1054 41.8043 12.1405 41.8203 12.1758C41.8301 12.1973 41.8406 12.2184 41.8496 12.2402C41.8646 12.2766 41.8768 12.3141 41.8896 12.3516C41.8975 12.3743 41.9061 12.3968 41.9131 12.4199C41.9253 12.4604 41.9356 12.5015 41.9453 12.543C41.9503 12.5644 41.9556 12.5857 41.96 12.6074C41.9853 12.7344 42 12.8655 42 13V36L41.9893 36.2041C41.8938 37.1457 41.1457 37.8938 40.2041 37.9893L40 38H8L7.7959 37.9893C6.85435 37.8938 6.1062 37.1457 6.01074 36.2041L6 36V13C6 11.9643 6.78722 11.113 7.7959 11.0107L8 11H40L40.2041 11.0107ZM9 35H39V22H29C27.8954 22 27 21.1046 27 20V14H9V35Z" 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="M40.2041 11.0107C40.2705 11.0175 40.3361 11.027 40.4004 11.04L40.4033 11.041L40.5713 11.083C40.5742 11.0839 40.5771 11.085 40.5801 11.0859C40.6128 11.0958 40.6448 11.1076 40.6768 11.1191C40.7037 11.1288 40.7305 11.1386 40.7568 11.1494C40.7863 11.1615 40.815 11.1751 40.8438 11.1885C40.8726 11.2019 40.9016 11.2147 40.9297 11.2295C40.9563 11.2435 40.9819 11.2592 41.0078 11.2744C41.0365 11.2912 41.065 11.308 41.0928 11.3262C41.1165 11.3417 41.1391 11.3585 41.1621 11.375C41.1898 11.3948 41.2175 11.4144 41.2441 11.4355C41.2651 11.4523 41.2854 11.4698 41.3057 11.4873C41.334 11.5117 41.3618 11.5365 41.3887 11.5625C41.4062 11.5795 41.4235 11.5967 41.4404 11.6143C41.466 11.6408 41.4905 11.6683 41.5146 11.6963C41.5315 11.7159 41.5483 11.7356 41.5645 11.7559C41.5872 11.7844 41.6087 11.8139 41.6299 11.8438C41.646 11.8665 41.6615 11.8896 41.6768 11.9131C41.694 11.9397 41.7105 11.9667 41.7266 11.9941C41.7415 12.0197 41.7567 12.045 41.7705 12.0713C41.7884 12.1054 41.8043 12.1405 41.8203 12.1758C41.8301 12.1973 41.8406 12.2184 41.8496 12.2402C41.8646 12.2766 41.8768 12.3141 41.8896 12.3516C41.8975 12.3743 41.9061 12.3968 41.9131 12.4199C41.9253 12.4604 41.9356 12.5015 41.9453 12.543C41.9503 12.5644 41.9556 12.5857 41.96 12.6074C41.9853 12.7344 42 12.8655 42 13V36L41.9893 36.2041C41.8938 37.1457 41.1457 37.8938 40.2041 37.9893L40 38H8L7.7959 37.9893C6.85435 37.8938 6.1062 37.1457 6.01074 36.2041L6 36V13C6 11.9643 6.78722 11.113 7.7959 11.0107L8 11H40L40.2041 11.0107ZM9 35H39V22H29C27.8954 22 27 21.1046 27 20V14H9V35Z" 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="M40.2041 11.0107C40.2705 11.0175 40.3361 11.027 40.4004 11.04L40.4033 11.041L40.5713 11.083C40.5742 11.0839 40.5771 11.085 40.5801 11.0859C40.6128 11.0958 40.6448 11.1076 40.6768 11.1191C40.7037 11.1288 40.7305 11.1386 40.7568 11.1494C40.7863 11.1615 40.815 11.1751 40.8438 11.1885C40.8726 11.2019 40.9016 11.2147 40.9297 11.2295C40.9563 11.2435 40.9819 11.2592 41.0078 11.2744C41.0365 11.2912 41.065 11.308 41.0928 11.3262C41.1165 11.3417 41.1391 11.3585 41.1621 11.375C41.1898 11.3948 41.2175 11.4144 41.2441 11.4355C41.2651 11.4523 41.2854 11.4698 41.3057 11.4873C41.334 11.5117 41.3618 11.5365 41.3887 11.5625C41.4062 11.5795 41.4235 11.5967 41.4404 11.6143C41.466 11.6408 41.4905 11.6683 41.5146 11.6963C41.5315 11.7159 41.5483 11.7356 41.5645 11.7559C41.5872 11.7844 41.6087 11.8139 41.6299 11.8438C41.646 11.8665 41.6615 11.8896 41.6768 11.9131C41.694 11.9397 41.7105 11.9667 41.7266 11.9941C41.7415 12.0197 41.7567 12.045 41.7705 12.0713C41.7884 12.1054 41.8043 12.1405 41.8203 12.1758C41.8301 12.1973 41.8406 12.2184 41.8496 12.2402C41.8646 12.2766 41.8768 12.3141 41.8896 12.3516C41.8975 12.3743 41.9061 12.3968 41.9131 12.4199C41.9253 12.4604 41.9356 12.5015 41.9453 12.543C41.9503 12.5644 41.9556 12.5857 41.96 12.6074C41.9853 12.7344 42 12.8655 42 13V36L41.9893 36.2041C41.8938 37.1457 41.1457 37.8938 40.2041 37.9893L40 38H8L7.7959 37.9893C6.85435 37.8938 6.1062 37.1457 6.01074 36.2041L6 36V13C6 11.9643 6.78722 11.113 7.7959 11.0107L8 11H40L40.2041 11.0107ZM10 34H38V22H29C27.8954 22 27 21.1046 27 20V15H10V34Z" 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="M40.2041 11.0107C40.2705 11.0175 40.3361 11.027 40.4004 11.04L40.4033 11.041L40.5713 11.083C40.5742 11.0839 40.5771 11.085 40.5801 11.0859C40.6128 11.0958 40.6448 11.1076 40.6768 11.1191C40.7037 11.1288 40.7305 11.1386 40.7568 11.1494C40.7863 11.1615 40.815 11.1751 40.8438 11.1885C40.8726 11.2019 40.9016 11.2147 40.9297 11.2295C40.9563 11.2435 40.9819 11.2592 41.0078 11.2744C41.0365 11.2912 41.065 11.308 41.0928 11.3262C41.1165 11.3417 41.1391 11.3585 41.1621 11.375C41.1898 11.3948 41.2175 11.4144 41.2441 11.4355C41.2651 11.4523 41.2854 11.4698 41.3057 11.4873C41.334 11.5117 41.3618 11.5365 41.3887 11.5625C41.4062 11.5795 41.4235 11.5967 41.4404 11.6143C41.466 11.6408 41.4905 11.6683 41.5146 11.6963C41.5315 11.7159 41.5483 11.7356 41.5645 11.7559C41.5872 11.7844 41.6087 11.8139 41.6299 11.8438C41.646 11.8665 41.6615 11.8896 41.6768 11.9131C41.694 11.9397 41.7105 11.9667 41.7266 11.9941C41.7415 12.0197 41.7567 12.045 41.7705 12.0713C41.7884 12.1054 41.8043 12.1405 41.8203 12.1758C41.8301 12.1973 41.8406 12.2184 41.8496 12.2402C41.8646 12.2766 41.8768 12.3141 41.8896 12.3516C41.8975 12.3743 41.9061 12.3968 41.9131 12.4199C41.9253 12.4604 41.9356 12.5015 41.9453 12.543C41.9503 12.5644 41.9556 12.5857 41.96 12.6074C41.9853 12.7344 42 12.8655 42 13V36L41.9893 36.2041C41.8938 37.1457 41.1457 37.8938 40.2041 37.9893L40 38H8L7.7959 37.9893C6.85435 37.8938 6.1062 37.1457 6.01074 36.2041L6 36V13C6 11.9643 6.78722 11.113 7.7959 11.0107L8 11H40L40.2041 11.0107ZM9 35H39V22H29C27.8954 22 27 21.1046 27 20V14H9V35Z" style={{ fill: `var(--${type})` }}/>
 </svg>
 ;

package/assets/new-tab/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface NewTabProps {
+interface NewTabProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,28 +12,28 @@ interface NewTabProps {
 }
 
 export const NewTab = forwardRef<SVGSVGElement, NewTabProps>(
-  ({ 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="M26 9.5H36.4C37.2837 9.5 38 10.2163 38 11.1V21.5H35V14.6214L22.0607 27.5608L19.9393 25.4395L32.8788 12.5H26V9.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M12.15 11H19.5V14H14V34H34V28H37V35.85C37 36.4851 36.4851 37 35.85 37H12.15C11.5149 37 11 36.4851 11 35.85V12.15C11 11.5149 11.5149 11 12.15 11Z" 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 9.5H36.4C37.2837 9.5 38 10.2163 38 11.1V21.5H35V14.6214L22.0607 27.5608L19.9393 25.4395L32.8788 12.5H26V9.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M12.15 11H19.5V14H14V34H34V28H37V35.85C37 36.4851 36.4851 37 35.85 37H12.15C11.5149 37 11 36.4851 11 35.85V12.15C11 11.5149 11.5149 11 12.15 11Z" 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="M26 9.5H36.4C37.2837 9.5 38 10.2163 38 11.1V21.5H35V14.6214L22.0607 27.5608L19.9393 25.4395L32.8788 12.5H26V9.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M12.15 11H19.5V14H14V34H34V28H37V35.85C37 36.4851 36.4851 37 35.85 37H12.15C11.5149 37 11 36.4851 11 35.85V12.15C11 11.5149 11.5149 11 12.15 11Z" 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="M26 9.5H36.4C37.2837 9.5 38 10.2163 38 11.1V21.5H35V14.6214L22.0607 27.5608L19.9393 25.4395L32.8788 12.5H26V9.5Z" style={{ fill: `var(--${type})` }}/>
 <path d="M12.15 11H19.5V14H14V34H34V28H37V35.85C37 36.4851 36.4851 37 35.85 37H12.15C11.5149 37 11 36.4851 11 35.85V12.15C11 11.5149 11.5149 11 12.15 11Z" style={{ fill: `var(--${type})` }}/>
 </svg>

package/assets/new-thread/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BasicColorType } from '@liner-fe/design-token-primitive';
+import { SVGProps } from 'react';
 
-interface NewThreadProps {
+interface NewThreadProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
   fill?: boolean;
   thick?: boolean;
   className?: string;
@@ -11,26 +12,26 @@ interface NewThreadProps {
 }
 
 export const NewThread = forwardRef<SVGSVGElement, NewThreadProps>(
-  ({ 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 9V35H34.667V41.6895L25.1074 35.335L24.6045 35H7V9H41ZM20 18.001H15V26.001H20V31.001H28V26.001H33.001V18.001H28V13H20V18.001Z" style={{ fill: `var(--${type})` }} stroke="#1E1E1F" stroke-width="4"/>
 </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 9V35H34.667V41.6895L25.1074 35.335L24.6045 35H7V9H41ZM20.5 18.501H15V25.501H20.5V31.001H27.5V25.501H33.001V18.501H27.5V13H20.5V18.501Z" style={{ fill: `var(--${type})` }} stroke="#1E1E1F" stroke-width="4"/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className}>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" ref={ref} className={className} {...props}>
 <path d="M21.9998 20.001V15H25.9998V20.001H31.0006V24.001H25.9998V29.0007H21.9998V24.001H17V20.001H21.9998Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M7 7C5.89543 7 5 7.89543 5 9V35C5 36.1046 5.89543 37 7 37H24L33.5594 43.3553C34.8887 44.239 36.6667 43.286 36.6667 41.6898V37H41C42.1046 37 43 36.1046 43 35V9C43 7.89543 42.1046 7 41 7H7ZM32.6667 33V37.9585L25.2083 33H9V11H39V33H32.6667Z" 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.4998 20.501V15H25.4998V20.501H31.0006V23.501H25.4998V29.0007H22.4998V23.501H17V20.501H22.4998Z" style={{ fill: `var(--${type})` }}/>
 <path fillRule="evenodd" clipRule="evenodd" d="M7 7C5.89543 7 5 7.89543 5 9V35C5 36.1046 5.89543 37 7 37H24L33.5594 43.3553C34.8887 44.239 36.6667 43.286 36.6667 41.6898V37H41C42.1046 37 43 36.1046 43 35V9C43 7.89543 42.1046 7 41 7H7ZM33.6667 34V39.8241L24.9062 34H8V10H40V34H33.6667Z" style={{ fill: `var(--${type})` }}/>
 </svg>