CODEWITHSUNDEEP
reactjs
Alex Zhang
Alex Zhang

Reputation: 1

How to import svg saved as js file in react

the js file like

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>
);

how to import this and used in other components?

Upvotes: 0

Views: 32

Answers (2)

Dennis Vash
Dennis Vash

Reputation: 53984

Its a normal component:

import MySvg from 'path/to/svg'

<MySvg />

Upvotes: 1

FierceDev
FierceDev

Reputation: 705

You should name your component like

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>
    )
  }
}

And now you can use it:

<SvgIcon/>

Don't forget import component

import SvgIcon from "*component path*";

Upvotes: 0

Related Questions