Simple way to conditionnaly render styled-components and SVG icons

I had a really hard time trying to find a way for a simple action to render user avatar or SVG icon if avatar doesn't exist.

I didn't found any good examples (or maybe i'm just bad at finding simple solutions) and after many days of strugling came up with a solution, but i don't know if what i'm doing is right and will not get me in troble in future, because i want to do other components with the same pattern and not reworke after.

So i'm asking this community if this way for conditionnal render styled-components and SVG icons is right?

My file where i have all icons: 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> 
        )
    }
}

With {...this.props} i can change how my SVG looks like dinamicly from component where i render them.

Now my file where i want to render avatar 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;
    `


And my Avatar component 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} />
        )
    }
}