@liner-fe/icon 0.0.4 → 0.0.5

package/assets/sheet-export/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface SheetExportProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const SheetExport = ({ fill = false, thick = false, size = 24 }: SheetExportProps) => {
+export const SheetExport = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: SheetExportProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<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" fill="currentColor"/>
-<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" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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(--${color})` }}/>
+<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(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<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" fill="currentColor"/>
-<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" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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(--${color})` }}/>
+<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(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<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" fill="currentColor"/>
-<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" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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(--${color})` }}/>
+<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(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<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" fill="currentColor"/>
-<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" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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(--${color})` }}/>
+<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(--${color})` }}/>
 </svg>
 ;
 };

package/assets/shield/index.tsx

@@ -1,27 +1,28 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ShieldProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Shield = ({ fill = false, thick = false, size = 24 }: ShieldProps) => {
+export const Shield = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ShieldProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<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" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<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" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_699_13694)">
-<path d="M16.6763 20.6673L22.0738 26.0648L31.4986 16.6728L34.322 19.5062L24.2884 29.5049C23.062 30.727 21.0775 30.7253 19.8531 29.501L13.8479 23.4957L16.6763 20.6673Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M6 11.2059C6 10.3749 6.51387 9.6305 7.29089 9.33587L23.2909 3.26885C23.7478 3.09561 24.2522 3.09561 24.7091 3.26885L40.7091 9.33587C41.4861 9.6305 42 10.3749 42 11.2059V20.9791C42 29.6883 37.4676 37.7697 30.0363 42.3111L25.0429 45.3626C24.4027 45.7539 23.5973 45.7539 22.9571 45.3626L17.9637 42.3111C10.5324 37.7697 6 29.6883 6 20.9791V11.2059ZM24 7.27787L38 12.5865V20.9791C38 28.2948 34.1928 35.0832 27.9505 38.898L24 41.3122L20.0495 38.898C13.8072 35.0832 10 28.2948 10 20.9791L10 12.5865L24 7.27787Z" fill="currentColor"/>
+<path d="M16.6763 20.6673L22.0738 26.0648L31.4986 16.6728L34.322 19.5062L24.2884 29.5049C23.062 30.727 21.0775 30.7253 19.8531 29.501L13.8479 23.4957L16.6763 20.6673Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M6 11.2059C6 10.3749 6.51387 9.6305 7.29089 9.33587L23.2909 3.26885C23.7478 3.09561 24.2522 3.09561 24.7091 3.26885L40.7091 9.33587C41.4861 9.6305 42 10.3749 42 11.2059V20.9791C42 29.6883 37.4676 37.7697 30.0363 42.3111L25.0429 45.3626C24.4027 45.7539 23.5973 45.7539 22.9571 45.3626L17.9637 42.3111C10.5324 37.7697 6 29.6883 6 20.9791V11.2059ZM24 7.27787L38 12.5865V20.9791C38 28.2948 34.1928 35.0832 27.9505 38.898L24 41.3122L20.0495 38.898C13.8072 35.0832 10 28.2948 10 20.9791L10 12.5865L24 7.27787Z" style={{ fill: `var(--${color})` }}/>
 </g>
 <defs>
 <clipPath id="clip0_699_13694">
@@ -32,10 +33,10 @@ export const Shield = ({ fill = false, thick = false, size = 24 }: ShieldProps)
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_699_13692)">
-<path d="M16.3224 21.0213L22.0728 26.7717L31.8511 17.0275L33.9687 19.1525L23.9351 29.1512C22.904 30.1787 21.2356 30.1772 20.2063 29.1479L14.2011 23.1427L16.3224 21.0213Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M6 11.2059C6 10.3749 6.51387 9.6305 7.29089 9.33587L23.2909 3.26885C23.7478 3.09561 24.2522 3.09561 24.7091 3.26885L40.7091 9.33587C41.4861 9.6305 42 10.3749 42 11.2059V20.9791C42 29.6883 37.4676 37.7697 30.0363 42.3111L25.0429 45.3626C24.4027 45.7539 23.5973 45.7539 22.9571 45.3626L17.9637 42.3111C10.5324 37.7697 6 29.6883 6 20.9791V11.2059ZM24 6.20839L39 11.8962V20.9791C39 28.6432 35.0115 35.7549 28.4719 39.7513L24 42.4841L19.5281 39.7513C12.9885 35.7549 9 28.6432 9 20.9791L9 11.8962L24 6.20839Z" fill="currentColor"/>
+<path d="M16.3224 21.0213L22.0728 26.7717L31.8511 17.0275L33.9687 19.1525L23.9351 29.1512C22.904 30.1787 21.2356 30.1772 20.2063 29.1479L14.2011 23.1427L16.3224 21.0213Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M6 11.2059C6 10.3749 6.51387 9.6305 7.29089 9.33587L23.2909 3.26885C23.7478 3.09561 24.2522 3.09561 24.7091 3.26885L40.7091 9.33587C41.4861 9.6305 42 10.3749 42 11.2059V20.9791C42 29.6883 37.4676 37.7697 30.0363 42.3111L25.0429 45.3626C24.4027 45.7539 23.5973 45.7539 22.9571 45.3626L17.9637 42.3111C10.5324 37.7697 6 29.6883 6 20.9791V11.2059ZM24 6.20839L39 11.8962V20.9791C39 28.6432 35.0115 35.7549 28.4719 39.7513L24 42.4841L19.5281 39.7513C12.9885 35.7549 9 28.6432 9 20.9791L9 11.8962L24 6.20839Z" style={{ fill: `var(--${color})` }}/>
 </g>
 <defs>
 <clipPath id="clip0_699_13692">

package/assets/shield-person/index.tsx

@@ -1,39 +1,40 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ShieldPersonProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const ShieldPerson = ({ fill = false, thick = false, size = 24 }: ShieldPersonProps) => {
+export const ShieldPerson = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ShieldPersonProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<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" fill="currentColor"/>
-<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" fill="currentColor"/>
-<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" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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(--${color})` }}/>
+<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(--${color})` }}/>
+<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(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<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" fill="currentColor"/>
-<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" fill="currentColor"/>
-<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" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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(--${color})` }}/>
+<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(--${color})` }}/>
+<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(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<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" fill="currentColor"/>
-<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" fill="currentColor"/>
-<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" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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(--${color})` }}/>
+<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(--${color})` }}/>
+<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(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<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" fill="currentColor"/>
-<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" fill="currentColor"/>
-<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" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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(--${color})` }}/>
+<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(--${color})` }}/>
+<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(--${color})` }}/>
 </svg>
 ;
 };

