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
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
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:
Regards.
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.
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 
All the best with your project.
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.
React Dev Vacancy
KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
