如何将样式应用于 SVG 元素数组

Posted 2023-03-16

【中文标题】如何将样式应用于 SVG 元素数组

【英文标题】：How to apply style to an array of SVG elements

【发布时间】：2019-11-27 22:38:33

【问题描述】：

我有一个.svg 图标数组，其中每个图标都有一些我需要覆盖的属性：

<svg   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   properties
const StyledIcon = styled(Github)`
  width: 50;
  height: 50;
`;

【参考方案1】：

您可以用一个元素（如 i）包装 SVG，并使用在 styled-component 中定义的一些 CSS 为其中的任何 svg 子元素设置样式（您也可以将 g 和 path 定位为好吧）。不幸的是，SVG 很难使用，因此您可能需要手动将 SVG xml 复制/粘贴到 JS 文件中（如果您使用的是CRA，则可以导入@987654322 @)。

工作示例（将 SVG 复制/粘贴到 JS 文件中——第一个示例是默认示例，第二个示例传入 props，第三个示例传入多个 props）：

---

Icon/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;

【参考方案2】：

这是一种方法。

//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 />

【讨论】：

它有什么帮助？我如何将它应用于图标数组？这就像应用内联样式，这样我需要为每个图标制作一个函数。

【参考方案3】：

相对于您已有的代码示例，我不完全确定您的要求是什么。您是否试图避免使用React.cloneElement？将图标数组作为函数，而不是 jsx 元素。 map 将其添加到 jsx 版本并将样式应用于每个

const icons = [
  Github,
  Facebook,
  Twitter,
]

buildIcons() 
  const style = 
    //..
  
  return icons.map((icon, idx) => (
    <icon style=style key=idx/>
  ))

使用索引作为键是可行的，但如果你能找到每个图标唯一的不同属性，那就更好了。

【讨论】：

这样吗？ cssinjs.org/?v=v10.0.0-alpha.22 jss 似乎有多个 HOC 可供您使用