Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Optimize requests for assets


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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)


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" />

you can use content of abs015.svg

<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>


Or alternatively, you can cashe those icons in a browser. See https://css-tricks.com/inline-svg-cached/

Regards,
Lauris Stepanovs,
Keenthemes Support Team



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



That is awesome!

Thank you,
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



Just to let you know, I have managed to set the configuration using: <a>https://craco.js.org</a>

If there is any other recommmended way for metronic I would try that, otherwise this works great.

Thanks for your help!
Tamas


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(