feat: use svg as expender

Author: SSShooter

src/icons/add-circle.svg

@@ -150,16 +150,22 @@
       }
       epd {
         position: absolute;
-        height: 12px;
-        width: 12px;
-        line-height: 12px;
+        height: 18px;
+        width: 18px;
+        // line-height: 12px;
         text-align: center;
-        border-radius: 50%;
-        border: 1px solid #4f4f4f;
-        background-color: #fff;
+        // border-radius: 50%;
+        // border: 1px solid #4f4f4f;
+        // background-color: #fff;
+        background-image: url('./icons/add-circle.svg');
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center;
+
         pointer-events: all;
         z-index: 9;
         &.minus {
+          background-image: url('./icons/minus-circle.svg') !important;
           transition: all 0.3s;
           opacity: 0;
           &:hover {

src/icons/minus-circle.svg

@@ -162,7 +162,7 @@ export function createInputDiv(tpc: Topic) {
 export const createExpander = function(expanded: boolean | undefined): Expander {
   const expander: Expander = $d.createElement('epd')
   // 包含未定义 expanded 的情况，未定义视为展开
-  expander.innerText = expanded !== false ? '-' : '+'
+  // expander.innerText = expanded !== false ? '⊖' : '⊕'
   expander.expanded = expanded !== false
   expander.className = expanded !== false ? 'minus' : ''
   return expander

src/index.less

@@ -27,17 +27,18 @@ let config = {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
       },
-      {
-        test: /\.(ttf|woff|woff2|eot|svg)$/i,
-        use: [
-          {
-            loader: 'url-loader',
-            options: {
-              limit: 8192,
-            },
-          },
-        ],
-      },
+      { test: /\.svg/, type: 'asset/inline' },
+      // {
+      //   test: /\.(ttf|woff|woff2|eot|svg)$/i,
+      //   use: [
+      //     {
+      //       loader: 'url-loader',
+      //       options: {
+      //         limit: false,
+      //       },
+      //     },
+      //   ],
+      // },
     ],
   },
 }