使用 Styled-components 修改 SVG (react / next)

Posted 2023-03-15

【中文标题】使用 Styled-components 修改 SVG (react / next)

【英文标题】：Modify SVG with Styled-components (react / next)

【发布时间】：2021-08-07 01:49:38

【问题描述】：

问题很具体，我在任何地方都没有找到。

简历：如何直接在 styled-components 以及其他图标中修改我的 JSX 标准 SVG 图标的属性？

详细信息：我知道使用 styled-components 我可以创建图标的“实例”并更改其属性，例如：

import IconTest from '@ styled-icons / ionicons-sharp / Apps'
export const SearchIcon = styled (IconTest) `
    width: 45px;
    height: 45px;
    color: # ff0000;
`

但是我创建了自己的 SVG 图标，把它变成了一个 JSX 组件，我可以正常使用它，无论是作为组件导入还是使用 styled-component。

import MyIcon from '../icons'
...
    export const MeuIcone = styled (MeuIcone) ``
...
<MyIcon />

图标正常呈现。一切都很好！问题是我的图标 ** 我不能像第一个示例一样将宽度、高度、颜色等属性直接传递给 syled-components **。它仅在我直接传递到组件时才有效，例如：

<MyIcon fill = '# ff0000' />

因为我的图标组件确实收到了这些道具。所以实际上这个问题可能类似于 “如何使用 styled-components 将属性传递给我的组件？”

【参考方案1】：

样式化组件allow pass properties 通过attrs 或直接：

const MyStyledIcon = styled(MyIcon).attrs(props => (

  /* Define a static prop, will be passed as an SVG attribute */ 
  width: 32,

  /* Define a dynamic prop, will be passed as an SVG attribute */
  height: props.height || 32,

))`

  /* Use a passed prop to define a style */ 
  fill: $props => props.fill;

  /* Use a constant style */
  stroke: '#fff';
`;

【讨论】：

测试成功！错过了attrs的存在:(。现在深入研究这个方法。非常感谢！