From f88a14ee31467daa2d4c5c015f5e502a93c2eab9 Mon Sep 17 00:00:00 2001
From: susie-laptop <sishi1461@gmail.com>
Date: Fri, 28 Feb 2025 19:34:56 -0500
Subject: [PATCH] [dev]set svg icons lib

---
 src/components/Snackbar.jsx               | 24 +-----
 src/components/SvgIcon.jsx                | 12 +++
 src/icons/icons.js                        | 63 ++++++++++++++++
 src/layouts/HeaderWithNav.jsx             | 34 ++++-----
 src/pages/KnowledgeBase/KnowledgeBase.jsx |  9 +--
 src/pages/KnowledgeBase/KnowledgeCard.jsx | 91 +++--------------------
 src/styles/style.scss                     |  1 +
 7 files changed, 109 insertions(+), 125 deletions(-)
 create mode 100644 src/components/SvgIcon.jsx
 create mode 100644 src/icons/icons.js

diff --git a/src/components/Snackbar.jsx b/src/components/Snackbar.jsx
index 1b84c48..c007395 100644
--- a/src/components/Snackbar.jsx
+++ b/src/components/Snackbar.jsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import SvgIcon from './SvgIcon';
 
 const Snackbar = ({ type = 'primary', message, duration = 3000, onClose }) => {
     if (!message) return null;
@@ -21,32 +22,11 @@ const Snackbar = ({ type = 'primary', message, duration = 3000, onClose }) => {
 
     return (
         <>
-            <svg xmlns='http://www.w3.org/2000/svg' className='d-none'>
-                <symbol id='check-circle-fill' viewBox='0 0 16 16'>
-                    <path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z' />
-                </symbol>
-                <symbol id='info-fill' viewBox='0 0 16 16'>
-                    <path d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z' />
-                </symbol>
-                <symbol id='exclamation-triangle-fill' viewBox='0 0 16 16'>
-                    <path d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z' />
-                </symbol>
-            </svg>
-
             <div
                 className={`snackbar alert alert-${type} d-flex align-items-center justify-content-between position-fixed top-10 start-50 translate-middle w-50 alert-dismissible z-2`}
                 role='alert'
             >
-                <svg
-                    className='bi flex-shrink-0 me-2'
-                    role='img'
-                    aria-label={`${type}:`}
-                    width='16'
-                    height='16'
-                    fill='currentColor'
-                >
-                    <use xlinkHref={`#${icons[type]}`} />
-                </svg>
+                <SvgIcon className={icons[type]} />
                 <div className='flex-fill'>{message}</div>
                 <button
                     type='button'
diff --git a/src/components/SvgIcon.jsx b/src/components/SvgIcon.jsx
new file mode 100644
index 0000000..4a71d99
--- /dev/null
+++ b/src/components/SvgIcon.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { icons } from '../icons/icons';
+
+export default function SvgIcon({ className }) {
+    return (
+        <span
+            className={className}
+            style={{ display: 'inline-block', lineHeight: 0 }}
+            dangerouslySetInnerHTML={{ __html: icons[className] || '' }}
+        />
+    );
+}
diff --git a/src/icons/icons.js b/src/icons/icons.js
new file mode 100644
index 0000000..1af3338
--- /dev/null
+++ b/src/icons/icons.js
@@ -0,0 +1,63 @@
+export const icons = {
+    plus: `<svg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 448 512' fill='currentColor'>
+            <path d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z' />
+        </svg>`,
+    'more-dot': `<svg xmlns='http://www.w3.org/2000/svg' height='20' width='5' viewBox='0 0 128 512'>
+            <path d='M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z' />
+        </svg>`,
+    trash: `<svg
+            t='1740778468968'
+            className='icon'
+            viewBox='0 0 1024 1024'
+            version='1.1'
+            xmlns='http://www.w3.org/2000/svg'
+            p-id='2707'
+            width='16'
+            height='16'
+        >
+            <path
+                d='M896 298.666667H128c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h768c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667z'
+                p-id='2708'
+            ></path>
+            <path
+                d='M725.333333 981.333333H298.666667c-72.533333 0-128-55.466667-128-128V256c0-25.6 17.066667-42.666667 42.666666-42.666667s42.666667 17.066667 42.666667 42.666667v597.333333c0 25.6 17.066667 42.666667 42.666667 42.666667h426.666666c25.6 0 42.666667-17.066667 42.666667-42.666667V256c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666666 42.666667v597.333333c0 72.533333-55.466667 128-128 128zM682.666667 298.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667V170.666667c0-25.6-17.066667-42.666667-42.666667-42.666667h-170.666666c-25.6 0-42.666667 17.066667-42.666667 42.666667v85.333333c0 25.6-17.066667 42.666667-42.666667 42.666667s-42.666667-17.066667-42.666666-42.666667V170.666667c0-72.533333 55.466667-128 128-128h170.666666c72.533333 0 128 55.466667 128 128v85.333333c0 25.6-17.066667 42.666667-42.666666 42.666667z'
+                p-id='2709'
+            ></path>
+        </svg>`,
+    'check-circle-fill': `<svg className='bi flex-shrink-0 me-2' role='img' width='16' height='16' fill='currentColor'>
+            <path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z' />
+        </svg>`,
+    'info-fill': `<svg className='bi flex-shrink-0 me-2' role='img' width='16' height='16' fill='currentColor'>
+            <path d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z' />
+        </svg>`,
+    'exclamation-triangle-fill': `<svg className='bi flex-shrink-0 me-2' role='img' width='16' height='16' fill='currentColor'>
+            <path d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z' />
+        </svg>`,
+    file: `<svg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 384 512'>
+            <path
+                fill='#737373'
+                d='M320 464c8.8 0 16-7.2 16-16l0-288-80 0c-17.7 0-32-14.3-32-32l0-80L64 48c-8.8 0-16 7.2-16 16l0 384c0 8.8 7.2 16 16 16l256 0zM0 64C0 28.7 28.7 0 64 0L229.5 0c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3L384 448c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64z'
+            />
+        </svg>`,
+    clock: `<svg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 512 512'>
+            <path
+                fill='#737373'
+                d='M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120l0 136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2 280 120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'
+            />
+        </svg>`,
+    'circle-yes': `<svg xmlns='http://www.w3.org/2000/svg' height='14' width='14' viewBox='0 0 512 512' fill='currentColor'>
+            <path d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z' />
+        </svg>`,
+    eye: `<svg xmlns='http://www.w3.org/2000/svg' height='14' width='15.75' viewBox='0 0 576 512' fill='currentColor'>
+            <path d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z' />
+        </svg>`,
+    'chat-dot': `<svg xmlns='http://www.w3.org/2000/svg' height='14' width='14' viewBox='0 0 512 512' fill='currentColor'>
+            <path d='M168.2 384.9c-15-5.4-31.7-3.1-44.6 6.4c-8.2 6-22.3 14.8-39.4 22.7c5.6-14.7 9.9-31.3 11.3-49.4c1-12.9-3.3-25.7-11.8-35.5C60.4 302.8 48 272 48 240c0-79.5 83.3-160 208-160s208 80.5 208 160s-83.3 160-208 160c-31.6 0-61.3-5.5-87.8-15.1zM26.3 423.8c-1.6 2.7-3.3 5.4-5.1 8.1l-.3 .5c-1.6 2.3-3.2 4.6-4.8 6.9c-3.5 4.7-7.3 9.3-11.3 13.5c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c5.1 0 10.2-.3 15.3-.8l.7-.1c4.4-.5 8.8-1.1 13.2-1.9c.8-.1 1.6-.3 2.4-.5c17.8-3.5 34.9-9.5 50.1-16.1c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9zM144 272a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm144-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm80 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z' />
+        </svg>`,
+    key: `<svg xmlns='http://www.w3.org/2000/svg' height='14' width='14' viewBox='0 0 512 512' fill='currentColor'>
+            <path d='M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17l0 80c0 13.3 10.7 24 24 24l80 0c13.3 0 24-10.7 24-24l0-40 40 0c13.3 0 24-10.7 24-24l0-40 40 0c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z' />
+        </svg>`,
+    lock: `<svg xmlns='http://www.w3.org/2000/svg' height='14' width='12.25' viewBox='0 0 448 512' fill='currentColor'>
+            <path d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z' />
+        </svg>`,
+};
diff --git a/src/layouts/HeaderWithNav.jsx b/src/layouts/HeaderWithNav.jsx
index 083f734..3edb1b6 100644
--- a/src/layouts/HeaderWithNav.jsx
+++ b/src/layouts/HeaderWithNav.jsx
@@ -3,13 +3,13 @@ import React from 'react';
 export default function HeaderWithNav() {
     return (
         <header className=' navbar navbar-expand-lg'>
-            <nav class='navbar navbar-expand-lg border-bottom p-3 mb-3 w-100'>
-                <div class='container-fluid'>
-                    <a class='navbar-brand' href='#'>
+            <nav className='navbar navbar-expand-lg border-bottom p-3 mb-3 w-100'>
+                <div className='container-fluid'>
+                    <a className='navbar-brand' href='#'>
                         OOIN 智能知识库
                     </a>
                     <button
-                        class='navbar-toggler'
+                        className='navbar-toggler'
                         type='button'
                         data-bs-toggle='collapse'
                         data-bs-target='#navbarText'
@@ -17,30 +17,30 @@ export default function HeaderWithNav() {
                         aria-expanded='false'
                         aria-label='Toggle navigation'
                     >
-                        <span class='navbar-toggler-icon'></span>
+                        <span className='navbar-toggler-icon'></span>
                     </button>
-                    <div class='collapse navbar-collapse' id='navbarText'>
-                        <ul class='navbar-nav me-auto mb-lg-0'>
-                            <li class='nav-item'>
-                                <a class='nav-link active' aria-current='page' href='#'>
+                    <div className='collapse navbar-collapse' id='navbarText'>
+                        <ul className='navbar-nav me-auto mb-lg-0'>
+                            <li className='nav-item'>
+                                <a className='nav-link active' aria-current='page' href='#'>
                                     知识库
                                 </a>
                             </li>
-                            <li class='nav-item'>
-                                <a class='nav-link' href='#'>
+                            <li className='nav-item'>
+                                <a className='nav-link' href='#'>
                                     Chat
                                 </a>
                             </li>
                         </ul>
-                        <hr className='d-lg-none'/>
-                        <ul class='navbar-nav mb-2 mb-lg-0'>
-                            <li class='nav-item'>
-                                <a class='nav-link text-dark' href='#'>
+                        <hr className='d-lg-none' />
+                        <ul className='navbar-nav mb-2 mb-lg-0'>
+                            <li className='nav-item'>
+                                <a className='nav-link text-dark' href='#'>
                                     Log in
                                 </a>
                             </li>
-                            <li class='nav-item'>
-                                <a class='nav-link text-dark' href='#'>
+                            <li className='nav-item'>
+                                <a className='nav-link text-dark' href='#'>
                                     Sign up
                                 </a>
                             </li>
diff --git a/src/pages/KnowledgeBase/KnowledgeBase.jsx b/src/pages/KnowledgeBase/KnowledgeBase.jsx
index 2db1539..8c46cb2 100644
--- a/src/pages/KnowledgeBase/KnowledgeBase.jsx
+++ b/src/pages/KnowledgeBase/KnowledgeBase.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import KnowledgeCard from './KnowledgeCard';
 import { useDispatch } from 'react-redux';
+import { showNotification } from '../../store/notification.slice';
+import SvgIcon from '../../components/SvgIcon';
 
 export default function KnowledgeBase() {
     const dispatch = useDispatch();
@@ -28,12 +30,7 @@ export default function KnowledgeBase() {
             <div className='d-flex justify-content-between align-items-center mb-3'>
                 <input type='text' className='form-control w-50' placeholder='搜索知识库...' />
                 <button className='btn btn-dark d-flex align-items-center gap-1'>
-                    <svg xmlns='http://www.w3.org/2000/svg' height="16" width="16" viewBox='0 0 448 512'>
-                        <path
-                            fill='#ffffff'
-                            d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'
-                        />
-                    </svg>
+                    <SvgIcon className={'plus'} />
                     新建知识库
                 </button>
             </div>
diff --git a/src/pages/KnowledgeBase/KnowledgeCard.jsx b/src/pages/KnowledgeBase/KnowledgeCard.jsx
index b14cd6a..d5ce0f4 100644
--- a/src/pages/KnowledgeBase/KnowledgeCard.jsx
+++ b/src/pages/KnowledgeBase/KnowledgeCard.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import SvgIcon from '../../components/SvgIcon';
 
 export default function KnowledgeCard({ title, description, documents, date, access }) {
     return (
@@ -8,119 +9,49 @@ export default function KnowledgeCard({ title, description, documents, date, acc
                     <h5 className='card-title'>{title}</h5>
                     <div className='hoverdown position-absolute end-0 top-0'>
                         <button type='button' className='detail-btn btn'>
-                            <svg xmlns='http://www.w3.org/2000/svg' height='20' width='5' viewBox='0 0 128 512'>
-                                <path d='M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z' />
-                            </svg>
+                            <SvgIcon className={'more-dot'} />
                         </button>
-                        <ul class='hoverdown-menu shadow bg-white p-1 rounded'>
+                        <ul className='hoverdown-menu shadow bg-white p-1 rounded'>
                             <li className='p-1 hoverdown-item px-2'>
                                 删除
-                                <svg
-                                    t='1740778468968'
-                                    className='icon'
-                                    viewBox='0 0 1024 1024'
-                                    version='1.1'
-                                    xmlns='http://www.w3.org/2000/svg'
-                                    p-id='2707'
-                                    width='16'
-                                    height='16'
-                                >
-                                    <path
-                                        d='M896 298.666667H128c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h768c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667z'
-                                        p-id='2708'
-                                    ></path>
-                                    <path
-                                        d='M725.333333 981.333333H298.666667c-72.533333 0-128-55.466667-128-128V256c0-25.6 17.066667-42.666667 42.666666-42.666667s42.666667 17.066667 42.666667 42.666667v597.333333c0 25.6 17.066667 42.666667 42.666667 42.666667h426.666666c25.6 0 42.666667-17.066667 42.666667-42.666667V256c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666666 42.666667v597.333333c0 72.533333-55.466667 128-128 128zM682.666667 298.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667V170.666667c0-25.6-17.066667-42.666667-42.666667-42.666667h-170.666666c-25.6 0-42.666667 17.066667-42.666667 42.666667v85.333333c0 25.6-17.066667 42.666667-42.666667 42.666667s-42.666667-17.066667-42.666666-42.666667V170.666667c0-72.533333 55.466667-128 128-128h170.666666c72.533333 0 128 55.466667 128 128v85.333333c0 25.6-17.066667 42.666667-42.666666 42.666667z'
-                                        p-id='2709'
-                                    ></path>
-                                </svg>
+                                <SvgIcon className={'trash'} />
                             </li>
                         </ul>
                     </div>
                     <p className='card-text text-muted'>{description}</p>
                     <div className='text-muted d-flex align-items-center gap-1'>
-                        <svg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 384 512'>
-                            <path
-                                fill='#737373'
-                                d='M320 464c8.8 0 16-7.2 16-16l0-288-80 0c-17.7 0-32-14.3-32-32l0-80L64 48c-8.8 0-16 7.2-16 16l0 384c0 8.8 7.2 16 16 16l256 0zM0 64C0 28.7 28.7 0 64 0L229.5 0c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3L384 448c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64z'
-                            />
-                        </svg>
+                        <SvgIcon className={'file'} />
                         {documents} 文档
                         <span className='ms-3 d-flex align-items-center gap-1'>
-                            <svg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 512 512'>
-                                <path
-                                    fill='#737373'
-                                    d='M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120l0 136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2 280 120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'
-                                />
-                            </svg>
+                            <SvgIcon className={'clock'} />
                             {date}
                         </span>
                     </div>
                     <div className='mt-3 d-flex justify-content-between align-items-end'>
                         {access === 'full' ? (
                             <span className='badge bg-success-subtle d-flex align-items-center gap-1'>
-                                <svg
-                                    xmlns='http://www.w3.org/2000/svg'
-                                    height='14'
-                                    width='14'
-                                    viewBox='0 0 512 512'
-                                    fill='currentColor'
-                                >
-                                    <path d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z' />
-                                </svg>
+                                <SvgIcon className={'circle-yes'} />
                                 完全访问
                             </span>
                         ) : access === 'read' ? (
                             <span className='badge bg-primary-subtle d-flex align-items-center gap-1'>
-                                <svg
-                                    xmlns='http://www.w3.org/2000/svg'
-                                    height='14'
-                                    width='15.75'
-                                    viewBox='0 0 576 512'
-                                    fill='currentColor'
-                                >
-                                    <path d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z' />
-                                </svg>
+                                <SvgIcon className={'eye'} />
                                 只读访问
                             </span>
                         ) : (
                             <span className='badge bg-dark-subtle d-flex align-items-center gap-1'>
-                                <svg
-                                    xmlns='http://www.w3.org/2000/svg'
-                                    height='14'
-                                    width='12.25'
-                                    viewBox='0 0 448 512'
-                                    fill='currentColor'
-                                >
-                                    <path d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z' />
-                                </svg>
+                                <SvgIcon className={'lock'} />
                                 无访问权限
                             </span>
                         )}
                         {access === 'full' || access === 'read' ? (
                             <button className='btn btn-outline-dark btn-sm d-flex align-items-center gap-1'>
-                                <svg
-                                    xmlns='http://www.w3.org/2000/svg'
-                                    height='14'
-                                    width='14'
-                                    viewBox='0 0 512 512'
-                                    fill='currentColor'
-                                >
-                                    <path d='M168.2 384.9c-15-5.4-31.7-3.1-44.6 6.4c-8.2 6-22.3 14.8-39.4 22.7c5.6-14.7 9.9-31.3 11.3-49.4c1-12.9-3.3-25.7-11.8-35.5C60.4 302.8 48 272 48 240c0-79.5 83.3-160 208-160s208 80.5 208 160s-83.3 160-208 160c-31.6 0-61.3-5.5-87.8-15.1zM26.3 423.8c-1.6 2.7-3.3 5.4-5.1 8.1l-.3 .5c-1.6 2.3-3.2 4.6-4.8 6.9c-3.5 4.7-7.3 9.3-11.3 13.5c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c5.1 0 10.2-.3 15.3-.8l.7-.1c4.4-.5 8.8-1.1 13.2-1.9c.8-.1 1.6-.3 2.4-.5c17.8-3.5 34.9-9.5 50.1-16.1c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9zM144 272a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm144-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm80 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z' />
-                                </svg>
+                                <SvgIcon className={'chat-dot'} />
                                 新聊天
                             </button>
                         ) : (
                             <button className='btn btn-outline-dark btn-sm d-flex align-items-center gap-1'>
-                                <svg
-                                    xmlns='http://www.w3.org/2000/svg'
-                                    height='14'
-                                    width='14'
-                                    viewBox='0 0 512 512'
-                                    fill='currentColor'
-                                >
-                                    <path d='M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17l0 80c0 13.3 10.7 24 24 24l80 0c13.3 0 24-10.7 24-24l0-40 40 0c13.3 0 24-10.7 24-24l0-40 40 0c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z' />
-                                </svg>
+                                <SvgIcon className={'key'} />
                                 申请权限
                             </button>
                         )}
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 148177b..47e3605 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -27,6 +27,7 @@
                 gap: 8px;
                 border-radius: 4px;
                 color: $dark;
+                
                 &:hover {
                     background-color: $gray-100;
                 }