通讯录架子搭建，引入svg

2025-12-30 02:52:26 +00:00 · 2024-10-23 15:33:58 +08:00
parent 797fbd35f1
commit c483027c32
11 changed files with 318 additions and 4 deletions
--- a/package.json
+++ b/package.json
@@ -38,7 +38,8 @@
    "prettier": "^3.2.5",
    "protobufjs-cli": "^1.1.3",
    "sass": "^1.77.8",
-    "vite": "^5.3.1"
+    "vite": "^5.3.1",
+    "vite-svg-loader": "^5.1.0"
  },
  "lint-staged": {
    "*.{js,ts,vue}": [
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -78,6 +78,9 @@ importers:
      vite:
        specifier: ^5.3.1
        version: 5.4.1(@types/node@22.5.4)(sass@1.77.8)
+      vite-svg-loader:
+        specifier: ^5.1.0
+        version: 5.1.0(vue@3.4.38)

 packages:

@@ -423,6 +426,10 @@ packages:
  '@sxzz/popperjs-es@2.11.7':
    resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}

+  '@trysound/sax@0.2.0':
+    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
+    engines: {node: '>=10.13.0'}
+
  '@types/estree@1.0.5':
    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}

@@ -635,6 +642,10 @@ packages:
    resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
    engines: {node: '>=18'}

+  commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+
  concat-map@0.0.1:
    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}

@@ -645,11 +656,30 @@ packages:
  crypto-js@4.2.0:
    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}

+  css-select@5.1.0:
+    resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
+
+  css-tree@2.2.1:
+    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
+  css-tree@2.3.1:
+    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
+  css-what@6.1.0:
+    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
+    engines: {node: '>= 6'}
+
  cssesc@3.0.0:
    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
    engines: {node: '>=4'}
    hasBin: true

+  csso@5.0.5:
+    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
  csstype@3.1.3:
    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}

@@ -688,6 +718,19 @@ packages:
    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
    engines: {node: '>=6.0.0'}

+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  domutils@3.1.0:
+    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
+
  element-plus@2.8.0:
    resolution: {integrity: sha512-7ngapVlVlQAjocVqD4MUKvKXlBneT9DSDk2mmBOSLRFWNm/HLDT15ozmsvUBfy18sajnyUeSIHTtINE8gfrGMg==}
    peerDependencies:
@@ -1127,6 +1170,12 @@ packages:
    engines: {node: '>= 12'}
    hasBin: true

+  mdn-data@2.0.28:
+    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
+
+  mdn-data@2.0.30:
+    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
+
  mdurl@2.0.0:
    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}

@@ -1455,6 +1504,11 @@ packages:
    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
    engines: {node: '>=8'}

+  svgo@3.3.2:
+    resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
  synckit@0.9.1:
    resolution: {integrity: sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==}
    engines: {node: ^14.18.0 || >=16.0.0}
@@ -1513,6 +1567,11 @@ packages:
    resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
    hasBin: true

+  vite-svg-loader@5.1.0:
+    resolution: {integrity: sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==}
+    peerDependencies:
+      vue: '>=3.2.13'
+
  vite@5.4.1:
    resolution: {integrity: sha512-1oE6yuNXssjrZdblI9AfBbHCC41nnyoVoEZxQnID6yvQZAFBzxxkqoFLtHUMkYunL8hwOLEjgTuxpkRxvba3kA==}
    engines: {node: ^18.0.0 || >=20.0.0}
@@ -1838,6 +1897,8 @@ snapshots:

  '@sxzz/popperjs-es@2.11.7': {}

+  '@trysound/sax@0.2.0': {}
+
  '@types/estree@1.0.5': {}

  '@types/linkify-it@5.0.0': {}
@@ -2083,6 +2144,8 @@ snapshots:

  commander@12.1.0: {}

+  commander@7.2.0: {}
+
  concat-map@0.0.1: {}

  cross-spawn@7.0.3:
@@ -2093,8 +2156,32 @@ snapshots:

  crypto-js@4.2.0: {}

