图标

components/CustomMessage.tsx

@@ -1,4 +1,5 @@
-// 在 DesignPic.tsx 中添加自定义消息组件
+import React from 'react'
+// 自定义消息组件
 export const CustomMessage = {
   success: (content: string) => {
     showCustomMessage('success', content);
@@ -13,72 +14,52 @@ export const CustomMessage = {
     showCustomMessage('info', content);
   }
 };
-
+type MessageType = 'success' | 'error' | 'warning' | 'info';
 // 自定义消息显示函数
-const showCustomMessage = (type: 'success' | 'error' | 'warning' | 'info', message: string) => {
+const showCustomMessage = (type: MessageType, message: string) => {
   // 移除已存在的消息
   const existingMessages = document.querySelectorAll('.custom-message');
   existingMessages.forEach(msg => msg.remove());
 
   const messageContainer = document.createElement('div');
-  messageContainer.className = 'custom-message';
-  messageContainer.style.cssText = `
-    position: fixed;
-    top: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    padding: 7px 10px;
-    border-radius: 4px;
-    background: white;
-    z-index: 10000;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    min-width: 200px;
-    text-align: center;
-    justify-content: center;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  `;
-  
+
+  messageContainer.className = `custom-message fixed top-5 left-1/2 gap-2 flex justify-center items-center leading-[18px] rounded-lg px-4 py-2
+   bg-[#fff] min-w-[200px] z-[10000] transition-all duration-300 shadow-[0_4px_12px_rgb(0_0_0/0.15)] -translate-x-1/2`;
+  // messageContainer.style.cssText = `
+  //   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  // `;
+
   let icon = '';
   // 根据不同类型设置样式和图标
-  switch(type) {
+  switch (type) {
     case 'success':
       messageContainer.style.color = '#52c41a';
-      icon = '✓';
+      icon = '<svg t="1756881717120" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8894" width="18" height="18"><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8c12.7 17.7 39 17.7 51.7 0l210.6-292c3.9-5.3 0.1-12.7-6.4-12.7z" p-id="8895" fill="#52c41a"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8896" fill="#52c41a"></path></svg>';
       break;
     case 'error':
       messageContainer.style.color = '#ff4d4f';
-      icon = '✗';
+      icon = '<svg t="1756881654441" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8531" width="18" height="18"><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 0.3L512 465.6l-99.3-118.4-66.1-0.3c-4.4 0-8 3.5-8 8 0 1.9 0.7 3.7 1.9 5.2l130.1 155L340.5 670c-1.2 1.5-1.9 3.3-1.9 5.2 0 4.4 3.6 8 8 8l66.1-0.3L512 564.4l99.3 118.4 66 0.3c4.4 0 8-3.5 8-8 0-1.9-0.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z" p-id="8532" fill="#ff4d4f"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8533" fill="#ff4d4f"></path></svg>';
       break;
     case 'warning':
       messageContainer.style.color = '#faad14';
-      icon = '⚠';
+      icon = '<svg t="1756881803623" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9161" width="18" height="18"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="9162" fill="#faad14"></path><path d="M512 688m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="9163" fill="#faad14"></path><path d="M488 576h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z" p-id="9164" fill="#faad14"></path></svg>';
       break;
     default:
       messageContainer.style.color = '#1890ff';
-      icon = 'ℹ';
+      icon = '<svg t="1756881872206" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9401" width="18" height="18"><path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27c40.9 17.3 77.7 42.1 109.3 73.8 9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47c-5.3 4.1-3.5 12.5 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l0.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8zM924 512h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4S687 811.7 646 829c-42.4 17.9-87.4 27-133.9 27s-91.5-9.1-133.9-27c-40.9-17.3-77.7-42.1-109.3-73.8-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47c5.3-4.1 3.5-12.5-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-0.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8 0.1-4.5-3.5-8.2-8-8.2z" p-id="9402" fill="#1890ff"></path></svg>';
   }
-  
+
   messageContainer.innerHTML = `
     <span style="font-size: 16px;">${icon}</span>
     <span style="color: #181818;">${message}</span>
   `;
-  
+
   document.body.appendChild(messageContainer);
-  
+
   // 3秒后自动移除
   setTimeout(() => {
     if (messageContainer.parentNode) {
       messageContainer.parentNode.removeChild(messageContainer);
     }
   }, 3000);
-};
-
-// 然后在你的代码中替换所有的 Message 调用
-// 原来的:
-// Message.success("图片上传结束")
-
-// 替换为:
-// CustomMessage.success("图片上传结束")
+};

components/IconCom.tsx

@@ -8,25 +8,63 @@ interface IconComProps {
     fill?: string;
     _style?: React.CSSProperties;
 }
+const userSvg = ({ width = 20, height = 20, fill = '#1677FF' }: IconComProps) => {
+    return <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1937" width={width} height={height}><path d="M498.602667 191.744a204.714667 204.714667 0 0 1 116.906666 372.8c133.162667 47.317333 229.077333 173.290667 231.893334 322.026667l0.085333 6.784h-64c0-157.333333-127.573333-284.885333-284.885333-284.885334-155.136 0-281.301333 123.968-284.821334 278.250667l-0.085333 6.613333h-64c0-151.68 96.810667-280.746667 232-328.810666a204.714667 204.714667 0 0 1 116.906667-372.8z m0 64a140.714667 140.714667 0 1 0 0 281.450667 140.714667 140.714667 0 0 0 0-281.450667z" fill={fill} p-id="1938"></path></svg>
+
+}
+const codeSvg = ({ width = 20, height = 20, fill = '#1677FF' }: IconComProps) => {
+    return <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2088" width={width} height={height}><path d="M234.666667 149.333333v704H170.666667V149.333333h64z m640 0v704h-42.666667V149.333333h42.666667zM576 789.333333v64h-42.666667v-64h42.666667z m-106.666667 0v64h-64v-64h64z m-128 0v64h-42.666666v-64h42.666666z m426.666667 0v64h-128v-64h128zM576 149.333333v576h-42.666667V149.333333h42.666667z m-106.666667 0v576h-64V149.333333h64z m-128 0v576h-42.666666V149.333333h42.666666z m426.666667 0v576h-128V149.333333h128z" fill={fill} p-id="2089"></path></svg>
+}
+
+const searchSvg = ({ width = 20, height = 20, fill = '#1677FF' }: IconComProps) => {
+    return <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1419" width={width} height={height}><path d="M782.08 476.330667A305.706667 305.706667 0 1 0 170.666667 476.416a305.706667 305.706667 0 0 0 611.413333-0.085333z m42.666667 0a348.416 348.416 0 1 1-696.832-0.042667 348.416 348.416 0 0 1 696.789333 0.042667z" fill={fill} p-id="1420"></path><path d="M476.373333 281.898667c48.384 0 92.16 19.626667 123.861334 51.328a21.333333 21.333333 0 1 1-30.165334 30.165333 132.096 132.096 0 0 0-93.696-38.826667c-36.608 0-69.76 14.805333-93.738666 38.826667a21.333333 21.333333 0 0 1-30.208-30.165333 174.805333 174.805333 0 0 1 123.946666-51.328zM696.32 696.362667a21.333333 21.333333 0 0 1 30.208 0l163.2 163.2a21.333333 21.333333 0 1 1-30.165333 30.165333l-163.2-163.2a21.333333 21.333333 0 0 1 0-30.165333z" fill={fill} p-id="1421"></path></svg>
+}
+
+const sureSvg = ({ width = 20, height = 20, fill = '#1677FF' }: IconComProps) => {
+    return <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8530" width={width} height={height}><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8c12.7 17.7 39 17.7 51.7 0l210.6-292c3.9-5.3 0.1-12.7-6.4-12.7z" p-id="8531" fill={fill}></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8532" fill={fill}></path></svg>
+}
+
+const errorSvg = ({ width = 20, height = 20, fill = '#1677FF' }: IconComProps) => {
+    return <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8678" width={width} height={height}><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 0.3L512 465.6l-99.3-118.4-66.1-0.3c-4.4 0-8 3.5-8 8 0 1.9 0.7 3.7 1.9 5.2l130.1 155L340.5 670c-1.2 1.5-1.9 3.3-1.9 5.2 0 4.4 3.6 8 8 8l66.1-0.3L512 564.4l99.3 118.4 66 0.3c4.4 0 8-3.5 8-8 0-1.9-0.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z" p-id="8679" fill={fill}></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8680" fill={fill}></path></svg>
+}
+
+const warnSvg = ({ width = 20, height = 20, fill = '#1677FF' }: IconComProps) => {
+    return <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8826" width={width} height={height}><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8827"></path><path d="M512 336m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="8828" fill={fill}></path><path d="M536 448h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" p-id="8829" fill={fill}></path></svg>
+}
+
+const infoSvg = ({ width = 20, height = 20, fill = '#1677FF' }: IconComProps) => {
+    return <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8975" width={width} height={height}><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8976" fill={fill}></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7c0-19.7 12.4-37.7 30.9-44.8 59-22.7 97.1-74.7 97.1-132.5 0.1-39.3-17.1-76-48.3-103.3z" p-id="8977" fill={fill}></path><path d="M512 732m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z" p-id="8978" fill={fill}></path></svg>
+}
+
+const listSvg = ({ width = 20, height = 20, fill = '#1677FF' }: IconComProps) => {
+    return <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17475" width={width} height={height}><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM912 476H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM912 760H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z" p-id="17476" fill={fill}></path><path d="M160 228m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z" p-id="17477" fill={fill}></path><path d="M160 512m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z" p-id="17478" fill={fill}></path><path d="M160 796m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z" p-id="17479" fill={fill}></path></svg>
+}
+const svgInit = (type: string, props: IconComProps) => {
+    const typeSvg: {
+        [key: string]: React.ReactNode;
+    } = {
+        user: userSvg(props),
+        code: codeSvg(props),
+        search: searchSvg(props),
+        sure: sureSvg(props),
+        error: errorSvg(props),
+        warn: warnSvg(props),
+        info: infoSvg(props),
+        list: listSvg(props),
+    }
+    return typeSvg[type] ? typeSvg[type] : null
+}
 const IconCom: React.FC<IconComProps> = (props: IconComProps = {}) => {
     // 样式content无效, https://www.iconfont.cn/collections/detail?spm=a313x.collections_index.i1.d9df05512.6d153a81fkRhvT&cid=9402
     const {
         type = "",
-        width = 20,
-        height = 20,
-        fill = "#1677FF",
         _style = {},
     } = props;
     return (
         <div style={_style}>
-            {type == "user" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1937" width={width} height={height}><path d="M498.602667 191.744a204.714667 204.714667 0 0 1 116.906666 372.8c133.162667 47.317333 229.077333 173.290667 231.893334 322.026667l0.085333 6.784h-64c0-157.333333-127.573333-284.885333-284.885333-284.885334-155.136 0-281.301333 123.968-284.821334 278.250667l-0.085333 6.613333h-64c0-151.68 96.810667-280.746667 232-328.810666a204.714667 204.714667 0 0 1 116.906667-372.8z m0 64a140.714667 140.714667 0 1 0 0 281.450667 140.714667 140.714667 0 0 0 0-281.450667z" fill={fill} p-id="1938"></path></svg>}
-            {type == "code" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2088" width={width} height={height}><path d="M234.666667 149.333333v704H170.666667V149.333333h64z m640 0v704h-42.666667V149.333333h42.666667zM576 789.333333v64h-42.666667v-64h42.666667z m-106.666667 0v64h-64v-64h64z m-128 0v64h-42.666666v-64h42.666666z m426.666667 0v64h-128v-64h128zM576 149.333333v576h-42.666667V149.333333h42.666667z m-106.666667 0v576h-64V149.333333h64z m-128 0v576h-42.666666V149.333333h42.666666z m426.666667 0v576h-128V149.333333h128z" fill={fill} p-id="2089"></path></svg>}
-            {type == "search" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1419" width={width} height={height}><path d="M782.08 476.330667A305.706667 305.706667 0 1 0 170.666667 476.416a305.706667 305.706667 0 0 0 611.413333-0.085333z m42.666667 0a348.416 348.416 0 1 1-696.832-0.042667 348.416 348.416 0 0 1 696.789333 0.042667z" fill={fill} p-id="1420"></path><path d="M476.373333 281.898667c48.384 0 92.16 19.626667 123.861334 51.328a21.333333 21.333333 0 1 1-30.165334 30.165333 132.096 132.096 0 0 0-93.696-38.826667c-36.608 0-69.76 14.805333-93.738666 38.826667a21.333333 21.333333 0 0 1-30.208-30.165333 174.805333 174.805333 0 0 1 123.946666-51.328zM696.32 696.362667a21.333333 21.333333 0 0 1 30.208 0l163.2 163.2a21.333333 21.333333 0 1 1-30.165333 30.165333l-163.2-163.2a21.333333 21.333333 0 0 1 0-30.165333z" fill={fill} p-id="1421"></path></svg>}
-            {type == "sure" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8530" width={width} height={height}><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8c12.7 17.7 39 17.7 51.7 0l210.6-292c3.9-5.3 0.1-12.7-6.4-12.7z" p-id="8531" fill={fill}></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8532" fill={fill}></path></svg>}
-            {type == "error" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8678" width={width} height={height}><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 0.3L512 465.6l-99.3-118.4-66.1-0.3c-4.4 0-8 3.5-8 8 0 1.9 0.7 3.7 1.9 5.2l130.1 155L340.5 670c-1.2 1.5-1.9 3.3-1.9 5.2 0 4.4 3.6 8 8 8l66.1-0.3L512 564.4l99.3 118.4 66 0.3c4.4 0 8-3.5 8-8 0-1.9-0.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z" p-id="8679" fill={fill}></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8680" fill={fill}></path></svg>}
-            {type == "warn" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8826" width={width} height={height}><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8827"></path><path d="M512 336m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="8828" fill={fill}></path><path d="M536 448h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" p-id="8829" fill={fill}></path></svg>}
-            {type == "info" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8975" width={width} height={height}><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8976" fill={fill}></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7c0-19.7 12.4-37.7 30.9-44.8 59-22.7 97.1-74.7 97.1-132.5 0.1-39.3-17.1-76-48.3-103.3z" p-id="8977" fill={fill}></path><path d="M512 732m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z" p-id="8978" fill={fill}></path></svg>}
-            {type == "list" && <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17475" width={width} height={height}><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM912 476H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM912 760H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z" p-id="17476" fill={fill}></path><path d="M160 228m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z" p-id="17477" fill={fill}></path><path d="M160 512m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z" p-id="17478" fill={fill}></path><path d="M160 796m-56 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0Z" p-id="17479" fill={fill}></path></svg>}
+            {
+                svgInit(type, props)
+            }
         </div>
     )
 }