Modify SVG with Styled-Components (React/next)

Asked

Viewed 49 times

0

The problem is specific and found nowhere.

Summary: How I could modify the properties of my standard JSX SVG icon directly in Styled-Components as well as other icons?

Details: I know with Styled-Component can create "an instance" of an icon and change its type properties:

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

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

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

The icone renders normally. All right! The problem is that with my icone i can’t pass properties like width, height, color and etc directly on syled-Components, just like the first example. It only works if I pass directly into the component, like:

<MeuIcone fill='#ff0000' />

Because my icone component I did receive these props. So actually the question would be something like "How to pass properties to my component using Styled-Components?"

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.