使用 SVG 元素反应打字稿

Question

我的组件不断出现错误，其中图标元素的图标映射，下面是我的代码的错误消息。我尝试通过搜索来定义类型，但我仍然收到类型错误消息的红色下划线

SVGProps<SVGSVGElement> | Element;

。SvgIconProps

在下面的代码和沙箱中的代码：

https://codesandbox.io/p/sandbox/svg-43x2gz?file=%2Fsrc%2FApp.tsx%3A38%2C16

Type '({ icon, width, height, fill, className, }: SvgIconProps) => string | Element | JSX.Element | SVGProps<SVGSVGElement>' is not assignable to type 'FC<SvgIconProps>'.
  Type 'string | Element | JSX.Element | SVGProps<SVGSVGElement>' is not assignable to type 'ReactNode'.
    Type 'Element' is not assignable to type 'ReactNode'.
      Type 'Element' is missing the following properties from type 'ReactPortal': type, props, key

提前致谢！

Answer 1

import React, { SVGProps } from "react";

type iconListType = {
  [key: string]: string | SVGProps<SVGSVGElement> | Element;
};

export const iconList: iconListType = {
  fillOn:
    "M8 2H16C17.6569 2 19 3.34315 19 5V19C19 20.6569 17.6569 22 16 22H8C6.34315 22 5 20.6569 5 19V5C5 3.34315 6.34315 2 8 2ZM16 20.5C16.8284 20.5 17.5 19.8284 17.5 19V5C17.5 4.17157 16.8284 3.5 16 3.5H8C7.17157 3.5 6.5 4.17157 6.5 5V19C6.5 19.8284 7.17157 20.5 8 20.5H16ZM12.5 5H8V10H12.5V5ZM9.51 8.5H11V6.5H9.51V8.5ZM8 14.5H16V16H8V14.5ZM16 17.5H8V19H16V17.5ZM16 10H14V8.51H16V10ZM16 11.5H8V13H16V11.5Z",
  ,
  ads: (
    <svg
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      className="pr-1"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M10.75 15.4999C11.1642 15.4999 11.5 15.1641 11.5 14.7499C11.5 14.3356 11.1642 13.9999 10.75 13.9999C10.3358 13.9999 10 14.3356 10 14.7499C10 15.1641 10.3358 15.4999 10.75 15.4999Z"
        fill="#F6F6F9"
      />
      <path
        d="M19.27 8.99985L14.16 5.99985C13.9906 5.90762 13.7922 5.88421 13.6059 5.9345C13.4197 5.98478 13.26 6.10488 13.16 6.26985C13.0652 6.43872 13.0404 6.63801 13.0909 6.82497C13.1414 7.01192 13.2631 7.17164 13.43 7.26985L18.54 10.2699C18.8478 10.4443 19.1038 10.6972 19.282 11.0029C19.4601 11.3086 19.5539 11.6561 19.5539 12.0099C19.5539 12.3636 19.4601 12.7111 19.282 13.0168C19.1038 13.3225 18.8478 13.5754 18.54 13.7499L7.54003 20.2299C7.23599 20.4054 6.8911 20.4978 6.54003 20.4978C6.18895 20.4978 5.84406 20.4054 5.54003 20.2299C5.23482 20.0536 4.98159 19.7999 4.80598 19.4944C4.63037 19.1888 4.53863 18.8423 4.54003 18.4899V5.48985C4.53863 5.13743 4.63037 4.7909 4.80598 4.48534C4.98159 4.17979 5.23482 3.92606 5.54003 3.74985C5.84406 3.57431 6.18895 3.4819 6.54003 3.4819C6.8911 3.4819 7.23599 3.57431 7.54003 3.74985L10 5.24985V11.9999C10 12.1988 10.079 12.3895 10.2197 12.5302C10.3603 12.6708 10.5511 12.7499 10.75 12.7499C10.9489 12.7499 11.1397 12.6708 11.2804 12.5302C11.421 12.3895 11.5 12.1988 11.5 11.9999V4.81985C11.4996 4.6888 11.4653 4.56008 11.4005 4.44619C11.3357 4.33229 11.2425 4.2371 11.13 4.16985L8.26003 2.48985C7.73118 2.17856 7.12869 2.0144 6.51503 2.0144C5.90136 2.0144 5.29887 2.17856 4.77003 2.48985C4.23518 2.79278 3.78983 3.23159 3.47902 3.76189C3.16821 4.2922 3.00297 4.89518 3.00003 5.50985V18.5099C2.99767 19.1296 3.16039 19.7388 3.47147 20.2748C3.78255 20.8109 4.23076 21.2544 4.77003 21.5599C5.29887 21.8711 5.90136 22.0353 6.51503 22.0353C7.12869 22.0353 7.73118 21.8711 8.26003 21.5599L19.26 15.0799C19.7866 14.7685 20.2229 14.3254 20.526 13.794C20.8291 13.2627 20.9885 12.6616 20.9885 12.0499C20.9885 11.4381 20.8291 10.837 20.526 10.3057C20.2229 9.77435 19.7866 9.33118 19.26 9.01985L19.27 8.99985Z"
        fill="#F6F6F9"
      />
    </svg>
  ),
};

interface SvgIconProps {
  icon: string;
  fill?: string;
  className: string;
  width?: number;
  height?: number;
}

export const SvgIcon: React.FC<SvgIconProps> = ({
  icon = "",
  width = 16,
  height = 16,
  fill,
  className,
}) => {
  const iconCheck = typeof iconList[icon] === "string";
  return icon && iconCheck ? (
    <svg
      width={width}
      height={height}
      fill={fill}
      viewBox="0 0 24 24"
      className={className}
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d={iconList[icon]}
        fill={fill}
      />
    </svg>
  ) : (
    iconList[icon]
  );
};

而不是

React.ReactNode

。所以，这个类型改为添加

Element

React.ReactNode

有时，

type iconListType = {
  [key: string]: string | SVGProps<SVGSVGElement> | React.ReactNode;
};

导入无法正常工作。如果在某些情况下不起作用，则通过

React

 导入 React