Control for img-src-svg icons, same as raw svg?

Hi Team

I've been using the duotone svg as image files rather than raw svg code, but I lose out on a lot of control and features (eg. for colors and adaptiveness in header nav).

For your next release, is it possible to have svg-icon markup affect the img svg in the same way it affects the svg raw code approach?

Cheers

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 (3)

Hi,

If svg icons are used as images then icon colors can not be changed via CSS classes so icons must be placed as inline SVG. You can use the below server-side code in PHP to include the SVG icons by path:

function getSvgIcon($path, $class = "") {
$rootPath = "www/site/"; // project path

$full_path = $rootPath . $path;

if ( !file_exists($full_path) ) {
return "<!--SVG file not found: $path-->\n";
}

$cls = array("svg-icon");

if ( !empty($class) ) {
$cls = array_merge($cls, explode(" ", $class));
}

$svg_content = file_get_contents($full_path);

$output = "<!--begin::Svg Icon | path: $path-->\n";
$output .= "<span class=\"".implode(" ", $cls) . "\">" . $svg_content . "</span>";
$output .= "\n<!--end::Svg Icon-->";

return $output;
}

<?php
echo getSvgIcon('assets/media/icons/duotune/abstract/abs010.svg', 'svg-icon-2x svg-icon-success');
?>


Regards.

Hi Sean, thanks heaps for that.
I think I found a simpler solution CSS only..
I've created a CSS using filters using the KT nomenclature.

eg.
.svg-icon-primary img {filter: invert(50%) sepia(100%) saturate(2000%) hue-rotate(180deg) brightness(100%) contrast(100%) !important;} /*blue*/

By creating a .svg-icon-{color} img {/***/} class in the custom_style_override.css, all the images are automatically updated to match the KT svg-icon attribute automatically.

I've had to manually update all sizes as the svg-icon-2x doesn't work, and opacity too, but this has achieved fully control of the svg icons as though they were inline, and equates to recoding with .

Much appreciated for your code - it will definitely come in handy for some other manoeuvres.

Great workaround happy All the best with your project.

Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
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  :(