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 }) => (
);
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: (
d='...'
p-id='2419'
fill='#FFFFFF'
>
),
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;