In my React project, I am working towards eliminating the use of .css files. Currently, I am refactoring existing .css code to utilize styled-components in a Typescript React project.
Previously, images were included as backgrounds in a .css class
a.item.overview {
background: url(../img/overview.svg) no-repeat 16px 50% / 20px 20px;
margin-top: 20px;
}
My approach for handling images involves converting the .svg files into react components.
import React from 'react'
import styled from 'styled-components'
import Icon from './Icon'
const Svg = styled(Icon)`
margin-top: 20px;
fill: red;
height: 20px;
width: 20px;
fill-rule:evenodd;
clip-rule:evenodd;
`
export const OverviewIcon = () => (
<Svg viewBox="0 0 20 20">
<path
d="X4.2,2.5k11.2c0...."
/>
</Svg>
)
Now, I am aiming to create a component that will allow me to pass my image component as a property.
My goal is to have a single menuItem component where I can simply pass an image component and add text. Similar to the example below. https://i.sstatic.net/gNKSJ.png
As I am new to React, I am open to feedback on whether my approach is incorrect or too complicated.
I tried the following approach but encountered issues:
type Props = {
image: React.ReactNode
}
export const LMenuItem = ({image}: Props) => (
<div>{image}</div>
)