Блог

файл js, как

 import React from "react";

export default () => (
  <svg
    className="xxx"
    data-testid="ggg"
    width="20"
    height="20"
    viewBox="0 0 20 20"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="xxxx"        />
  </svg>
);
 

как импортировать это и использовать в других компонентах?

Это нормальный компонент:

 import MySvg from 'path/to/svg'

<MySvg />
 

Вы должны назвать свой компонент следующим образом

 import React from "react";

export class SvgIcon extends React.Component {
  render() {
    return (
  <svg
    className="xxx"
    data-testid="ggg"
    width="20"
    height="20"
    viewBox="0 0 20 20"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="xxxx"/>
  </svg>
    )
  }
}
 

И теперь вы можете использовать его:

 <SvgIcon/>
 

Не забудьте импортировать компонент

 import SvgIcon from "*component path*";