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?"