Как вставить svg в React.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import React from "react";
import ReactDOM from "react-dom";
import { ReactComponent as Logo } from "./logo.svg";

function IconComponent() {
  return (
    <div>
      <Logo />
    </div>
  );
}

class App extends React.Component {
  render() {
    return <IconComponent />;
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

1

<img src="path/to/image.svg" alt="SVG image" />

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import React from 'react';

function MySVG() {
  return (
    <svg viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="50" fill="#F00" />
      <rect x="25" y="25" width="50" height="50" fill="#FFF" />
    </svg>
  );
}

export default MySVG;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import React from 'react';
import MySVG from './MySVG';

function App() {
  return (
    <div>
      <h1>SVG example</h1>
      <MySVG />
    </div>
  );
}

export default App;