Простой способ условно рендеринга styled-компонентов и SVG-иконок

Question

Мне было очень трудно найти способ для простого действия по визуализации аватара пользователя или значка SVG, если аватара не существует.

Я не нашел хороших примеров (или, может быть, яЯ просто плохо нахожу простые решения) и после многих дней борьбы нашел решение, но я не знаю, правильно ли то, что я делаю, и не поставит меня в тупик в будущем, потому что я хочу сделатьдругие компоненты с таким же шаблоном и без повторной обработки.

Поэтому я спрашиваю это сообщество, подходит ли этот способ для условного рендеринга стилевых компонентов и значков SVG?

Мой файл, где у меня естьвсе значки: Icon.js

import React from "react"

export class Vk extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
          <svg {...this.props} height="100" width="100">
           <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
          </svg> 
        )
    }
}

export class Ghost extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
<svg {...this.props} height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  Sorry, your browser does not support inline SVG.  
</svg> 
        )
    }
}

С помощью {... this.props} я могу изменить внешний вид моего SVG из компонента, в котором я их отображаю.

Теперь мой файл, гдеЯ хочу сделать аватар Profile.js

import React from "react"

import styled from 'styled-components'

// Here i import my avatar component
import Avatar from "src/shared/Avatar"



export default class Profile extends React.Component {
    constructor(props) {
        super(props)
        this.state = { showProfileMenu: false}
    }


    // Some function
    openCloseProfileMenu = () => {
        this.setState({ showProfileMenu: !this.state.showProfileMenu })
    }

    render() {
        return (
                 <ImportAvatar onClick={this.openCloseProfileMenu} profile={this.props.profile} size='50px' />
        )
    }
}

// Here i can style me avatar commponent
const ImportAvatar = styled(Avatar)`
        display: flex;
        cursor: pointer;
    `

И мой компонент Аватар Avatar.js

import React from "react"

//Here i import ONE svg icon
import { Ghost } from "src/shared/Icon"

import styled from 'styled-components'

export default class Avatar extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        // Here i destroy passed to component props, get and use what i need and pass to component what left with ...other
        const {
            profile,
            size,
            ...other
        } = this.props;

        // I will render svg or img, but they have common styles, so i place them in one place
        const commonStyle =
            `border-radius: 50%;
            height: ${size};
            width: ${size};
            box-shadow: 0 0 5px 2px ${profile.color};`

        // Here i use common and some specific for img styles 
        const AvatarImg = styled.img` 
        ${commonStyle} 
        height: 100%;`

         // I can render SVG component like this styled(props => <Ghost {...props} />) 
         // Here i use common and some specific for svg styles 
        const AvatarSvg = styled(props => <Ghost {...props} />)`
        ${commonStyle} 
        fill: grey;`

        // and finally i conditionnaly render component with passed attr, functions, styles and my own if i want
        return (
            profile.avatar
                ? <AvatarImg {...other} src={profile.avatar} alt={profile.nickname} />
                : <AvatarSvg {...other} />
        )
    }
}