react + vite +ts 中封装svgicon组件

在React + Vite + TypeScript中封装SVG Icon组件，您可以按照以下步骤进行操作：

1. 首先，创建一个名为`SvgIcon.tsx`的文件，用于定义SVG Icon组件。

import React from 'react';

interface SvgIconProps {
  name: string;
  className?: string;
  style?: React.CSSProperties;
}

const SvgIcon: React.FC<SvgIconProps> = ({ name, className, style }) => {
  const iconPath = `icons/${name}.svg`; // 假设您的SVG图标存放在一个名为icons的文件夹中

  return (
    <svg className={className} style={style}>
      <use xlinkHref={iconPath} />
    </svg>
  );
};

export default SvgIcon;

2. 然后，将您的SVG图标放置在`public`文件夹的`icons`子文件夹中。确保每个SVG图标都有一个唯一的名称。

3. 在您的组件中使用`SvgIcon`组件，并传递相应的图标名称作为`name` prop。

import React from 'react';
import SvgIcon from './SvgIcon';

const MyComponent: React.FC = () => {
  return (
    <div>
      <SvgIcon name="icon-name" className="icon-class" style={{ color: 'red' }} />
    </div>
  );
};

export default MyComponent;

这样，您就可以在React组件中使用自定义的SVG Icon组件了。记得在需要使用的地方引入`MyComponent`组件。