Simple way to conditionally render styled-components and SVG icons - reactjs

Question

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 struggling came up with a solution, but i don't know if what I'm doing is right and will not get me in trouble in future, because I want to do other components with the same pattern and not rework after.
So I'm asking this community if this way for conditional render styled-components and SVG icons is right?
My file where I have all the 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 conditionally 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} />
)
}
}