Using an SVG as a background image styled-components

Asked Feb 06 '19 at 15:20

Active Jul 14 '21 at 22:30

Viewed 1,921 times

I have an svg image that I want to use as a background in a styled-component.

My code looks like this

import { ReactComponent as BackgroundImage } from './img/BackgroundImage.svg';

const StyledDiv = styled.div`
   background: url(${BackgroundImage});
`

This is giving an error, which is a typescript error.

Argument of type 'FunctionComponent>' is not assignable to parameter of type 'Interpolation & SVGProps & { children?: ReactNode; }, any>>'.

here is the code for the svg

<svg width="11px" height="12px" viewBox="0 0 11 12" xmlns="http://www.w3.org/2000/svg">
  <path d="M5.984 10.08l4.324-4.445.692.711L5.5 12 0 6.346l.692-.71 4.324 4.444V0h.968z" fill="currentColor" fill-rule="evenodd"/>
</svg>

edited Jul 14 '21 at 22:30

Grant Humphries

2,696
2
23
24

asked Feb 06 '19 at 15:20

peter flanagan

9,195
26
73
127

Can you post BackgroundImage? It is a string? – Tazo leladze Feb 06 '19 at 15:38
it is an svg - updated the question – peter flanagan Feb 06 '19 at 15:40
Does it help you? https://medium.com/@ians/rendering-svgs-as-images-directly-in-react-a26615c45770 – Tazo leladze Feb 06 '19 at 15:42
@Tazoleladze thanks for this, I did see I could do this but ideally I don't want to paste the svg string in the component, but maybe I have to – peter flanagan Feb 06 '19 at 15:43
Your post is an duplicate, [here is the answer](https://stackoverflow.com/questions/51244463/react-svg-component-as-background-image-to-div). – Dragos matianu Feb 06 '19 at 15:44

Using an SVG as a background image styled-components

0 Answers0