[英]How to apply style to an array of SVG elements
我有一组.svg
图标,其中每个图标都有一些我需要覆盖的属性:
<svg width="24" height="24" viewBox="0 0 24 24"> ... </svg>
import styled from 'styled-components';
import Github from 'assets/github.svg';
import Facebook from 'assets/facebook.svg';
import Twitter from 'assets/twitter.svg';
...
const icons = [
<Github />,
<Facebook />,
<Twitter />,
...
];
我想为每个图标应用相同的样式,而无需重复代码和使用CSS-in-JS
。
到目前为止,我的解决方案有一些问题:
// Works but,
// I want to use CSS-in-JS like styled-components
// for easier maintenance
const iconStyle = {
width: 50,
height: 50
};
const SocialBar = () => (
<IconBar as={FlexBox}>
{icons.map((icon, key) => (
<div key={key}>{React.cloneElement(icon, iconStyle)}</div>
))}
</IconBar>
);
// Works but,
// there are too many icons
const SocialBar = () => (
<IconBar as={FlexBox}>
<Github style={iconStyle} />
<Facebook style={iconStyle} />
...
</IconBar>
);
像这样的样式svg
组件将不起作用:
// Won't override the width="24" height="24" properties
const StyledIcon = styled(Github)`
width: 50;
height: 50;
`;
您可以用一个元素(如i
)包裹 SVG 并使用在样式组件中定义的一些 CSS 为其中的任何svg
子项设置样式(您也可以以g
和path
为目标)。 不幸的是,SVG 使用起来非常棘手,因此您可能需要手动将 SVG xml 复制/粘贴到 JS 文件中(如果您使用的是CRA ,则可以从 SVG导入ReactComponent )。
工作示例(将 SVG 复制/粘贴到 JS 文件中——第一个示例是默认值,第二个示例传入 props,第三个示例传入多个 props):
图标/ Icon.js(此组件接受生成的风格的部件className
和任何children
放在它里面)
import React from "react";
import PropTypes from "prop-types";
const Icon = ({ className, children }) => (
<i className={className}>{children}</i>
);
Icon.propTypes = {
className: PropTypes.string.isRequired,
children: PropTypes.node.isRequired
};
export default Icon;
Icon/index.js (这将为上面的Icon
组件设置样式;随后它将为children
组件设置样式)
import styled from "styled-components";
import Icon from "./Icon";
const StyledIcon = styled(Icon)`
margin: 0 20px;
svg {
fill: ${({ fill }) => fill || "#03a9f3"};
height: ${({ dimension }) => dimension || "50px"};
width: ${({ dimension }) => dimension || "50px"};
}
`;
export default StyledIcon;
这是一种方法。
//Github.js
import React from "react";
export default function Github({height, width}) {
return (
<svg width={width} height={height} viewBox="0 0 24 24"> ... </svg>
);
}
然后你想在哪里使用它。
<Github height={24} width={24} />
相对于您已有的代码示例,我不完全确定您的要求是什么。 你想避免使用React.cloneElement
吗? 将图标数组作为函数,而不是 jsx 元素。 map
其map
到 jsx 版本并将样式应用于每个
const icons = [
Github,
Facebook,
Twitter,
]
buildIcons() {
const style = {
//..
}
return icons.map((icon, idx) => (
<icon style={style} key={idx}/>
))
}
使用索引作为键是可行的,但如果您能找到每个图标独有的不同属性,那就更好了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.