создать-реагировать-приложение Реагировать производительность с SVG как ReactComponent и eslint с отсутствующим отображаемым именем React.memo

Question

Я использую этот компонент в create-react-app приложении:

import { ReactComponent as ProfileIcon } from "./icons/profile.svg";

...
render(){
  <ProfileIcon {...props}/>
}

Также использую why-did-you-render (https://github.com/welldone-software/why-did-you-render) Я получил это предупреждение:

SvgProfileIcon
whyDidYouRender.min.js:1191 {SvgProfileIcon: ƒ} "Re-rendered because the props object itself changed but it's values are all equal." "This could of been avoided by making the component pure, or by preventing it's father from re-rendering."
whyDidYouRender.min.js:1191 prev props: {svgRef: null, className: "icon", height: "24", width: "24"} !== {svgRef: null, className: "icon", height: "24", width: "24"} :next props

Так что я сделал кастом PureComponent, например:

import React from "react";

export default WrappedComponent =>
  React.memo(props => <WrappedComponent {...props} />, () => true);

ПЕРВЫЙ ВОПРОС : Это правильно?

Я использую его так:

import { ReactComponent as ProfileIcon } from "./icons/profile.svg";

import PureComponent from "./PureComponent";

const PureProfileIcon = PureComponent(ProfileIcon);

...
render(){
  <PureProfileIcon {...props}/>
}

ВТОРОЙ ВОПРОС : Можно ли вообще избежать этого компонента, используя React.memo (или что-то еще) по-другому?

Теперь eslint жалуется на:

Component definition is missing display name eslint(react/display-name)

ТРЕТИЙ ВОПРОС : Как я могу это исправить?