Display svg asset with custom fill color

Asked Jun 26 '19 at 08:28

Active Jun 26 '19 at 08:40

Viewed 104 times

I have some svg files in my project assets.

Using them as the src of img works fine, but I cannot set their fill color.

<img src={require('./assets/foo.svg')} alt={props.svg} />

Using some examples, I tried to use svg-use combo, but it resulted with a 0x0 use element.

<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="80" height="80" viewBox="0 0 32 32">
  <use xlinkHref={require('./assets/foo.svg')} width="80" height="80"/>
</svg>

What is the correct way to define an svg element from a real svg asset? Without of course copying the content of the file.

edited Jun 26 '19 at 08:40

asked Jun 26 '19 at 08:28

Mugen

8,301
10
62
140

how did you try to set the fill colour? I usually just use css to set fill on the entire svg – Mathijs Segers Jun 26 '19 at 08:41
indeed the duplicated question is working for me. specifically this answer: https://stackoverflow.com/a/35126817/1236401 – Mugen Jun 26 '19 at 09:00
So you're going to use jQuery for something trivial. Nice. – Mathijs Segers Jun 26 '19 at 09:07
you're welcome to propose a trivial solution in that question – Mugen Jun 26 '19 at 09:30
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use ---------------------- – vssadineni Jun 26 '19 at 10:44
@vssadineni this doesn't use my `foo.svg` – Mugen Jun 26 '19 at 12:19
sorry I was trying to help you to resolve this issue, and not trying to solve it. please replace the path d in the above example with your foo.svg path or other paths and do update the viewbox values as per your foo.svg viewbox and it should work. – vssadineni Jul 02 '19 at 07:24

Display svg asset with custom fill color

0 Answers0