package/assets/shield-usage/index.tsx

@@ -1,47 +1,48 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ShieldUsageProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const ShieldUsage = ({ fill = false, thick = false, size = 24 }: ShieldUsageProps) => {
+export const ShieldUsage = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ShieldUsageProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<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" fill="currentColor"/>
-<path d="M14.5 33.5H24.1733C24.3586 32.4433 24.6882 31.4363 25.1409 30.5H14.5V33.5Z" fill="currentColor"/>
-<path d="M29.8171 25.5H14.5V22.5H33.5V24.1733C32.1814 24.4045 30.9401 24.8604 29.8171 25.5Z" fill="currentColor"/>
-<path d="M33.5 14.5H14.5V17.5H33.5V14.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M27.895 30.3293C27.895 29.9922 28.1035 29.6902 28.4187 29.5706L34.9097 27.1094C35.095 27.0391 35.2997 27.0391 35.485 27.1094L41.976 29.5706C42.2912 29.6902 42.4997 29.9922 42.4997 30.3293V34.2941C42.4997 37.8273 40.661 41.1058 37.6462 42.9482L35.6204 44.1862C35.3607 44.3449 35.034 44.3449 34.7743 44.1862L32.7485 42.9482C29.7337 41.1058 27.895 37.8273 27.895 34.2941V30.3293ZM34.5805 36.1488L32.1952 33.7635L30.781 35.1777L33.6793 38.076C34.1759 38.5726 34.9808 38.5733 35.4783 38.0776L40.2056 33.3668L38.7938 31.9501L34.5805 36.1488Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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(--${color})` }}/>
+<path d="M14.5 33.5H24.1733C24.3586 32.4433 24.6882 31.4363 25.1409 30.5H14.5V33.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M29.8171 25.5H14.5V22.5H33.5V24.1733C32.1814 24.4045 30.9401 24.8604 29.8171 25.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M33.5 14.5H14.5V17.5H33.5V14.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M27.895 30.3293C27.895 29.9922 28.1035 29.6902 28.4187 29.5706L34.9097 27.1094C35.095 27.0391 35.2997 27.0391 35.485 27.1094L41.976 29.5706C42.2912 29.6902 42.4997 29.9922 42.4997 30.3293V34.2941C42.4997 37.8273 40.661 41.1058 37.6462 42.9482L35.6204 44.1862C35.3607 44.3449 35.034 44.3449 34.7743 44.1862L32.7485 42.9482C29.7337 41.1058 27.895 37.8273 27.895 34.2941V30.3293ZM34.5805 36.1488L32.1952 33.7635L30.781 35.1777L33.6793 38.076C34.1759 38.5726 34.9808 38.5733 35.4783 38.0776L40.2056 33.3668L38.7938 31.9501L34.5805 36.1488Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<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" fill="currentColor"/>
-<path d="M14.5 33.5H24.1733C24.3586 32.4433 24.6882 31.4363 25.1409 30.5H14.5V33.5Z" fill="currentColor"/>
-<path d="M29.8171 25.5H14.5V22.5H33.5V24.1733C32.1814 24.4045 30.9401 24.8604 29.8171 25.5Z" fill="currentColor"/>
-<path d="M33.5 14.5H14.5V17.5H33.5V14.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M27.895 30.3293C27.895 29.9922 28.1035 29.6902 28.4187 29.5706L34.9097 27.1094C35.095 27.0391 35.2997 27.0391 35.485 27.1094L41.976 29.5706C42.2912 29.6902 42.4997 29.9922 42.4997 30.3293V34.2941C42.4997 37.8273 40.661 41.1058 37.6462 42.9482L35.6204 44.1862C35.3607 44.3449 35.034 44.3449 34.7743 44.1862L32.7485 42.9482C29.7337 41.1058 27.895 37.8273 27.895 34.2941V30.3293ZM34.5805 36.1488L32.1952 33.7635L30.781 35.1777L33.6793 38.076C34.1759 38.5726 34.9808 38.5733 35.4783 38.0776L40.2056 33.3668L38.7938 31.9501L34.5805 36.1488Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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(--${color})` }}/>
+<path d="M14.5 33.5H24.1733C24.3586 32.4433 24.6882 31.4363 25.1409 30.5H14.5V33.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M29.8171 25.5H14.5V22.5H33.5V24.1733C32.1814 24.4045 30.9401 24.8604 29.8171 25.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M33.5 14.5H14.5V17.5H33.5V14.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M27.895 30.3293C27.895 29.9922 28.1035 29.6902 28.4187 29.5706L34.9097 27.1094C35.095 27.0391 35.2997 27.0391 35.485 27.1094L41.976 29.5706C42.2912 29.6902 42.4997 29.9922 42.4997 30.3293V34.2941C42.4997 37.8273 40.661 41.1058 37.6462 42.9482L35.6204 44.1862C35.3607 44.3449 35.034 44.3449 34.7743 44.1862L32.7485 42.9482C29.7337 41.1058 27.895 37.8273 27.895 34.2941V30.3293ZM34.5805 36.1488L32.1952 33.7635L30.781 35.1777L33.6793 38.076C34.1759 38.5726 34.9808 38.5733 35.4783 38.0776L40.2056 33.3668L38.7938 31.9501L34.5805 36.1488Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<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" fill="currentColor"/>
-<path d="M14 34H24.0969C24.2836 32.567 24.7341 31.2169 25.398 30H14V34Z" fill="currentColor"/>
-<path d="M29.0173 26H14V22H34V24.0969C32.1687 24.3355 30.4728 25.0048 29.0173 26Z" fill="currentColor"/>
-<path d="M34 14H14V18H34V14Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M27.895 30.3293C27.895 29.9922 28.1035 29.6902 28.4187 29.5706L34.9097 27.1094C35.095 27.0391 35.2997 27.0391 35.485 27.1094L41.976 29.5706C42.2912 29.6902 42.4997 29.9922 42.4997 30.3293V34.2941C42.4997 37.8273 40.661 41.1058 37.6462 42.9482L35.6204 44.1862C35.3607 44.3449 35.034 44.3449 34.7743 44.1862L32.7485 42.9482C29.7337 41.1058 27.895 37.8273 27.895 34.2941V30.3293ZM34.5805 36.1488L32.1952 33.7635L30.781 35.1777L33.6793 38.076C34.1759 38.5726 34.9808 38.5733 35.4783 38.0776L40.2056 33.3668L38.7938 31.9501L34.5805 36.1488Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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(--${color})` }}/>
+<path d="M14 34H24.0969C24.2836 32.567 24.7341 31.2169 25.398 30H14V34Z" style={{ fill: `var(--${color})` }}/>
+<path d="M29.0173 26H14V22H34V24.0969C32.1687 24.3355 30.4728 25.0048 29.0173 26Z" style={{ fill: `var(--${color})` }}/>
+<path d="M34 14H14V18H34V14Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M27.895 30.3293C27.895 29.9922 28.1035 29.6902 28.4187 29.5706L34.9097 27.1094C35.095 27.0391 35.2997 27.0391 35.485 27.1094L41.976 29.5706C42.2912 29.6902 42.4997 29.9922 42.4997 30.3293V34.2941C42.4997 37.8273 40.661 41.1058 37.6462 42.9482L35.6204 44.1862C35.3607 44.3449 35.034 44.3449 34.7743 44.1862L32.7485 42.9482C29.7337 41.1058 27.895 37.8273 27.895 34.2941V30.3293ZM34.5805 36.1488L32.1952 33.7635L30.781 35.1777L33.6793 38.076C34.1759 38.5726 34.9808 38.5733 35.4783 38.0776L40.2056 33.3668L38.7938 31.9501L34.5805 36.1488Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<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" fill="currentColor"/>
-<path d="M14.5 33.5H24.1733C24.3586 32.4433 24.6882 31.4363 25.1409 30.5H14.5V33.5Z" fill="currentColor"/>
-<path d="M29.8171 25.5H14.5V22.5H33.5V24.1733C32.1814 24.4045 30.9401 24.8604 29.8171 25.5Z" fill="currentColor"/>
-<path d="M33.5 14.5H14.5V17.5H33.5V14.5Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M27.895 30.3293C27.895 29.9922 28.1035 29.6902 28.4187 29.5706L34.9097 27.1094C35.095 27.0391 35.2997 27.0391 35.485 27.1094L41.976 29.5706C42.2912 29.6902 42.4997 29.9922 42.4997 30.3293V34.2941C42.4997 37.8273 40.661 41.1058 37.6462 42.9482L35.6204 44.1862C35.3607 44.3449 35.034 44.3449 34.7743 44.1862L32.7485 42.9482C29.7337 41.1058 27.895 37.8273 27.895 34.2941V30.3293ZM34.5805 36.1488L32.1952 33.7635L30.781 35.1777L33.6793 38.076C34.1759 38.5726 34.9808 38.5733 35.4783 38.0776L40.2056 33.3668L38.7938 31.9501L34.5805 36.1488Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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(--${color})` }}/>
+<path d="M14.5 33.5H24.1733C24.3586 32.4433 24.6882 31.4363 25.1409 30.5H14.5V33.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M29.8171 25.5H14.5V22.5H33.5V24.1733C32.1814 24.4045 30.9401 24.8604 29.8171 25.5Z" style={{ fill: `var(--${color})` }}/>
+<path d="M33.5 14.5H14.5V17.5H33.5V14.5Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M27.895 30.3293C27.895 29.9922 28.1035 29.6902 28.4187 29.5706L34.9097 27.1094C35.095 27.0391 35.2997 27.0391 35.485 27.1094L41.976 29.5706C42.2912 29.6902 42.4997 29.9922 42.4997 30.3293V34.2941C42.4997 37.8273 40.661 41.1058 37.6462 42.9482L35.6204 44.1862C35.3607 44.3449 35.034 44.3449 34.7743 44.1862L32.7485 42.9482C29.7337 41.1058 27.895 37.8273 27.895 34.2941V30.3293ZM34.5805 36.1488L32.1952 33.7635L30.781 35.1777L33.6793 38.076C34.1759 38.5726 34.9808 38.5733 35.4783 38.0776L40.2056 33.3668L38.7938 31.9501L34.5805 36.1488Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/shorten/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ShortenProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Shorten = ({ fill = false, thick = false, size = 24 }: ShortenProps) => {
+export const Shorten = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ShortenProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M30.6212 22.4991L38.0615 15.0588L35.9402 12.9375L26.981 21.8967C25.82 23.0577 25.82 24.9402 26.981 26.1013L35.9402 35.0604L38.0615 32.9391L30.6215 25.4991H46.0673V22.4991H30.6212Z" fill="currentColor"/>
-<path d="M2.00003 22.4991L17.3802 22.4991L9.94019 15.0592L12.0615 12.9378L21.0207 21.897C22.1817 23.0581 22.1817 24.9405 21.0207 26.1016L12.0615 35.0608L9.94019 32.9395L17.3805 25.4991L2.00003 25.4991V22.4991Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.6212 22.4991L38.0615 15.0588L35.9402 12.9375L26.981 21.8967C25.82 23.0577 25.82 24.9402 26.981 26.1013L35.9402 35.0604L38.0615 32.9391L30.6215 25.4991H46.0673V22.4991H30.6212Z" style={{ fill: `var(--${color})` }}/>
+<path d="M2.00003 22.4991L17.3802 22.4991L9.94019 15.0592L12.0615 12.9378L21.0207 21.897C22.1817 23.0581 22.1817 24.9405 21.0207 26.1016L12.0615 35.0608L9.94019 32.9395L17.3805 25.4991L2.00003 25.4991V22.4991Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M30.6212 22.4991L38.0615 15.0588L35.9402 12.9375L26.981 21.8967C25.82 23.0577 25.82 24.9402 26.981 26.1013L35.9402 35.0604L38.0615 32.9391L30.6215 25.4991H46.0673V22.4991H30.6212Z" fill="currentColor"/>
-<path d="M2.00003 22.4991L17.3802 22.4991L9.94019 15.0592L12.0615 12.9378L21.0207 21.897C22.1817 23.0581 22.1817 24.9405 21.0207 26.1016L12.0615 35.0608L9.94019 32.9395L17.3805 25.4991L2.00003 25.4991V22.4991Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.6212 22.4991L38.0615 15.0588L35.9402 12.9375L26.981 21.8967C25.82 23.0577 25.82 24.9402 26.981 26.1013L35.9402 35.0604L38.0615 32.9391L30.6215 25.4991H46.0673V22.4991H30.6212Z" style={{ fill: `var(--${color})` }}/>
+<path d="M2.00003 22.4991L17.3802 22.4991L9.94019 15.0592L12.0615 12.9378L21.0207 21.897C22.1817 23.0581 22.1817 24.9405 21.0207 26.1016L12.0615 35.0608L9.94019 32.9395L17.3805 25.4991L2.00003 25.4991V22.4991Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M31.8283 21.9992L38.4151 15.4124L35.5866 12.584L26.6275 21.5431C25.2711 22.8995 25.2711 25.0985 26.6275 26.4549L35.5866 35.414L38.4151 32.5856L31.8286 25.9992H46.0673V21.9992H31.8283Z" fill="currentColor"/>
-<path d="M2.00003 21.9992L16.1731 21.9992L9.58664 15.4128L12.4151 12.5843L21.3742 21.5435C22.7306 22.8998 22.7306 25.0989 21.3742 26.4552L12.4151 35.4144L9.58664 32.5859L16.1734 25.9992L2.00003 25.9992V21.9992Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.8283 21.9992L38.4151 15.4124L35.5866 12.584L26.6275 21.5431C25.2711 22.8995 25.2711 25.0985 26.6275 26.4549L35.5866 35.414L38.4151 32.5856L31.8286 25.9992H46.0673V21.9992H31.8283Z" style={{ fill: `var(--${color})` }}/>
+<path d="M2.00003 21.9992L16.1731 21.9992L9.58664 15.4128L12.4151 12.5843L21.3742 21.5435C22.7306 22.8998 22.7306 25.0989 21.3742 26.4552L12.4151 35.4144L9.58664 32.5859L16.1734 25.9992L2.00003 25.9992V21.9992Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M30.6212 22.4991L38.0615 15.0588L35.9402 12.9375L26.981 21.8967C25.82 23.0577 25.82 24.9402 26.981 26.1013L35.9402 35.0604L38.0615 32.9391L30.6215 25.4991H46.0673V22.4991H30.6212Z" fill="currentColor"/>
-<path d="M2.00003 22.4991L17.3802 22.4991L9.94019 15.0592L12.0615 12.9378L21.0207 21.897C22.1817 23.0581 22.1817 24.9405 21.0207 26.1016L12.0615 35.0608L9.94019 32.9395L17.3805 25.4991L2.00003 25.4991V22.4991Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.6212 22.4991L38.0615 15.0588L35.9402 12.9375L26.981 21.8967C25.82 23.0577 25.82 24.9402 26.981 26.1013L35.9402 35.0604L38.0615 32.9391L30.6215 25.4991H46.0673V22.4991H30.6212Z" style={{ fill: `var(--${color})` }}/>
+<path d="M2.00003 22.4991L17.3802 22.4991L9.94019 15.0592L12.0615 12.9378L21.0207 21.897C22.1817 23.0581 22.1817 24.9405 21.0207 26.1016L12.0615 35.0608L9.94019 32.9395L17.3805 25.4991L2.00003 25.4991V22.4991Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/show-all/index.tsx

@@ -1,43 +1,44 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface ShowAllProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const ShowAll = ({ fill = false, thick = false, size = 24 }: ShowAllProps) => {
+export const ShowAll = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: ShowAllProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 6H17V9L9 9L9 17H6V8C6 6.89543 6.89543 6 8 6Z" fill="currentColor"/>
-<path d="M6 31V40C6 41.1046 6.89543 42 8 42H17V39H9L9 31H6Z" fill="currentColor"/>
-<path d="M39 31V39H31V42H40C41.1046 42 42 41.1046 42 40V31H39Z" fill="currentColor"/>
-<path d="M42 17V8C42 6.89543 41.1046 6 40 6H31V9L39 9V17H42Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 6H17V9L9 9L9 17H6V8C6 6.89543 6.89543 6 8 6Z" style={{ fill: `var(--${color})` }}/>
+<path d="M6 31V40C6 41.1046 6.89543 42 8 42H17V39H9L9 31H6Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39 31V39H31V42H40C41.1046 42 42 41.1046 42 40V31H39Z" style={{ fill: `var(--${color})` }}/>
+<path d="M42 17V8C42 6.89543 41.1046 6 40 6H31V9L39 9V17H42Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 6H17V9L9 9L9 17H6V8C6 6.89543 6.89543 6 8 6Z" fill="currentColor"/>
-<path d="M6 31V40C6 41.1046 6.89543 42 8 42H17V39H9L9 31H6Z" fill="currentColor"/>
-<path d="M39 31V39H31V42H40C41.1046 42 42 41.1046 42 40V31H39Z" fill="currentColor"/>
-<path d="M42 17V8C42 6.89543 41.1046 6 40 6H31V9L39 9V17H42Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 6H17V9L9 9L9 17H6V8C6 6.89543 6.89543 6 8 6Z" style={{ fill: `var(--${color})` }}/>
+<path d="M6 31V40C6 41.1046 6.89543 42 8 42H17V39H9L9 31H6Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39 31V39H31V42H40C41.1046 42 42 41.1046 42 40V31H39Z" style={{ fill: `var(--${color})` }}/>
+<path d="M42 17V8C42 6.89543 41.1046 6 40 6H31V9L39 9V17H42Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 6H17V10L10 10L10 17H6V8C6 6.89543 6.89543 6 8 6Z" fill="currentColor"/>
-<path d="M6 31V40C6 41.1046 6.89543 42 8 42H17V38H10L10 31H6Z" fill="currentColor"/>
-<path d="M38 31V38H31V42H40C41.1046 42 42 41.1046 42 40V31H38Z" fill="currentColor"/>
-<path d="M42 17V8C42 6.89543 41.1046 6 40 6H31V10L38 10V17H42Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 6H17V10L10 10L10 17H6V8C6 6.89543 6.89543 6 8 6Z" style={{ fill: `var(--${color})` }}/>
+<path d="M6 31V40C6 41.1046 6.89543 42 8 42H17V38H10L10 31H6Z" style={{ fill: `var(--${color})` }}/>
+<path d="M38 31V38H31V42H40C41.1046 42 42 41.1046 42 40V31H38Z" style={{ fill: `var(--${color})` }}/>
+<path d="M42 17V8C42 6.89543 41.1046 6 40 6H31V10L38 10V17H42Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 6H17V9L9 9L9 17H6V8C6 6.89543 6.89543 6 8 6Z" fill="currentColor"/>
-<path d="M6 31V40C6 41.1046 6.89543 42 8 42H17V39H9L9 31H6Z" fill="currentColor"/>
-<path d="M39 31V39H31V42H40C41.1046 42 42 41.1046 42 40V31H39Z" fill="currentColor"/>
-<path d="M42 17V8C42 6.89543 41.1046 6 40 6H31V9L39 9V17H42Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 6H17V9L9 9L9 17H6V8C6 6.89543 6.89543 6 8 6Z" style={{ fill: `var(--${color})` }}/>
+<path d="M6 31V40C6 41.1046 6.89543 42 8 42H17V39H9L9 31H6Z" style={{ fill: `var(--${color})` }}/>
+<path d="M39 31V39H31V42H40C41.1046 42 42 41.1046 42 40V31H39Z" style={{ fill: `var(--${color})` }}/>
+<path d="M42 17V8C42 6.89543 41.1046 6 40 6H31V9L39 9V17H42Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/sign-out/index.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface SignOutProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const SignOut = ({ fill = false, thick = false, size = 24 }: SignOutProps) => {
+export const SignOut = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: SignOutProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M38.294 25.4131L29.167 34.5401L31.2883 36.6614L41.5608 26.3889C42.9276 25.0221 42.9276 22.806 41.5608 21.4392L31.2883 11.1667L29.167 13.288L38.292 22.4131L14.9142 22.4131V25.4131L38.294 25.4131Z" fill="currentColor"/>
-<path d="M8.91409 39.4141H23.9141V42.4141H8.91409C6.98109 42.4141 5.41409 40.8471 5.41409 38.9141L5.41409 8.91406C5.41409 6.98107 6.9811 5.41406 8.91409 5.41406L23.914 5.41406V8.41406L8.91409 8.41406C8.63795 8.41406 8.41409 8.63792 8.41409 8.91406L8.41409 38.9141C8.41409 39.1902 8.63795 39.4141 8.91409 39.4141Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.294 25.4131L29.167 34.5401L31.2883 36.6614L41.5608 26.3889C42.9276 25.0221 42.9276 22.806 41.5608 21.4392L31.2883 11.1667L29.167 13.288L38.292 22.4131L14.9142 22.4131V25.4131L38.294 25.4131Z" style={{ fill: `var(--${color})` }}/>
+<path d="M8.91409 39.4141H23.9141V42.4141H8.91409C6.98109 42.4141 5.41409 40.8471 5.41409 38.9141L5.41409 8.91406C5.41409 6.98107 6.9811 5.41406 8.91409 5.41406L23.914 5.41406V8.41406L8.91409 8.41406C8.63795 8.41406 8.41409 8.63792 8.41409 8.91406L8.41409 38.9141C8.41409 39.1902 8.63795 39.4141 8.91409 39.4141Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M38.294 25.4131L29.167 34.5401L31.2883 36.6614L41.5608 26.3889C42.9276 25.0221 42.9276 22.806 41.5608 21.4392L31.2883 11.1667L29.167 13.288L38.292 22.4131L14.9142 22.4131V25.4131L38.294 25.4131Z" fill="currentColor"/>
-<path d="M8.91409 39.4141H23.9141V42.4141H8.91409C6.98109 42.4141 5.41409 40.8471 5.41409 38.9141L5.41409 8.91406C5.41409 6.98107 6.9811 5.41406 8.91409 5.41406L23.914 5.41406V8.41406L8.91409 8.41406C8.63795 8.41406 8.41409 8.63792 8.41409 8.91406L8.41409 38.9141C8.41409 39.1902 8.63795 39.4141 8.91409 39.4141Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.294 25.4131L29.167 34.5401L31.2883 36.6614L41.5608 26.3889C42.9276 25.0221 42.9276 22.806 41.5608 21.4392L31.2883 11.1667L29.167 13.288L38.292 22.4131L14.9142 22.4131V25.4131L38.294 25.4131Z" style={{ fill: `var(--${color})` }}/>
+<path d="M8.91409 39.4141H23.9141V42.4141H8.91409C6.98109 42.4141 5.41409 40.8471 5.41409 38.9141L5.41409 8.91406C5.41409 6.98107 6.9811 5.41406 8.91409 5.41406L23.914 5.41406V8.41406L8.91409 8.41406C8.63795 8.41406 8.41409 8.63792 8.41409 8.91406L8.41409 38.9141C8.41409 39.1902 8.63795 39.4141 8.91409 39.4141Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<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.9142 21.9131V25.9131L37.0869 25.9131Z" fill="currentColor"/>
-<path d="M8.91409 38.9141H23.9141V42.9141H8.91409C6.70495 42.9141 4.91409 41.1232 4.91409 38.9141L4.91409 8.91406C4.91409 6.70492 6.70495 4.91406 8.91409 4.91406L23.914 4.91406V8.91406L8.91409 8.91406L8.91409 38.9141Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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.9142 21.9131V25.9131L37.0869 25.9131Z" style={{ fill: `var(--${color})` }}/>
+<path d="M8.91409 38.9141H23.9141V42.9141H8.91409C6.70495 42.9141 4.91409 41.1232 4.91409 38.9141L4.91409 8.91406C4.91409 6.70492 6.70495 4.91406 8.91409 4.91406L23.914 4.91406V8.91406L8.91409 8.91406L8.91409 38.9141Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M38.294 25.4131L29.167 34.5401L31.2883 36.6614L41.5608 26.3889C42.9276 25.0221 42.9276 22.806 41.5608 21.4392L31.2883 11.1667L29.167 13.288L38.292 22.4131L14.9142 22.4131V25.4131L38.294 25.4131Z" fill="currentColor"/>
-<path d="M8.91409 39.4141H23.9141V42.4141H8.91409C6.98109 42.4141 5.41409 40.8471 5.41409 38.9141L5.41409 8.91406C5.41409 6.98107 6.9811 5.41406 8.91409 5.41406L23.914 5.41406V8.41406L8.91409 8.41406C8.63795 8.41406 8.41409 8.63792 8.41409 8.91406L8.41409 38.9141C8.41409 39.1902 8.63795 39.4141 8.91409 39.4141Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.294 25.4131L29.167 34.5401L31.2883 36.6614L41.5608 26.3889C42.9276 25.0221 42.9276 22.806 41.5608 21.4392L31.2883 11.1667L29.167 13.288L38.292 22.4131L14.9142 22.4131V25.4131L38.294 25.4131Z" style={{ fill: `var(--${color})` }}/>
+<path d="M8.91409 39.4141H23.9141V42.4141H8.91409C6.98109 42.4141 5.41409 40.8471 5.41409 38.9141L5.41409 8.91406C5.41409 6.98107 6.9811 5.41406 8.91409 5.41406L23.914 5.41406V8.41406L8.91409 8.41406C8.63795 8.41406 8.41409 8.63792 8.41409 8.91406L8.41409 38.9141C8.41409 39.1902 8.63795 39.4141 8.91409 39.4141Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };

package/assets/source/index.tsx

@@ -1,43 +1,44 @@
-import React from 'react';
+import React from 'react';import { BasicColorType } from '@liner-fe/prism';
 
 interface SourceProps {
   fill?: boolean;
   thick?: boolean;
   size?: number
+  color?: BasicColorType;
 }
 
-export const Source = ({ fill = false, thick = false, size = 24 }: SourceProps) => {
+export const Source = ({ fill = false, thick = false, size = 24, color = 'neutral-label-primary' }: SourceProps) => {
   if (fill && thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M16.34 11.0021C15.8403 11.5017 15.8413 12.3108 16.3378 12.8073L23.0157 19.4852C23.5166 19.9861 24.33 19.9827 24.8252 19.4874L31.5032 12.8095C32.0028 12.3098 31.9975 11.4964 31.501 10.9999L24.8231 4.32199C24.3266 3.82552 23.5132 3.82889 23.0179 4.32417L16.34 11.0021ZM23.9216 16.1484L19.6789 11.9058L23.9216 7.66314L28.1642 11.9058L23.9216 16.1484Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M28.4985 24.8043C28.0021 24.3079 28.0011 23.4988 28.5007 22.9992L35.1787 16.3212C35.674 15.826 36.4874 15.8226 36.9838 16.3191L43.6618 22.997C44.1582 23.4935 44.1636 24.3069 43.664 24.8065L36.986 31.4845C36.4907 31.9797 35.6773 31.9831 35.1765 31.4823L28.4985 24.8043ZM31.8397 23.9029L36.0823 28.1455L40.325 23.9029L36.0823 19.6602L31.8397 23.9029Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M4.32324 23.0168C3.82361 23.5164 3.82458 24.3254 4.32105 24.8219L10.999 31.4999C11.4998 32.0007 12.3132 31.9973 12.8085 31.502L19.4865 24.8241C19.9861 24.3245 19.9808 23.5111 19.4843 23.0146L12.8063 16.3366C12.3099 15.8402 11.4965 15.8435 11.0012 16.3388L4.32324 23.0168ZM11.9048 28.1631L7.66221 23.9204L11.9048 19.6778L16.1475 23.9204L11.9048 28.1631Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M16.3368 35.1925C15.8372 35.6922 15.8381 36.5012 16.3346 36.9977L23.0126 43.6757C23.5134 44.1765 24.3268 44.1731 24.8221 43.6778L31.5 36.9999C31.9996 36.5003 31.9943 35.6868 31.4978 35.1904L24.8199 28.5124C24.3234 28.0159 23.51 28.0193 23.0147 28.5146L16.3368 35.1925ZM23.9184 40.3389L19.6758 36.0962L23.9184 31.8536L28.161 36.0962L23.9184 40.3389Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M16.34 11.0021C15.8403 11.5017 15.8413 12.3108 16.3378 12.8073L23.0157 19.4852C23.5166 19.9861 24.33 19.9827 24.8252 19.4874L31.5032 12.8095C32.0028 12.3098 31.9975 11.4964 31.501 10.9999L24.8231 4.32199C24.3266 3.82552 23.5132 3.82889 23.0179 4.32417L16.34 11.0021ZM23.9216 16.1484L19.6789 11.9058L23.9216 7.66314L28.1642 11.9058L23.9216 16.1484Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M28.4985 24.8043C28.0021 24.3079 28.0011 23.4988 28.5007 22.9992L35.1787 16.3212C35.674 15.826 36.4874 15.8226 36.9838 16.3191L43.6618 22.997C44.1582 23.4935 44.1636 24.3069 43.664 24.8065L36.986 31.4845C36.4907 31.9797 35.6773 31.9831 35.1765 31.4823L28.4985 24.8043ZM31.8397 23.9029L36.0823 28.1455L40.325 23.9029L36.0823 19.6602L31.8397 23.9029Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M4.32324 23.0168C3.82361 23.5164 3.82458 24.3254 4.32105 24.8219L10.999 31.4999C11.4998 32.0007 12.3132 31.9973 12.8085 31.502L19.4865 24.8241C19.9861 24.3245 19.9808 23.5111 19.4843 23.0146L12.8063 16.3366C12.3099 15.8402 11.4965 15.8435 11.0012 16.3388L4.32324 23.0168ZM11.9048 28.1631L7.66221 23.9204L11.9048 19.6778L16.1475 23.9204L11.9048 28.1631Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M16.3368 35.1925C15.8372 35.6922 15.8381 36.5012 16.3346 36.9977L23.0126 43.6757C23.5134 44.1765 24.3268 44.1731 24.8221 43.6778L31.5 36.9999C31.9996 36.5003 31.9943 35.6868 31.4978 35.1904L24.8199 28.5124C24.3234 28.0159 23.51 28.0193 23.0147 28.5146L16.3368 35.1925ZM23.9184 40.3389L19.6758 36.0962L23.9184 31.8536L28.161 36.0962L23.9184 40.3389Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (fill) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M16.34 11.0021C15.8403 11.5017 15.8413 12.3108 16.3378 12.8073L23.0157 19.4852C23.5166 19.9861 24.33 19.9827 24.8252 19.4874L31.5032 12.8095C32.0028 12.3098 31.9975 11.4964 31.501 10.9999L24.8231 4.32199C24.3266 3.82552 23.5132 3.82889 23.0179 4.32417L16.34 11.0021ZM23.9216 16.1484L19.6789 11.9058L23.9216 7.66314L28.1642 11.9058L23.9216 16.1484Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M28.4985 24.8043C28.0021 24.3079 28.0011 23.4988 28.5007 22.9992L35.1787 16.3212C35.674 15.826 36.4874 15.8226 36.9838 16.3191L43.6618 22.997C44.1582 23.4935 44.1636 24.3069 43.664 24.8065L36.986 31.4845C36.4907 31.9797 35.6773 31.9831 35.1765 31.4823L28.4985 24.8043ZM31.8397 23.9029L36.0823 28.1455L40.325 23.9029L36.0823 19.6602L31.8397 23.9029Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M4.32324 23.0168C3.82361 23.5164 3.82458 24.3254 4.32105 24.8219L10.999 31.4999C11.4998 32.0007 12.3132 31.9973 12.8085 31.502L19.4865 24.8241C19.9861 24.3245 19.9808 23.5111 19.4843 23.0146L12.8063 16.3366C12.3099 15.8402 11.4965 15.8435 11.0012 16.3388L4.32324 23.0168ZM11.9048 28.1631L7.66221 23.9204L11.9048 19.6778L16.1475 23.9204L11.9048 28.1631Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M16.3368 35.1925C15.8372 35.6922 15.8381 36.5012 16.3346 36.9977L23.0126 43.6757C23.5134 44.1765 24.3268 44.1731 24.8221 43.6778L31.5 36.9999C31.9996 36.5003 31.9943 35.6868 31.4978 35.1904L24.8199 28.5124C24.3234 28.0159 23.51 28.0193 23.0147 28.5146L16.3368 35.1925ZM23.9184 40.3389L19.6758 36.0962L23.9184 31.8536L28.161 36.0962L23.9184 40.3389Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M16.34 11.0021C15.8403 11.5017 15.8413 12.3108 16.3378 12.8073L23.0157 19.4852C23.5166 19.9861 24.33 19.9827 24.8252 19.4874L31.5032 12.8095C32.0028 12.3098 31.9975 11.4964 31.501 10.9999L24.8231 4.32199C24.3266 3.82552 23.5132 3.82889 23.0179 4.32417L16.34 11.0021ZM23.9216 16.1484L19.6789 11.9058L23.9216 7.66314L28.1642 11.9058L23.9216 16.1484Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M28.4985 24.8043C28.0021 24.3079 28.0011 23.4988 28.5007 22.9992L35.1787 16.3212C35.674 15.826 36.4874 15.8226 36.9838 16.3191L43.6618 22.997C44.1582 23.4935 44.1636 24.3069 43.664 24.8065L36.986 31.4845C36.4907 31.9797 35.6773 31.9831 35.1765 31.4823L28.4985 24.8043ZM31.8397 23.9029L36.0823 28.1455L40.325 23.9029L36.0823 19.6602L31.8397 23.9029Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M4.32324 23.0168C3.82361 23.5164 3.82458 24.3254 4.32105 24.8219L10.999 31.4999C11.4998 32.0007 12.3132 31.9973 12.8085 31.502L19.4865 24.8241C19.9861 24.3245 19.9808 23.5111 19.4843 23.0146L12.8063 16.3366C12.3099 15.8402 11.4965 15.8435 11.0012 16.3388L4.32324 23.0168ZM11.9048 28.1631L7.66221 23.9204L11.9048 19.6778L16.1475 23.9204L11.9048 28.1631Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M16.3368 35.1925C15.8372 35.6922 15.8381 36.5012 16.3346 36.9977L23.0126 43.6757C23.5134 44.1765 24.3268 44.1731 24.8221 43.6778L31.5 36.9999C31.9996 36.5003 31.9943 35.6868 31.4978 35.1904L24.8199 28.5124C24.3234 28.0159 23.51 28.0193 23.0147 28.5146L16.3368 35.1925ZM23.9184 40.3389L19.6758 36.0962L23.9184 31.8536L28.161 36.0962L23.9184 40.3389Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } else if (thick) {
-    return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M16.34 11.0021C15.8403 11.5017 15.8413 12.3108 16.3378 12.8073L23.0157 19.4852C23.5166 19.9861 24.33 19.9827 24.8252 19.4874L31.5032 12.8095C32.0028 12.3098 31.9975 11.4964 31.501 10.9999L24.8231 4.32199C24.3266 3.82552 23.5132 3.82889 23.0179 4.32417L16.34 11.0021ZM23.9216 14.7342L21.0931 11.9058L23.9216 9.07736L26.75 11.9058L23.9216 14.7342Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M28.4985 24.8043C28.0021 24.3079 28.0011 23.4988 28.5007 22.9992L35.1787 16.3212C35.674 15.826 36.4874 15.8226 36.9838 16.3191L43.6618 22.997C44.1582 23.4935 44.1636 24.3069 43.664 24.8065L36.986 31.4845C36.4907 31.9797 35.6773 31.9831 35.1765 31.4823L28.4985 24.8043ZM33.2539 23.9029L36.0823 26.7313L38.9108 23.9029L36.0823 21.0744L33.2539 23.9029Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M4.32324 23.0168C3.82361 23.5164 3.82458 24.3254 4.32105 24.8219L10.999 31.4999C11.4998 32.0007 12.3132 31.9973 12.8085 31.502L19.4865 24.8241C19.9861 24.3245 19.9808 23.5111 19.4843 23.0146L12.8063 16.3366C12.3099 15.8402 11.4965 15.8435 11.0012 16.3388L4.32324 23.0168ZM11.9048 26.7489L9.07642 23.9204L11.9048 21.092L14.7333 23.9204L11.9048 26.7489Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M16.3368 35.1925C15.8372 35.6922 15.8381 36.5012 16.3346 36.9977L23.0126 43.6757C23.5134 44.1765 24.3268 44.1731 24.8221 43.6778L31.5 36.9999C31.9996 36.5003 31.9943 35.6868 31.4978 35.1904L24.8199 28.5124C24.3234 28.0159 23.51 28.0193 23.0147 28.5146L16.3368 35.1925ZM23.9184 38.9246L21.09 36.0962L23.9184 33.2678L26.7468 36.0962L23.9184 38.9246Z" fill="currentColor"/>
+    return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M16.34 11.0021C15.8403 11.5017 15.8413 12.3108 16.3378 12.8073L23.0157 19.4852C23.5166 19.9861 24.33 19.9827 24.8252 19.4874L31.5032 12.8095C32.0028 12.3098 31.9975 11.4964 31.501 10.9999L24.8231 4.32199C24.3266 3.82552 23.5132 3.82889 23.0179 4.32417L16.34 11.0021ZM23.9216 14.7342L21.0931 11.9058L23.9216 9.07736L26.75 11.9058L23.9216 14.7342Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M28.4985 24.8043C28.0021 24.3079 28.0011 23.4988 28.5007 22.9992L35.1787 16.3212C35.674 15.826 36.4874 15.8226 36.9838 16.3191L43.6618 22.997C44.1582 23.4935 44.1636 24.3069 43.664 24.8065L36.986 31.4845C36.4907 31.9797 35.6773 31.9831 35.1765 31.4823L28.4985 24.8043ZM33.2539 23.9029L36.0823 26.7313L38.9108 23.9029L36.0823 21.0744L33.2539 23.9029Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M4.32324 23.0168C3.82361 23.5164 3.82458 24.3254 4.32105 24.8219L10.999 31.4999C11.4998 32.0007 12.3132 31.9973 12.8085 31.502L19.4865 24.8241C19.9861 24.3245 19.9808 23.5111 19.4843 23.0146L12.8063 16.3366C12.3099 15.8402 11.4965 15.8435 11.0012 16.3388L4.32324 23.0168ZM11.9048 26.7489L9.07642 23.9204L11.9048 21.092L14.7333 23.9204L11.9048 26.7489Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M16.3368 35.1925C15.8372 35.6922 15.8381 36.5012 16.3346 36.9977L23.0126 43.6757C23.5134 44.1765 24.3268 44.1731 24.8221 43.6778L31.5 36.9999C31.9996 36.5003 31.9943 35.6868 31.4978 35.1904L24.8199 28.5124C24.3234 28.0159 23.51 28.0193 23.0147 28.5146L16.3368 35.1925ZM23.9184 38.9246L21.09 36.0962L23.9184 33.2678L26.7468 36.0962L23.9184 38.9246Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
   } 
   
-  return <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fillRule="evenodd" clipRule="evenodd" d="M16.34 11.0021C15.8403 11.5017 15.8413 12.3108 16.3378 12.8073L23.0157 19.4852C23.5166 19.9861 24.33 19.9827 24.8252 19.4874L31.5032 12.8095C32.0028 12.3098 31.9975 11.4964 31.501 10.9999L24.8231 4.32199C24.3266 3.82552 23.5132 3.82889 23.0179 4.32417L16.34 11.0021ZM23.9216 16.1484L19.6789 11.9058L23.9216 7.66314L28.1642 11.9058L23.9216 16.1484Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M28.4985 24.8043C28.0021 24.3079 28.0011 23.4988 28.5007 22.9992L35.1787 16.3212C35.674 15.826 36.4874 15.8226 36.9838 16.3191L43.6618 22.997C44.1582 23.4935 44.1636 24.3069 43.664 24.8065L36.986 31.4845C36.4907 31.9797 35.6773 31.9831 35.1765 31.4823L28.4985 24.8043ZM31.8397 23.9029L36.0823 28.1455L40.325 23.9029L36.0823 19.6602L31.8397 23.9029Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M4.32324 23.0168C3.82361 23.5164 3.82458 24.3254 4.32105 24.8219L10.999 31.4999C11.4998 32.0007 12.3132 31.9973 12.8085 31.502L19.4865 24.8241C19.9861 24.3245 19.9808 23.5111 19.4843 23.0146L12.8063 16.3366C12.3099 15.8402 11.4965 15.8435 11.0012 16.3388L4.32324 23.0168ZM11.9048 28.1631L7.66221 23.9204L11.9048 19.6778L16.1475 23.9204L11.9048 28.1631Z" fill="currentColor"/>
-<path fillRule="evenodd" clipRule="evenodd" d="M16.3368 35.1925C15.8372 35.6922 15.8381 36.5012 16.3346 36.9977L23.0126 43.6757C23.5134 44.1765 24.3268 44.1731 24.8221 43.6778L31.5 36.9999C31.9996 36.5003 31.9943 35.6868 31.4978 35.1904L24.8199 28.5124C24.3234 28.0159 23.51 28.0193 23.0147 28.5146L16.3368 35.1925ZM23.9184 40.3389L19.6758 36.0962L23.9184 31.8536L28.161 36.0962L23.9184 40.3389Z" fill="currentColor"/>
+  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M16.34 11.0021C15.8403 11.5017 15.8413 12.3108 16.3378 12.8073L23.0157 19.4852C23.5166 19.9861 24.33 19.9827 24.8252 19.4874L31.5032 12.8095C32.0028 12.3098 31.9975 11.4964 31.501 10.9999L24.8231 4.32199C24.3266 3.82552 23.5132 3.82889 23.0179 4.32417L16.34 11.0021ZM23.9216 16.1484L19.6789 11.9058L23.9216 7.66314L28.1642 11.9058L23.9216 16.1484Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M28.4985 24.8043C28.0021 24.3079 28.0011 23.4988 28.5007 22.9992L35.1787 16.3212C35.674 15.826 36.4874 15.8226 36.9838 16.3191L43.6618 22.997C44.1582 23.4935 44.1636 24.3069 43.664 24.8065L36.986 31.4845C36.4907 31.9797 35.6773 31.9831 35.1765 31.4823L28.4985 24.8043ZM31.8397 23.9029L36.0823 28.1455L40.325 23.9029L36.0823 19.6602L31.8397 23.9029Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M4.32324 23.0168C3.82361 23.5164 3.82458 24.3254 4.32105 24.8219L10.999 31.4999C11.4998 32.0007 12.3132 31.9973 12.8085 31.502L19.4865 24.8241C19.9861 24.3245 19.9808 23.5111 19.4843 23.0146L12.8063 16.3366C12.3099 15.8402 11.4965 15.8435 11.0012 16.3388L4.32324 23.0168ZM11.9048 28.1631L7.66221 23.9204L11.9048 19.6778L16.1475 23.9204L11.9048 28.1631Z" style={{ fill: `var(--${color})` }}/>
+<path fillRule="evenodd" clipRule="evenodd" d="M16.3368 35.1925C15.8372 35.6922 15.8381 36.5012 16.3346 36.9977L23.0126 43.6757C23.5134 44.1765 24.3268 44.1731 24.8221 43.6778L31.5 36.9999C31.9996 36.5003 31.9943 35.6868 31.4978 35.1904L24.8199 28.5124C24.3234 28.0159 23.51 28.0193 23.0147 28.5146L16.3368 35.1925ZM23.9184 40.3389L19.6758 36.0962L23.9184 31.8536L28.161 36.0962L23.9184 40.3389Z" style={{ fill: `var(--${color})` }}/>
 </svg>
 ;
 };