Modify SVG with Styled-components (react / next)

Question

The problem is specific and I have not found it anywhere.

Resume: How could I modify the properties of my JSX standard SVG icon directly in the styled-components as well as other icons?

Details: I know that with styled-components I can create "an instance" of an icon and change its properties like:

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

But I created my own SVG icon, turned it into a JSX component and I can use it normally, either using importing as a component or with styled-component.

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

The icon renders normally. All very well! The problem is that with my icon ** I can't pass properties like width, height, color and etc right into syled-components **, just like the first example. It only works if I pass directly into the component, like:

<MyIcon fill = '# ff0000' />

Because my icon component I did receive these props. So actually the question would be something like "How do I pass properties to my component using styled-components?"

Michael Rovinsky Michael Rovinsky · Accepted Answer · 2021-05-17T20:07:51

Styled components allow pass properties via attrs or directly:


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';
`;

Modify SVG with Styled-components (react / next)

1 Answers