如何使用样式化组件将SVG文件添加到React Component

Question

如何使用样式化组件在React Component中使用SVG文件。我想在StyledLogo的道具中提供徽标。我该怎么办？

import logo from "../../assets/save.svg"

const StyledLogo = styled.div`
  width: 50px;
  height: 50px;
  margin: 10px 10px;
  background-image: url(${props => props.mylogo});

render() {
    return (
      <StyledDevice>
        <StyledLogo mylogo={logo} />
        <StyledWrapper>

Answer 1

我这样使用它：

import React, { forwardRef } from 'react'

const SomeIcon = forwardRef((props, ref) => {
  return (
    <svg xmlns='http://www.w3.org/2000/svg' height={'2rem'} {...props} ref={ref} viewBox='0 0 26.458332 26.458333'>
      // here is svg code
    </svg>
  )
})

SomeIcon.displayName = 'SomeIcon'
export { SomeIcon }