Icons & assets cannot be used with the <use> SVG element on the web

thibault-mahe commented 1 year ago

Duplicates ❌

[X] I have searched the existing issues

Which Figma library is concerned?

Vitamin Assets

Current behavior 😯

Some flags are not displayed in the web browser when used with the <use> SVG element (a strategy recommended in our project's README)

<svg width="32" height="32" fill="#001018">
  <use
    xlink:href="/node_modules/@vtmn/icons/dist/vitamix/sprite/vitamix.svg#home-fill"
  />
</svg>

Expected behavior 🤔

Either the flag should be displayed normally in the browser (ideal) or this icon strategy should not be recommended in the README.

This latter solution should be discussed as consuming the icons with the <use> element has many benefits.

Context 🔦

See the open issue on the vitamin-web repo: https://github.com/Decathlon/vitamin-web/issues/1313

TL;DR:

Some flag icons are using specific (but standard) SVG elements like clip-path, mask or filter.
These features are often used, according to the SVG specs, as separated elements that are then referenced and used on SVG drawn element like groups (p), rectangle (rect), paths (path), etc. using a standard url() function. For instance a <mask id="#foo"></mask> element is then used on a group with an attribute mask="url(#foo)".
When using the the svg element from an external reference (for instance importing an SVG element from sprite/assets.svg#some-flag), some browser doesn't know how to handle fetching with url(), as if the specific feature elements were not imported in the new document and the url() function loses the reference.

I tried to clean as much as I can all the flags but many icons remains dependent of these features. Here is the remaining issued flags I listed:

cash, cb, cheque-payment, decathlon-logo-with-outline, discover, dwolla, flag-ad, flag-ag, flag-ai, flag-ao, flag-as, flag-aw, flag-az, flag-ba, flag-bj, flag-bl, flag-bm, flag-bs, flag-bv, flag-bz, flag-cc, flag-cg, flag-ck, flag-co, flag-coc, flag-cv, flag-cw, flag-cx, flag-de, flag-fk, flag-fo, flag-gb-eng, flag-gb-nir, flag-gb-sct, flag-gb-wls, flag-gb-zet, flag-gd, flag-gf, flag-gi, flag-gl, flag-gp, flag-gs, flag-gu, flag-hm, flag-hr, flag-ht, flag-il, flag-io, flag-jp, flag-ke, flag-ki, flag-kn, flag-kr, flag-ky, flag-lc, flag-lgbt, flag-ls, flag-ly, flag-ma, flag-mf, flag-mh, flag-mk, flag-mm, flag-mn, flag-mp, flag-mq, flag-ms, flag-mt, flag-na, flag-nc, flag-nf, flag-ni, flag-no, flag-nr, flag-nu, flag-pf, flag-pm, flag-pn, flag-pr, flag-ps, flag-py, flag-re, flag-rs, flag-rw, flag-sb, flag-sh, flag-si, flag-sj, flag-ss, flag-sv, flag-sx, flag-sz, flag-tk, flag-to, flag-tt, flag-tv, flag-tz, flag-um, flag-us-ca, flag-us, flag-uz, flag-va, flag-vi, flag-vu, flag-wf, flag-ws, flag-xk, flag-yt, flag-za, flag-zm, flag-zw, pay-u

Probably that a rewrite of all the SVG flags, without clip-path, mask or filter, should be considered.

The issue could be the same on the vitamix file.

Screenshots / Videos 📸

No response

SimonLeclercq commented 1 year ago

It seems to be related to the construction of the assets, the different figma layers creating "path" or other defs in the svg. I'll see how much we can process the output files

SimonLeclercq commented 1 year ago

After digging, shapes used to design the flag contain style parameters hidden in Figma, but clearly visible on the .json

By removing them, the json is lightened and cleaner, but a clip-path still appears: it's the mask which allows to have corner-radius.

By removing it, the json contains only the minimum of tags: the svg tag with the viewbox and the XMLNS & the different shapes, with the clip-rules and the fill.

I think the solution lies in using a cleaner library (either clean this one or use one that is better composed?). I started to look if cleaner exports were possible with plugins, without much success.

thibault-mahe commented 1 year ago

Thanks @SimonLeclercq ! i just reviewed a PR on adding new icons on vitamix and some icons had the same issue, meaning that other non-flags icons could be also concerned