+  css-select@5.1.0:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.1.0
+      domhandler: 5.0.3
+      domutils: 3.1.0
+      nth-check: 2.1.1
+
+  css-tree@2.2.1:
+    dependencies:
+      mdn-data: 2.0.28
+      source-map-js: 1.2.0
+
+  css-tree@2.3.1:
+    dependencies:
+      mdn-data: 2.0.30
+      source-map-js: 1.2.0
+
+  css-what@6.1.0: {}
+
  cssesc@3.0.0: {}

+  csso@5.0.5:
+    dependencies:
+      css-tree: 2.2.1
+
  csstype@3.1.3: {}

  dayjs@1.11.12: {}
@@ -2132,6 +2219,24 @@ snapshots:
    dependencies:
      esutils: 2.0.3

+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  domelementtype@2.3.0: {}
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domutils@3.1.0:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
  element-plus@2.8.0(vue@3.4.38):
    dependencies:
      '@ctrl/tinycolor': 3.6.1
@@ -2636,6 +2741,10 @@ snapshots:

  marked@4.3.0: {}

+  mdn-data@2.0.28: {}
+
+  mdn-data@2.0.30: {}
+
  mdurl@2.0.0: {}

  memoize-one@6.0.0: {}
@@ -2968,6 +3077,16 @@ snapshots:
    dependencies:
      has-flag: 4.0.0

+  svgo@3.3.2:
+    dependencies:
+      '@trysound/sax': 0.2.0
+      commander: 7.2.0
+      css-select: 5.1.0
+      css-tree: 2.3.1
+      css-what: 6.1.0
+      csso: 5.0.5
+      picocolors: 1.0.1
+
  synckit@0.9.1:
    dependencies:
      '@pkgr/core': 0.1.1
@@ -3011,6 +3130,11 @@ snapshots:

  uuid@10.0.0: {}

+  vite-svg-loader@5.1.0(vue@3.4.38):
+    dependencies:
+      svgo: 3.3.2
+      vue: 3.4.38
+
  vite@5.4.1(@types/node@22.5.4)(sass@1.77.8):
    dependencies:
      esbuild: 0.21.5
