feat: LegendIcons自定义icons (#225)

* feat: 自定义icons * feat: legendicon icon名称调整 --------- Co-authored-by: shengzheng <[email protected]>
antvis · Apr 10, 2024 · 2c7f7db · 2c7f7db
1 parent 9798189
commit 2c7f7db
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 5 deletions.
diff --git a/src/components/Legend/LegendIcon/demos/custom.tsx b/src/components/Legend/LegendIcon/demos/custom.tsx
@@ -0,0 +1,17 @@
+import { LegendIcon } from '@antv/larkmap';
+import React from 'react';
+
+export default () => {
+  return (
+    <div>
+      <LegendIcon
+        labels={['枫叶图标', '火车图标', '小汽车图标']}
+        icons={[
+          <img src="https://gw.alipayobjects.com/mdn/rms_5e897d/afts/img/A*6ONoRKNECC0AAAAAAAAAAAAAARQnAQ" />,
+          <img src="https://gw.alipayobjects.com/zos/bmw-prod/e21321e0-8f4a-474f-a0ee-2176492bb824.svg" />,
+          <img src="https://gw.alipayobjects.com/zos/bmw-prod/7fb22e05-4488-4597-8e33-fc03716d2b0a.svg" />,
+        ]}
+      />
+    </div>
+  );
+};
diff --git a/src/components/Legend/LegendIcon/index.less b/src/components/Legend/LegendIcon/index.less
@@ -6,7 +6,7 @@
     align-items: center;
     line-height: 2;
 
-    &__icon {
+    > *:first-child {
       width: 16px;
       height: 16px;
       margin-right: 10px

diff --git a/src/components/Legend/LegendIcon/index.md b/src/components/Legend/LegendIcon/index.md
@@ -21,8 +21,18 @@ nav:
 
 <code src="./demos/default.tsx" defaultShowCode></code>
 
+#### 自定义 icons
+
+<code src="./demos/custom.tsx" defaultShowCode></code>
+
 #### 在地图中展示
 
 <code src="./demos/map-default.tsx" compact defaultShowCode></code>
 
 <API></API>
+
+#### IconType
+
+```ts
+type IconType = string | React.ReactElement;
+```
diff --git a/src/components/Legend/LegendIcon/index.tsx b/src/components/Legend/LegendIcon/index.tsx
@@ -1,17 +1,26 @@
-import React from 'react';
 import classnames from 'classnames';
-import type { LegendIconProps } from './types';
+import React from 'react';
 import './index.less';
+import type { IconType, LegendIconProps } from './types';
 
 export const CLS_PREFIX = 'larkmap-legend-icon';
 
 export const LegendIcon = (props: LegendIconProps) => {
   const { labels, icons, className: cls, style } = props;
+
+  const renderIcon = (icon: IconType) => {
+    if (React.isValidElement(icon)) {
+      return icon;
+    } else if (typeof icon === 'string') {
+      return <img src={icon} />;
+    }
+  };
+
   return (
     <div className={classnames(`${CLS_PREFIX}`, cls)} style={style}>
       {labels.map((item, index) => (
         <div key={item} className={`${CLS_PREFIX}__content`}>
-          <img src={icons[index]} className={`${CLS_PREFIX}__content__icon`} />
+          {renderIcon(icons[index])}
           <div>{item}</div>
         </div>
       ))}

diff --git a/src/components/Legend/LegendIcon/types.ts b/src/components/Legend/LegendIcon/types.ts
@@ -1,8 +1,10 @@
 import type { CommonProps } from '../../../types/common';
 
+export type IconType = string | React.ReactElement;
+
 export interface LegendIconProps extends CommonProps {
   /** 图例项名称 */
   labels: string[];
   /** 图例项图标 */
-  icons: string[];
+  icons: IconType[];
 }