fix: 修复 react, vue component 层的 svg 问题 close #2990

packages/s2-react-components/src/components/common/icons/calendar-icon.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export function CalendarIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={12.6}
+      height={12.6}
+      className="antv-s2-icon"
+      viewBox="0 0 1024 1024"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M950.016 898.016 744 693.024q88-107.008 88-244.992 0-159.008-112.512-271.488T448 64.032 176.512 176.544 64 448.032 176.512 719.52 448 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.016M568.992 736Q512 760 448 760t-120.992-24q-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.488q56.992-24 120.992-24t120.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 736"
+      />
+    </svg>
+  );
+}

packages/s2-react-components/src/components/common/icons/col-icon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export function ColIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={12}
+      height={12}
+      className="antv-s2-icon"
+      {...props}
+    >
+      <g fill="currentColor" fillRule="nonzero">
+        <path d="M4.457 11.229h6.772V3.77H4.457zm-.686 0V3.77h-3v7.543h3zM11.23 3V.771H.77V3zM12 0v12H0V0z" />
+        <path d="M.771.771H11.23V3H.77z" />
+      </g>
+    </svg>
+  );
+}

packages/s2-react-components/src/components/common/icons/index.tsx

@@ -1,9 +1,8 @@
 import './index.less';
-import { ReactComponent as CalendarIcon } from './svg/calendar-icon.svg';
-import { ReactComponent as ColIcon } from './svg/col-icon.svg';
-import { ReactComponent as LocationIcon } from './svg/location-icon.svg';
-import { ReactComponent as RowIcon } from './svg/row-icon.svg';
-import { ReactComponent as TextIcon } from './svg/text-icon.svg';
-import { ReactComponent as ValueIcon } from './svg/value-icon.svg';
 
-export { CalendarIcon, ColIcon, LocationIcon, RowIcon, TextIcon, ValueIcon };
+export * from './calendar-icon';
+export * from './col-icon';
+export * from './location-icon';
+export * from './row-icon';
+export * from './text-icon';
+export * from './value-icon';

packages/s2-react-components/src/components/common/icons/location-icon.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export function LocationIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={12.6}
+      height={12.6}
+      className="antv-s2-icon"
+      viewBox="0 0 1024 1024"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M511.804 222.338q-85.675 0-145.86 60.184-60.183 60.185-60.184 145.337 0 85.153 60.185 145.337 60.183 60.185 145.859 60.185 85.674 0 145.859-60.185 60.184-60.184 60.184-145.337t-60.184-145.337-145.86-60.184zm0 338.619q-55.093 0-93.835-38.774t-38.773-93.834q-.033-55.061 38.773-94.357 38.808-39.296 93.835-39.263 55.028.033 93.834 39.263t38.774 94.357q-.033 55.125-38.774 93.834t-93.834 38.774m366.165-295.766q-31.626-63.252-87.73-111.165-56.106-47.912-127.484-75.491Q590.331 52 511.804 52q-78.528 0-151.963 26.535-70.367 27.546-126.472 75.491t-87.731 111.165Q113 330.468 113 400.835q0 98.926 47.945 200.92 39.787 84.662 111.165 167.27 93.834 110.152 216.227 195.827Q498.553 972 511.282 972q12.727 0 23.956-7.148 122.392-86.686 216.227-195.828 71.412-83.65 111.165-167.27 47.945-101.993 47.945-200.919 0-70.367-32.638-135.644zm-40.797 136.656q0 82.606-40.798 169.326-34.693 74.447-99.97 150.95-78.527 91.812-184.6 169.326-106.075-77.514-184.6-169.326-64.265-76.503-99.971-150.95-40.797-86.686-40.797-170.338 0-54.048 24.478-104.05 25.491-48.957 70.368-87.73 45.889-39.786 104.05-62.209 61.195-22.455 126.472-22.455t126.472 22.455q58.129 22.455 104.05 62.208 45.889 38.775 70.367 87.731 24.48 51.014 24.479 105.062"
+      />
+    </svg>
+  );
+}

packages/s2-react-components/src/components/common/icons/row-icon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export function RowIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={12}
+      height={12}
+      className="antv-s2-icon"
+      {...props}
+    >
+      <g fill="currentColor" fillRule="evenodd">
+        <path d="M.771 3.771h3v1.886h-3zm0 2.572h3V8.57h-3zM.771 9h3v2.229h-3z" />
+        <path d="M.771 9v2.229H11.23V3.77H.77v1.886h3V3.771h.772v7.543H3.77V9.086h-3zm0-.771h3V6.343h-3zM11.23 3V.771H.77V3zM12 0v12H0V0z" />
+      </g>
+    </svg>
+  );
+}

packages/s2-react-components/src/components/common/icons/text-icon.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export function TextIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={12.6}
+      height={12.6}
+      className="antv-s2-icon"
+      viewBox="0 0 1024 1024"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M86.016 805.888H0l143.872-529.92h79.36l144.896 529.92h-91.136l-29.696-109.056H115.2S85.504 805.888 86.016 805.888M225.28 613.376 181.248 455.68 138.24 613.376zM519.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-.512-31.232-1.536-46.592-3.584-4.096-.512-8.704-1.024-12.8-1.536h-66.56V256h81.92v206.336c11.264-12.8 23.04-23.552 35.84-32.256M483.84 587.264v135.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.584m529.92 207.36c-36.864 14.336-71.68 20.992-104.96 20.992-32.768.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.672z"
+      />
+    </svg>
+  );
+}

packages/s2-react-components/src/components/common/icons/value-icon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export function ValueIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={12}
+      height={12}
+      className="antv-s2-icon"
+      {...props}
+    >
+      <g fill="currentColor" fillRule="evenodd">
+        <path d="M4.229 3.771h7v8h-7z" />
+        <path d="M4.457 11.229h6.772V3.77H4.457zm-.686 0V3.77h-3v7.543h3zM11.23 3V.771H.77V3zM12 0v12H0V0z" />
+      </g>
+    </svg>
+  );
+}

packages/s2-react-components/vite.config.ts

@@ -5,7 +5,6 @@ import react from '@vitejs/plugin-react';
 import path from 'path';
 import type { UserConfig } from 'vite';
 import { defineConfig } from 'vite';
-import svgr from 'vite-plugin-svgr';
 import { getBaseConfig } from '../../build.config.base.mjs';
 
 const { getViteConfig, isDevMode } = getBaseConfig({
@@ -27,7 +26,6 @@ export default defineConfig({
       react({
         jsxRuntime: 'classic',
       }),
-      svgr(),
     ] as UserConfig['plugins'],
   }) as UserConfig),
 });

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"
   },

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',
       },
     ],
   },

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>

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>