React编写可复用图标组件

import React, { forwardRef } from "react";
import { ReactComponent as Knowledge } from "./Knowledge.svg";

export const KnowledgeIcon = forwardRef<
    SVGSVGElement & { className: any },
    React.PropsWithChildren<{ className?: string }>
>(({className,...props}, ref) => {
    return <Knowledge ref={ref} {...props} className={className || ''}/>;
});

这段代码是一个使用React库编写的组件，它通过forwardRef高阶组件创建了一个可复用的图标组件。下面是对这段代码的详细介绍：

1. 导入React和forwardRef:

   • React 是React库的默认导出，它包含了创建React组件所需的所有功能。
   • forwardRef 是一个高阶组件，它允许将ref属性传递给被包装的组件。

2. 导入SVG图标:

   • 代码使用了import语句来导入一个名为Knowledge的SVG图标组件。这个图标组件是通过./Knowledge.svg路径引入的，这意味着它是一个SVG文件，被React作为组件处理。

3. 定义KnowledgeIcon组件:

   • KnowledgeIcon 是一个使用forwardRef创建的组件，它接受两个泛型参数：
     • 第一个泛型参数SVGSVGElement & { className: any }定义了组件的返回类型，即一个SVG元素，并且这个元素有一个className属性。
     • 第二个泛型参数React.PropsWithChildren<{ className?: string }>定义了组件的props类型，它包含一个可选的className属性，并且可以包含子元素。

4. 组件的实现:

   • 组件的实现是一个箭头函数，它接受一个对象参数{className, ...props}和一个ref参数。
   • {...props} 是使用展开运算符...来收集所有剩余的props，并将它们传递给Knowledge组件。
   • 如果className属性存在，它将被添加到组件的className中；如果不存在，则组件将使用一个空字符串作为className。

5. 渲染Knowledge图标:

   • 使用<Knowledge ref={ref} {...props} className={className || ''}/>来渲染图标。这里，ref被传递给Knowledge组件，允许父组件访问到这个SVG元素。{...props}将所有其他props传递给Knowledge组件。className属性根据条件渲染，如果传入了className，则使用传入的值，否则使用空字符串。

6. 组件的用途:

   • KnowledgeIcon组件可以被用于任何需要展示知识图标的地方，用户可以通过传递不同的className来改变图标的样式，也可以通过子元素来添加更多的内容。

这段代码展示了React中使用SVG图标和高阶组件forwardRef的一个常见模式，它允许开发者创建可复用且灵活的UI组件。

如果要修改的话，仿照上述模式就可以（但是这个是基于一个成熟的架构，我不清楚从头做是不是这样子）

import React, { forwardRef } from "react";
import { ReactComponent as Agent } from "./Agent.svg";

export const AgentIcon = forwardRef<
    SVGSVGElement & { className: any },
    React.PropsWithChildren<{ className?: string }>
>(({className,...props}, ref) => {
    return <Agent ref={ref} {...props} className={className || ''}/>;
});