Hello,
We are using the react theme and we would like to minimize the requests to the server for the svg assets. Is there a recommended or inbuilt method by metronic on how to load all the svg's in one request, or perhaps any other method to minimize the request volume?
Thanks!
Tamas
I am trying to automate the this process with: https://github.com/JetBrains/svg-sprite-loader
Can you please tell me how can I define the webpack.config.js file so that all metronic functionality works and I can add the extra module? I only found the webpack config for the rtl version.
Thanks!
Tamas
That is awesome!
Thank you,
Tamas
Hi Lauris,
Thanks for tip, this is awesome. Based on this I've found that it could be even better to load all the icons in an inline sprite and cache it like that.
I would like to ask before starting it manually, is there a sprite for each icon pack provided with metronic that I can download somewhere or do I have to write it by hand?
Thanks!
Tamas
Hi Tamas,
You can download our Duotune icons set from Metronic downloads page in Graphics tab.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Tamas,
To remove these requests you can change SVG icon usage to inline.
Instead of
<KTSVG path="/media/icons/duotune/abstract/abs015.svg" className=" svg-icon-1" />
<span className={"svg-icon svg-icon-1"}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 7H3C2.4 7 2 6.6 2 6V4C2 3.4 2.4 3 3 3H21C21.6 3 22 3.4 22 4V6C22 6.6 21.6 7 21 7Z" fill="currentColor"/>
<path opacity="0.3" d="M21 14H3C2.4 14 2 13.6 2 13V11C2 10.4 2.4 10 3 10H21C21.6 10 22 10.4 22 11V13C22 13.6 21.6 14 21 14ZM22 20V18C22 17.4 21.6 17 21 17H3C2.4 17 2 17.4 2 18V20C2 20.6 2.4 21 3 21H21C21.6 21 22 20.6 22 20Z" fill="currentColor"/>
</svg>
</span>