refactor: import icons as svg files instead of using react components

[armano2]

This pr changes how svg files are stored in project and removes all css from them, this is first step to refactor how we import icons.

as we are using svgr to convert svg items to react components actual svg code stays the same

this may be considered a breaking change as icons do not contain styles anymore and consumers have to apply them when they are needed

related PR: #5865

[armano2]

previously color of this icon was hardcoded into component, and there was no way to change it without swizzling,

not sure what value we should use

[armano2]

any thoughts about this? we could actually remove this override and let control font color control how this icon looks

maybe we could use?

    color: var(--ifm-menu-color);

or we just keep it and do this in separate PR, as style for this is not yet in infima

[armano2]

i created issue for this in infima facebookincubator/infima#193

[netlify]

✅ [V2]

Built without sensitive environment variables

Name	Link
🔨 Latest commit	81881af
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/63f6887176c2ba0008a60fa2
😎 Deploy Preview	https://deploy-preview-6050--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🔴 43	🟢 100	🟢 100	🟢 100	🟢 90	Report
/docs/installation	🟠 78	🟢 96	🟢 100	🟢 100	🟢 90	Report

[armano2]

@Josh-Cena let me know if there is something else that i have to do in here

[Josh-Cena]

I'm in favor of the current change. Just waiting for the input from @slorber

[slorber]

Thanks for working on this

This pr changes how svg files are stored in project and removes all css from them, this is first step to refactor how we import icons.

IMHO we should not do this in multiple steps, but in a single one, once we know exactly how we should handle the SVGs. This PR can serve as a POC to see if an approach is right.

This kind of change can be disruptive for our users with custom themes, and we should avoid doing 2 chances in 2 distinct releases when we can do only one.

---

The current approach is not good enough, the SVGs remain loaded through SVGR, converted to the same React components as before, and SVG markup is still duplicated in the final HTML

I don't know what is the best solution to this problem yet, just some ideas:

• Use url('./icon.svg') in CSS => this should use file-loader instead of SVGR due to usage in CSS
• Force usage of inline file-loader in JS file and use with <img> tag?

I asked a question here, some proposed approaches might be interesting to explore: https://twitter.com/sebastienlorber/status/1466024866491080707

Using SVG defs and SVG use also seems interesting, preferably if we can somehow lazy-load those refs instead of having a global registry

https://github.com/hponcede/use-svg-ssg

[armano2]

personally i do not like icons in css, as there is no way to easily style them/color outside of creating new one

in my opinion sprites are way to go, i tested this change with https://github.com/JetBrains/svg-sprite-loader (or rather inspired version of it) and simple wrapper for react and it seem to work perfectly,

i still can use:

import arrow from './icons/arrow.svg';

return <arrow>

if thats a case icons are added automatically, withotu change of api, only difference is that component returned by this import is:

<svg viewBox="....">
  <use xlink:href="#arrow" />
</svg>

i could give it a try to implement it in non "mockup" version

[dsmmcken]

personally i do not like icons in css, as there is no way to easily style them/color outside of creating new one

As long as they are one color icons, using mask for the svg, and background-color to set color makes it easy.