Add svg inline support

[kpitn]

Base on https://www.npmjs.com/package/m2-sass-inlinesvg

After using gulp svginline All files under /web/icons/*.svg are compile into one file in /styles/_default_sass-inline-svg-data.scss Another file is create /styles/_default_sass-inline-svg.scss who need to be import in your styles.scss (@import "svg/default_sass-inline-svg";)

[Igloczek]

Hi @kpitn thanks for the contribution, glad you like the project and want to make it better, really appreciate it 🙇

Unfortunately, the presented solution while might be easy to use, since all icons will be always available in every place of the project, it's not good for performance and caching because:

• stylesheets files might get easily huge, which may lead to increased time needed to fetch and process them, which by default is a render-blocking task in most M2 themes, and all of this will happen even if any of the icons are in use
• non-critical assets should be lazyloaded, so every icon that is not required for first paint, shouldn't be loaded until the user might see it
• even if you just slightly change the styles, all icons will be invalidated too, which is far from the optimal solution

Apart from that, Frontools already have a tool for creating SVG sprite that is a better and a bit more modern approach for using SVG on the web.

So since I'm not convinced about this solution, I had to reject your proposal.

Best, Bartek

[kpitn]

Ok so svg sprite is a better solution for you but :

• stylesheets files might get easily huge, which may lead to increased time needed to fetch and process them, which by default is a render-blocking task in most M2 themes, and all of this will happen even if any of the icons are in use => you can use a seperate asynchronously loading css files
• non-critical assets should be lazyloaded, so every icon that is not required for first paint, shouldn't be loaded until the user might see it => you can use a seperate asynchronously loading css files
• even if you just slightly change the styles, all icons will be invalidated too, which is far from the optimal solution => you can use a seperate asynchronously loading css files