在React中使用样式组件将图像组件作为属性处理

Question

我有一个React项目，目标是没有.css文件。我目前正在重构现有的.css代码，以在Typescript React项目中使用样式化的组件。

以前，图片在.css类中被称为背景

a.item.overview {
  background: url(../img/overview.svg) no-repeat 16px 50% / 20px 20px;
  margin-top: 20px;
}

我对图像采取的方法是将.svg文件转换为React组件。

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>
)   

我现在想要实现的是创建一个组件，该组件使我可以将图像组件作为属性传递给它。

理想情况下，我将有一个menuItem组件，可以将图像组件传递给该菜单项并添加一些文本。类似于下面的示例。

我对React还是比较陌生，所以如果我的方法不正确或令人费解，我很乐意做出改变。

这是我尝试过的方法，但是没有用

type Props = {
    image: React.ReactNode
  }

export const LMenuItem = ({image}: Props) => (
    <div>{image}</div>
)

Answer 1

这种方法终于奏效了。

grad_w(2)= grad_w(1) + grad_s(2) * S(1)