react + vite +ts 中封装svgicon组件
时间: 2023-10-31 17:04:25 浏览: 67
在 React + Vite + TypeScript 中封装 SVGIcon 组件可以按照以下步骤进行:
1. 创建一个新的组件文件,可以命名为 `SVGIcon.tsx`。
2. 引入 React 和 SVGIcon 的依赖:
```tsx
import React from 'react';
import { ReactComponent as MyIcon } from './path/to/your/icon.svg';
```
3. 定义 `SVGIconProps` 类型,用于传递属性给 SVGIcon 组件:
```tsx
type SVGIconProps = {
width?: number;
height?: number;
color?: string;
}
```
4. 创建 SVGIcon 组件,使用 `SVGIconProps` 类型来接收 props:
```tsx
const SVGIcon: React.FC<SVGIconProps> = ({ width, height, color }) => {
return (
<MyIcon
width={width}
height={height}
fill={color}
/>
);
}
```
5. 导出 SVGIcon 组件:
```tsx
export default SVGIcon;
```
6. 在其他组件中使用封装好的 SVGIcon 组件,传递相应的属性:
```tsx
import React from 'react';
import SVGIcon from './path/to/SVGIcon';
const App: React.FC = () => {
return (
<div>
<SVGIcon
width={24}
height={24}
color="red"
/>
</div>
);
}
export default App;
```
这样就完成了 React + Vite + TypeScript 中封装 SVGIcon 组件的过程。你可以根据自己的需要在 SVGIcon 组件中添加更多的属性或功能。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)