styled-components给svg添加动画

​​https://stackoverflow.com/questions/68043891/inherited-svg-functional-component-cannot-add-style-styled-components​​ 如下 直接继承react组件 然后添加样式居然无效

import styled, { keyframes } from "styled-components";

const LoadIconComponent = ({ color }: { color?: string }) => (
  <svg
    viewBox='0 0 1024 1024'
    version='1.1'
    xmlns='http://www.w3.org/2000/svg'
    p-id='2418'
    width='1rem'
    height='1rem'
  >
    <path
      d='...'
      p-id='2419'
      fill={color || "#FFFFFF"}
    ></path>
  </svg>
);

const animate = `
    0%{transform: rotate(0deg)};
    100%{transform: rotate(360deg)}
`;

const keyframe = keyframes`${animate}`;

const LoadIcon = styled(LoadIconComponent)`
  animation: ${keyframe} 1s linear;
`;

export default LoadIcon;

这样是可以的 就是有点费事

import styled, { keyframes } from "styled-components";

const animate = `
    0%{transform: rotate(0deg)};
    100%{transform: rotate(360deg)}
`;

const keyframe = keyframes`${animate}`;

const LoadIcon = styled.svg.attrs({
  children: (
    <path
      d='...'
      p-id='2419'
      fill='#FFFFFF'
    ></path>
  ),
  viewBox: "0 0 1024 1024",
  version: "1.1",
  xmlns: "http://www.w3.org/2000/svg",
  "p-id": "2418",
  width: "1rem",
  height: "1rem",
})`
  animation: ${keyframe} 1s linear infinite;
`;

export default LoadIcon;