通用样式组件图标

Question

我正在使用样式化组件对react组件进行样式化。我想要一个图标组件，只需改变大小、颜色道具等，就可以在不同的地方使用。我还想将图标名称作为道具传递给不同的地方。我成功地更改了尺寸和颜色，但不知道如何根据要求传递图标名称。

这是我的通用图标组件：

import React from "react";
import { ReactSVG } from "react-svg";
import styled, { css } from "styled-components";
import { FaUserTie } from 'react-icons/fa';


const StyledSVGIcon = styled(FaUserTie)`
svg {
fill: black;
${({ size }) =>
size &&
css`
width: ${size};
height: ${size};
`}
${({ transform }) =>
transform &&
css`
transform: ${transform};
`}
path {
${({ color }) =>
color &&
css`
fill: ${color};
`}
}
}
`;

const GenIcon = props => {
return (
<StyledSVGIcon
src={`/icons/${props.name}.svg`}
color={props.color}
size={props.size}
transform={props.transform}
/>
);
};

export default GenIcon;

我想这样使用它：

<GenIcon
name="FaUserNurse"
color="red"
size="16px"
/>

但是GenIcon组件不起作用。请帮我哪里做错了。图标可以是任何类型的svg或任何其他react图标库。

Answer 1

试试这个，你就接近了：

import React from "react";
import { ReactSVG } from "react-svg";
import styled, { css } from "styled-components";
import { FaUserTie, FaDocker } from "react-icons/fa";
const IconStyler = styled.span`
color: ${(props) => props.color};
& svg {
${(props) =>
props.small &&
css`
width: 14px !important;
height: 14px !important;
`}
${(props) =>
props.med &&
css`
width: 20px !important;
height: 20px !important;
`}
${(props) =>
props.large &&
css`
width: 28px !important;
height: 28px !important;
`}
}
`;
const Icon = ({ children, ...props }) => {
return <IconStyler {...props}>{children}</IconStyler>;
};
const GenIcon = () => {
return (
<div>
<h5>Any Icon</h5>
<div>
<Icon color="blue" small>
<FaUserTie />
</Icon>
</div>
<div>
<Icon color="orange" large>
<FaDocker />
</Icon>
</div>
</div>
);
};
export default GenIcon;

这里有一个沙箱链接：https://codesandbox.io/s/flamboyant-allen-60ho1?file=/src/GenIcon.js