SVG with icons not updating after change

Profesor08 commented 5 months ago

Link to the code that reproduces this issue

https://stackblitz.com/edit/stackblitz-starters-dwwset

To Reproduce

Start application
Edit color of icon in /public/icons.svg

Current vs. Expected behavior

Current behavior:

Color remains same as before

Expected behavior:

Color is changed

Provide environment information

Windows 11
Chrome 125
nextjs: 13.5.1 - 14.2.3

Which area(s) are affected? (Select all that apply)

Developer Experience, Image (next/image)

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local)

Additional context

I have disabled cache in browser (Network/disable cache). The only way to force update is to stop dev server, delete content of .next folder, and to start server again

despino-streaver commented 5 months ago

I've just downloaded the repo and couldn't reproduce this issue.

Profesor08 commented 5 months ago

It is something weird. May be this behavior happens because of the way how file is included <use href={/icons.svg#check_box}></use>? Or may be some additional headers are required to make this to work?

There is video how it looks

https://github.com/vercel/next.js/assets/8218016/2bddb745-6491-4bdc-82ab-a8656460cff5

WizardRRR commented 5 months ago

trashed

Avik-creator commented 5 months ago

Issue Summary

The fill attribute set on the <use> element within our SVG was not updating as expected, causing the icons to retain their original color despite changes. This was due to the fact that the SVG symbols had hardcoded fill attributes which were not overridden by the fill attributes set on the <use> elements.

Changes Made

SVG Symbol Update:
- Removed the hardcoded fill attributes from the paths inside the <symbol> elements in icons.svg.
- Used currentColor for stroke and fill attributes within the symbol definitions. This allows the color to be inherited from the parent SVG element.
Component Update

:

Applied the fill color directly to the <use> element via inline styles or CSS classes to ensure proper inheritance of the color.
Added a cache-busting query string to the SVG file URL to force the browser to reload the updated SVG file during development.

Reasoning

**Use of currentColor: By setting stroke and fill attributes to currentColor, the SVG paths will inherit the color from the parent element, allowing dynamic color changes through CSS or inline styles.
CSS Styling: Utilizing CSS classes or inline styles to apply colors ensures that the color changes are reflected correctly without hardcoding them within the SVG file.

These changes collectively ensure that the SVG icons update their colors dynamically as intended, providing a more flexible and maintainable solution.

@despino-streaver @Profesor08

Profesor08 commented 5 months ago

@Avik-creator using currentColor does nothing, because the issue is not about the coloring icons, but about entire svg, it is somehow cached and not updating. To check this, just add one new icon to it.

Adding additional random query parameters is weird and adds additional overhead in development. Updating svg file must be enough, because browser checks provided cache and etag headers to make a decision.

Avik-creator commented 5 months ago

Ok will look into it once again.

Profesor08 commented 2 months ago

May be it is related to chrome issue: https://issues.chromium.org/issues/353259715

Currently I didn't find any satisfying workaround

wneel commented 2 months ago

May be it is related to chrome issue: https://issues.chromium.org/issues/353259715

Currently I didn't find any satisfying workaround

In my case that was the issue,

option 1: my temporary work-around is to give names to icons according to styles, if you need orange and green icon just create both svg style them and swicth to one or the other,

option 2: stop using since the issue is coming from here,

this should be fixed soon anyway !

vercel / next.js