如何在 React 中更改 svg 样式图标的颜色？答案

【问题标题】：How to change the color of svg styled icon in React?如何在 React 中更改 svg 样式图标的颜色？
【发布时间】：2021-04-18 14:42:09
【问题描述】：

const MyIconContainer = styled(IconAlt)`
  margin-bottom: -1px;
`;

我不知道为什么，但是改变“IconAlt”的颜色一直很棘手。我尝试将其设置在边距底部下方，类似于

color: ${props => props.theme.gray.darker}

但这对图标本身没有影响——我认为它只是影响“容器”。

【问题讨论】：

标签： reactjs typescript web

【解决方案1】：

啊，我刚刚想通了。有一个包含 IconContainer 的外部段落，其中是一个 svg 属性，它让我可以选择填充某种颜色。所以我把它改成了：

const MyStatus = styled.p`
  margin: 0px;
  svg {
    fill: ${props => props.theme.gray.darker}; //<-- here is where I needed to set the color
  }
  font-size: 14px;
  font-weight: 600;
`;

这改变了我的图标颜色。

【讨论】：

【解决方案2】：

1-（最好的方法）：

为所有图标创建一个组件，并像这样导出所有图标，并为 svg 的每个填充属性设置道具颜色，然后使用它<Icon color="red" />

export const Icon= ({ size, color }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      fill={color}
      viewBox="0 -192 512 512"
    >
      <path d="M320 64c0 35.348-28.652 64-64 64s-64-28.652-64-64 28.652-64 64-64 64 28.652 64 64zm0 0M128 64c0 35.348-28.652 64-64 64S0 99.348 0 64 28.652 0 64 0s64 28.652 64 64zm0 0M512 64c0 35.348-28.652 64-64 64s-64-28.652-64-64 28.652-64 64-64 64 28.652 64 64zm0 0"></path>
    </svg>
  );
};

2：样式化组件方式：

  const Icon = styled.svg(
      ({ color }) => ({
        fill:color,
      })
    );

      export const MyIcon = ({color}) => {

      return(
    
    <Icon
      xmlns="http://www.w3.org/2000/svg"
      fill={color}
      viewBox="0 -192 512 512"
    >
      <path d="M320 64c0 35.348-28.652 64-64 64s-64-28.652-64-64 28.652-64 64-64 64 28.652 64 64zm0 0M128 64c0 35.348-28.652 64-64 64S0 99.348 0 64 28.652 0 64 0s64 28.652 64 64zm0 0M512 64c0 35.348-28.652 64-64 64s-64-28.652-64-64 28.652-64 64-64 64 28.652 64 64zm0 0"></path>
    </Icon>
    
    );
};

【讨论】：