fix: 修复 vue 层 svg 问题

antvis · Nov 28, 2024 · 99dc01b · 99dc01b
1 parent 6362c6a
commit 99dc01b
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 68 deletions.
diff --git a/packages/s2-vue/package.json b/packages/s2-vue/package.json
@@ -64,7 +64,6 @@
     "@vue/shared": "^3.3.4",
     "@vue/tsconfig": "^0.4.0",
     "ant-design-vue": "^3.2.20",
-    "vite-svg-loader": "^3.6.0",
     "vue": "^3.3.4",
     "vue-tsc": "^2.1.6"
   },

diff --git a/packages/s2-vue/playground/App.vue b/packages/s2-vue/playground/App.vue
@@ -521,15 +521,20 @@ const fieldMap = {
 const partDrillDown: PartDrillDown = {
   drillConfig: {
     dataSet: [
+      {
+        name: '客户性别',
+        value: 'sex2',
+        type: 'location',
+      },
       {
         name: '销售渠道',
         value: 'channel',
         type: 'text',
       },
       {
-        name: '客户性别',
-        value: 'sex',
-        type: 'text',
+        name: '客户性别111',
+        value: 'sex1',
+        type: 'date',
       },
     ],
   },

diff --git a/packages/s2-vue/src/components/drill-down/index.vue b/packages/s2-vue/src/components/drill-down/index.vue
@@ -11,9 +11,9 @@ import type { SelectInfo } from 'ant-design-vue/lib/menu/src/interface';
 import { isEmpty } from 'lodash';
 import type { Key } from 'ant-design-vue/lib/_util/type';
 import type { ChangeEvent } from 'ant-design-vue/lib/_util/EventInterface';
-import LocationIcon from '../../svg/location-icon.svg?component';
-import TextIcon from '../../svg/text-icon.svg?component';
-import CalendarIcon from '../../svg/calendar-icon.svg?component';
+import LocationIcon from '../../icons/location-icon.vue';
+import TextIcon from '../../icons/text-icon.vue';
+import CalendarIcon from '../../icons/calendar-icon.vue';
 import {
   initDrillDownEmits,
   initDrillDownProps,
@@ -136,9 +136,9 @@ export default defineComponent({
         :class="`${DRILL_DOWN_PRE_CLASS}-menu-item`"
       >
         <template #icon>
-          <text-icon v-if="option.type === 'text'" />
-          <calendar-icon v-if="option.type === 'date'" />
-          <location-icon v-if="option.type === 'location'" />
+          <TextIcon v-if="option.type === 'text'" />
+          <CalendarIcon v-if="option.type === 'date'" />
+          <LocationIcon v-if="option.type === 'location'" />
         </template>
         {{ option?.name }}
       </MenuItem>

diff --git a/packages/s2-vue/src/icons/calendar-icon.vue b/packages/s2-vue/src/icons/calendar-icon.vue
@@ -0,0 +1,22 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'CalendarIcon',
+});
+</script>
+<template>
+  <svg
+    class="antv-s2-icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="12.6"
+    height="12.6"
+  >
+    <path
+      d="M950.016 898.016l-206.016-204.992Q832 586.016 832 448.032q0-159.008-112.512-271.488T448 64.032 176.512 176.544 64 448.032t112.512 271.488T448 832.032q138.016 0 244.992-88l206.016 206.016q10.016 10.016 24.992 10.016t26.016-10.016q10.016-11.008 10.016-26.016t-10.016-26.016zM568.992 736Q512 760 448 760T327.008 736q-56-24-99.488-67.488t-66.496-99.488q-24.992-56.992-24.992-120.992t24.992-120.992q23.008-56 66.496-99.488t99.488-67.488Q384 136.064 448 136.064t120.992 24q56 24 99.488 67.488t67.488 99.488q24 56.992 24 120.992t-24 120.992q-24 56-67.488 99.488T568.992 736z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git a/packages/s2-vue/src/icons/location-icon.vue b/packages/s2-vue/src/icons/location-icon.vue
@@ -0,0 +1,22 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'LocationIcon',
+});
+</script>
+<template>
+  <svg
+    class="antv-s2-icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="12.6"
+    height="12.6"
+  >
+    <path
+      d="M511.804 222.338c-57.117 0-105.737 20.061-145.86 60.184-40.122 40.123-60.184 88.569-60.184 145.337 0 56.769 20.062 105.214 60.185 145.337 40.122 40.123 88.742 60.185 145.859 60.185 57.116 0 105.736-20.062 145.859-60.185 40.123-40.123 60.184-88.568 60.184-145.337 0-56.768-20.061-105.214-60.184-145.337-40.123-40.123-88.743-60.184-145.86-60.184z m0 338.619c-36.729 0-68.007-12.925-93.835-38.774-25.827-25.85-38.752-57.127-38.773-93.834-0.022-36.707 12.902-68.16 38.773-94.357 25.872-26.197 57.15-39.285 93.835-39.263 36.685 0.022 67.963 13.11 93.834 39.263 25.871 26.154 38.796 57.606 38.774 94.357-0.022 36.75-12.946 68.028-38.774 93.834-25.828 25.806-57.106 38.73-93.834 38.774z m366.165-295.766c-21.084-42.168-50.327-79.223-87.73-111.165-37.404-31.941-79.898-57.105-127.484-75.491C614.472 60.845 564.155 52 511.804 52c-52.352 0-103.006 8.845-151.963 26.535-46.911 18.364-89.069 43.528-126.472 75.491-37.403 31.964-66.647 69.019-87.731 111.165C123.879 308.71 113 353.923 113 400.835c0 65.95 15.982 132.924 47.945 200.92 26.524 56.441 63.58 112.198 111.165 167.27 62.556 73.435 134.632 138.71 216.227 195.827 6.81 4.765 14.459 7.148 22.945 7.148 8.485 0 16.47-2.383 23.956-7.148 81.595-57.79 153.67-123.067 216.227-195.828 47.608-55.767 84.663-111.524 111.165-167.27 31.963-67.995 47.945-134.969 47.945-200.919 0-46.912-10.88-92.126-32.638-135.644h0.032z m-40.797 136.656c0 55.07-13.6 111.513-40.798 169.326-23.129 49.631-56.452 99.948-99.97 150.95-52.351 61.208-113.885 117.65-184.6 169.326-70.716-51.676-132.25-108.118-184.6-169.326-42.844-51.002-76.167-101.319-99.971-150.95-27.198-57.791-40.797-114.57-40.797-170.338 0-36.032 8.159-70.716 24.478-104.05 16.994-32.638 40.45-61.882 70.368-87.73 30.592-26.525 65.276-47.26 104.05-62.209 40.797-14.97 82.954-22.455 126.472-22.455 43.517 0 85.675 7.485 126.472 22.455 38.752 14.97 73.436 35.706 104.05 62.208 30.593 25.85 54.048 55.093 70.367 87.731 16.32 34.009 24.479 69.03 24.479 105.062z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git a/packages/s2-vue/src/icons/text-icon.vue b/packages/s2-vue/src/icons/text-icon.vue
@@ -0,0 +1,22 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'TextIcon',
+});
+</script>
+<template>
+  <svg
+    class="antv-s2-icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="12.6"
+    height="12.6"
+  >
+    <path
+      d="M86.016 805.888H0L143.872 275.968h79.36l144.896 529.92H276.992l-29.696-109.056H115.2s-29.696 109.056-29.184 109.056zM225.28 613.376L181.248 455.68 138.24 613.376h87.04zM519.168 430.08c24.576-16.384 47.616-25.088 69.12-25.088 30.72 0 58.368 14.848 81.92 44.032 24.064 29.184 35.328 72.192 35.328 128.512 0 44.032-7.168 83.456-22.528 118.272-14.848 34.816-35.328 62.976-60.416 83.456-26.112 20.992-57.856 31.232-95.232 31.232-15.36-0.512-31.232-1.536-46.592-3.584-4.096-0.512-8.704-1.024-12.8-1.536h-66.56V256h81.92v206.336c11.264-12.8 23.04-23.552 35.84-32.256z m-35.328 157.184v135.168c13.824 3.072 26.112 4.608 37.376 4.608 27.648 0 50.176-11.776 69.12-36.352 19.456-25.088 28.672-59.392 28.672-104.96 0-32.256-5.12-55.296-14.848-70.144-9.216-13.824-18.432-19.968-28.672-19.968-12.288 0-27.136 7.68-44.544 24.064-16.896 16.896-32.768 39.424-47.104 67.584zM1013.76 794.624c-36.864 14.336-71.68 20.992-104.96 20.992-32.768 0.512-64.512-9.216-91.648-27.136-27.136-18.432-48.64-44.032-62.464-73.728-14.848-30.72-22.528-65.536-22.528-104.448 0-58.88 16.896-108.032 51.2-146.944 33.792-38.912 75.264-58.88 123.392-58.88 34.304 0 70.144 7.168 108.032 21.504l10.24 4.096v95.232l-20.992-10.752c-34.816-17.92-65.536-26.624-92.16-26.624-16.896 0-32.768 4.608-47.104 13.824-13.824 8.704-25.088 23.04-32.768 42.496-8.192 19.968-12.288 41.472-12.288 63.488 0 28.672 7.68 55.808 24.064 82.432 14.848 24.576 37.888 36.352 71.168 36.352 10.752 0 21.504-1.024 31.744-2.56 9.728-1.536 29.696-8.192 58.88-18.944l19.456-7.68v92.672l-11.264 4.608z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git a/packages/s2-vue/src/svg/calendar-icon.svg b/packages/s2-vue/src/svg/calendar-icon.svg
diff --git a/packages/s2-vue/src/svg/location-icon.svg b/packages/s2-vue/src/svg/location-icon.svg
diff --git a/packages/s2-vue/src/svg/text-icon.svg b/packages/s2-vue/src/svg/text-icon.svg
diff --git a/packages/s2-vue/vite.config.ts b/packages/s2-vue/vite.config.ts
@@ -4,7 +4,6 @@ import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import path from 'path';
 import { UserConfig, defineConfig } from 'vite';
-import svgLoader from 'vite-svg-loader';
 import { getBaseConfig } from '../../build.config.base.mjs';
 
 const { getViteConfig, isDevMode } = getBaseConfig();
@@ -19,12 +18,6 @@ export default defineConfig({
     port: 5050,
     name: 's2-vue',
     libName: 'S2Vue',
-    plugins: [
-      vue(),
-      svgLoader({
-        defaultImport: 'component',
-      }),
-      vueJsx(),
-    ] as UserConfig['plugins'],
+    plugins: [vue(), vueJsx()] as UserConfig['plugins'],
   }),
 } as UserConfig);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml