CODEWITHSUNDEEP
reactjssvg
G.Baghashvili
G.Baghashvili

Reputation: 220

Use SVG file as React component

I have code like this:

<img src={category.svg} alt={category.name} />

It works, but as image not React component and I cannot any manipulation. SVG URL is changing dynamically and I cannot import or convert it. Do you have any ideas?

Upvotes: 0

Views: 716

Answers (1)

Rohit Khanna
Rohit Khanna

Reputation: 723

Create a custom react Component Svg like this

import { memo } from "react";
import inlinesvg from "react-inlinesvg";

const Svg = memo(inlinesvg);

export default Svg;

And now whenever you need to use this component, with a specific .svg file, use it like this:

import One from "resources/images/one.svg";
import Two from "resources/images/two.svg";
...
...

return  <Svg src={this.props.isOne ? One : Two}/>

Upvotes: 1

Related Questions