--- a/src/assets/svg/contacts.svg
+++ b/src/assets/svg/contacts.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg
+  t="1729651257466"
+  class="svg-icon"
+  viewBox="0 0 1024 1024"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  p-id="4713"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="200"
+  height="200"
+>
+  <path d="M620.744191 538.879184c82.736353-40.523949 140.308583-124.785028 140.308583-222.936465 0-137.367601-111.714338-249.080915-249.02668-249.080915-137.367601 0-249.080915 111.713314-249.080915 249.080915 0 98.151437 57.57223 182.412516 140.363841 222.936465C235.330238 586.429153 111.796714 740.736565 111.796714 923.694503c0 18.464537 15.032368 33.443693 33.496905 33.443693 18.464537 0 33.497928-14.979156 33.497928-33.443693 0-183.774537 149.46001-333.343017 333.234547-333.343017 183.77556 0 333.234547 149.568481 333.234547 333.343017 0 18.464537 14.978133 33.443693 33.443693 33.443693 18.519796 0 33.496905-14.979156 33.496905-33.443693C912.20124 740.736565 788.668739 586.429153 620.744191 538.879184zM329.886801 315.942719c0-100.438527 81.70179-182.194552 182.140317-182.194552 100.384291 0 182.086082 81.756025 182.086082 182.194552 0 100.384291-81.702813 182.086082-182.086082 182.086082C411.587568 498.0288 329.886801 416.32701 329.886801 315.942719z" p-id="4714">
+  </path>
+</svg>
--- a/src/assets/svg/group.svg
+++ b/src/assets/svg/group.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg
+  t="1729649952471"
+  class="svg-icon"
+  viewBox="0 0 1024 1024"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  p-id="1969"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="200"
+  height="200"
+>
+  <path d="M620.8 611.2c67.2-38.4 115.2-112 115.2-195.2 0-124.8-99.2-224-224-224s-224 99.2-224 224c0 83.2 44.8 156.8 115.2 195.2-89.6 35.2-156.8 115.2-179.2 211.2-3.2 16 6.4 35.2 25.6 38.4H256c16 0 28.8-9.6 32-25.6 22.4-105.6 115.2-182.4 224-182.4s201.6 76.8 224 182.4c3.2 16 19.2 28.8 38.4 25.6 16-3.2 28.8-19.2 25.6-38.4-22.4-96-89.6-176-179.2-211.2zM352 416c0-89.6 70.4-160 160-160s160 70.4 160 160-70.4 160-160 160-160-70.4-160-160zM992 630.4c-12.8-64-54.4-115.2-118.4-144 35.2-32 54.4-76.8 54.4-128C928 265.6 857.6 192 768 192c-19.2 0-32 12.8-32 32s12.8 32 32 32c54.4 0 96 44.8 96 102.4 0 51.2-28.8 89.6-73.6 99.2-16 3.2-28.8 22.4-22.4 38.4 0 16 9.6 28.8 25.6 28.8 70.4 12.8 118.4 54.4 131.2 115.2 3.2 16 16 25.6 32 25.6h6.4c19.2 0 32-16 28.8-35.2zM252.8 499.2c6.4-19.2-6.4-35.2-22.4-41.6C188.8 448 160 409.6 160 358.4 163.2 300.8 201.6 256 256 256c19.2 0 32-12.8 32-32s-16-32-32-32c-89.6 0-156.8 70.4-156.8 166.4 0 51.2 19.2 96 51.2 128-60.8 28.8-105.6 80-118.4 144-3.2 16 6.4 35.2 25.6 38.4H64c16 0 28.8-9.6 32-25.6 12.8-60.8 60.8-102.4 131.2-115.2 16 0 25.6-12.8 25.6-28.8z" p-id="1970">
+  </path>
+</svg>
--- a/src/assets/svg/organization.svg
+++ b/src/assets/svg/organization.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg
+  t="1729650057302"
+  class="svg-icon"
+  viewBox="0 0 1024 1024"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  p-id="2851"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="200"
+  height="200"
+>
+  <path d="M960 704h-63.616v-167.392a32 32 0 0 0-32-32H544V416h160a32 32 0 0 0 32-32V96a32 32 0 0 0-32-32H320a32 32 0 0 0-32 32v288a32 32 0 0 0 32 32h160v88.608H161.984a32 32 0 0 0-32 31.968L129.792 704H64a32 32 0 0 0-32 32v192a32 32 0 0 0 32 32h192a32 32 0 0 0 32-32v-192a32 32 0 0 0-32-32H193.792l0.16-135.392H480V704h-64a32 32 0 0 0-32 32v192a32 32 0 0 0 32 32h192a32 32 0 0 0 32-32v-192a32 32 0 0 0-32-32h-64v-135.392h288.384V704H768a32 32 0 0 0-32 32v192a32 32 0 0 0 32 32h192a32 32 0 0 0 32-32v-192a32 32 0 0 0-32-32zM352 128h320v224H352V128zM224 896H96v-128h128v128z m352 0h-128v-128h128v128z m352 0h-128v-128h128v128z" p-id="2852">
+  </path>
+</svg>
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -19,7 +19,31 @@ const router = createRouter({
        },
        {
          path: '/contacts',
-          component: () => import('@/views/contacts/ContactsLayout.vue')
+          component: () => import('@/views/contacts/ContactsLayout.vue'),
+          redirect: '/contacts/user',
+          children: [
+            {
+              path: '/contacts/user',
+              component: () => import('@/views/contacts/children/ContactsUser.vue'),
+              meta: {
+                active: '/contacts' //对于二级子路由的active路径还是指向父路径，方便一级导航菜单被显示为激活，同时要写:default-active="$route.meta.active || $route.path"
+              }
+            },
+            {
+              path: '/contacts/group',
+              component: () => import('@/views/contacts/children/ContactsGroup.vue'),
+              meta: {
+                active: '/contacts' //对于二级子路由的active路径还是指向父路径，方便一级导航菜单被显示为激活，同时要写:default-active="$route.meta.active || $route.path"
+              }
+            },
+            {
+              path: '/contacts/organization',
+              component: () => import('@/views/contacts/children/ContactsOrganization.vue'),
+              meta: {
+                active: '/contacts' //对于二级子路由的active路径还是指向父路径，方便一级导航菜单被显示为激活，同时要写:default-active="$route.meta.active || $route.path"
+              }
+            }
+          ]
        },
        {
          path: '/meeting',
--- a/src/views/contacts/ContactsLayout.vue
+++ b/src/views/contacts/ContactsLayout.vue
@@ -1 +1,80 @@
-<template>通讯录</template>
+<script setup>
+import contactsIcon from '@/assets/svg/contacts.svg'
+import groupIcon from '@/assets/svg/group.svg'
+import organizationIcon from '@/assets/svg/organization.svg'
+</script>
+
+<template>
+  <el-container>
+    <el-header class="bdr-b">通讯录</el-header>
+    <el-container class="el-container__body">
+      <el-aside class="bdr-r body" width="200px">
+        <el-menu :default-active="$route.path" text-color="black" style="border: 0" router>
+          <el-menu-item index="/contacts/user">
+            <contactsIcon></contactsIcon>
+            <span>联系人</span>
+          </el-menu-item>
+
+          <el-menu-item index="/contacts/group">
+            <groupIcon></groupIcon>
+            <span>群组</span>
+          </el-menu-item>
+
+          <el-menu-item index="/contacts/organization">
+            <organizationIcon></organizationIcon>
+            <span>组织</span>
+          </el-menu-item>
+        </el-menu>
+      </el-aside>
+      <el-main style="padding: 0">
+        <router-view></router-view>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<style lang="scss" scoped>
+.el-header {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  padding-left: 15px;
+  font-size: 18px;
+}
+
+.el-container__body {
+  height: 100vh;
+
+  .el-aside {
+    width: 130px;
+    height: 100%;
+    padding: 8px;
+  }
+}
+
+.el-menu {
+  --el-menu-bg-color: #f5f5f5;
+}
+
+.el-menu-item {
+  border-radius: 8px;
+  margin-bottom: 2px;
+}
+
+.is-active {
+  --fillColor: #409eff; // 与el-menu-item的active-text-color默认颜色保持一致
+}
+
+.svg-icon {
+  width: 20px;
+  height: 20px;
+  fill: var(--fillColor);
+  margin-right: 8px;
+}
+
+.el-menu-item.is-active {
+  background-color: #dedfe0;
+  color: #409eff;
+  border-radius: 8px;
+}
+</style>
--- a/src/views/contacts/children/ContactsGroup.vue
+++ b/src/views/contacts/children/ContactsGroup.vue
@@ -0,0 +1,13 @@
+<script setup></script>
+
+<template>
+  <div class="contacts-group">
+    <h1>Contacts group</h1>
+  </div>
+</template>
+
+<style scoped>
+.contacts-group {
+  /* Add your styles here */
+}
+</style>
--- a/src/views/contacts/children/ContactsOrganization.vue
+++ b/src/views/contacts/children/ContactsOrganization.vue
@@ -0,0 +1,13 @@
+<script setup></script>
+
+<template>
+  <div class="contacts-organization">
+    <h1>Contacts organization</h1>
+  </div>
+</template>
+
+<style scoped>
+.contacts-organization {
+  /* Add your styles here */
+}
+</style>
--- a/src/views/contacts/children/ContactsUser.vue
+++ b/src/views/contacts/children/ContactsUser.vue
@@ -0,0 +1,13 @@
+<script setup></script>
+
+<template>
+  <div class="contacts-user">
+    <h1>Contacts User</h1>
+  </div>
+</template>
+
+<style scoped>
+.contacts-user {
+  /* Add your styles here */
+}
+</style>
--- a/vite.config.js
+++ b/vite.config.js
@@ -2,10 +2,11 @@ import { fileURLToPath, URL } from 'node:url'

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import svgLoader from 'vite-svg-loader'

 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), svgLoader()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))