CODEWITHSUNDEEP
cssreactjssvg
user1589188
user1589188

Reputation: 5736

Include SVG asset as component in React

I was using the normal way to display an SVG asset, e.g.

import pic from "../assets/pic.svg";
const myPic = () => <img src={pic}/>;

This works as pic becomes the path to the svg picture.

Now I want to make the picture response to its background colour to change its fill colour. I have tried the CSS way to change the fill property, which works, but only when I have the svg content inline instead of setting it as an img src, e.g.

const myPic = () => <svg>.....</svg>;

My question is, if I still want to import the svg picture from assets folder (because the svg picture is quite big I don't want to put it inline), the first method above would return a path instead of the content of the svg as string, so how do you import an svg asset as string? Or feel free to suggest alternatives to achieve displaying an svg with dynamic contrast colour.

Upvotes: 0

Views: 777

Answers (1)

Matthew Kwong
Matthew Kwong

Reputation: 2957

The answer is different depending on which toolchain you are using. If you are using Create React App:

import { ReactComponent as Pic} from '../assets/pic.svg';

// code omitted...

// Use it like normal components
return <Pic />;

https://create-react-app.dev/docs/adding-images-fonts-and-files

Do inform me if you are using a different toolchain.

Upvotes: 1

Related Questions