react 封装svgIcon

import React from 'react';

const SvgIcon = ({ iconName, width = 24, height = 24, color = 'currentColor', ...props }) => {
  const icons = {
    // 在这里定义你的 SVG 图标，可以使用图标名称映射到相应的 SVG 路径
    heart: (
      <svg width="48" height="48" viewBox="0 0 48 48" fill="none"><path d="M44 9H4m38 20H6m28-10H14m20 20H14" stroke="#4E5969" strokeWidth="4" /></svg>
    ),

    // 添加其他图标...

  };

  const icon = icons[iconName] || null;

  return icon ? (
    <span
      role="img"
      aria-label={iconName}
      style={{ display: 'inline-block', width, height, color }}
      {...props}
    >
      {icon}
    </span>
  ) : null;
};

export default SvgIcon;

 css样式：

.svg-icon {

  display: inline-block;

  width: 1px;

  height: 1px;

  color: inherit;

  font-style: normal;

  vertical-align: -2px;

  outline: none;

  stroke: currentColor;

  fill: currentColor;

}

 使用：<SvgIcon iconName='heart'></SvgIcon>