|
<!doctype html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"> |
|
<title>Title</title> |
|
<style> |
|
body{ |
|
color: red; |
|
font-size: 32px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<i class="customicon customicon-home" style="color:green"></i> |
|
<i class="customicon customicon-lapis"></i> |
|
<i class="customicon customicon-laptop" style="color:blue; font-size: 64px"></i> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script> |
|
<!-- cdn jquery --> |
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|
<script> |
|
jQuery(document).ready(function($) { |
|
// replace each tag with the appropriate icon from the folder icons |
|
// use the class icon to identify the tags |
|
// your code here |
|
let icons = document.querySelectorAll('.customicon'); |
|
for (let i = 0; i < icons.length; i++) { |
|
let icon = icons[i]; |
|
let iconClass = icon.className; |
|
let iconClassSplit = iconClass.split(' '); |
|
let iconClassSplit2 = iconClassSplit[1]; |
|
let iconClassSplit3 = iconClassSplit2.split('-'); |
|
let iconClassSplit4 = iconClassSplit3[1]; |
|
// get the svg content from the file |
|
let iconPath = 'custom-icons/' + iconClassSplit4 + '.svg?v=' + Math.random(); |
|
let iconContent = fetch(iconPath).then(response => response.text()); |
|
// hide the tag and insert the svg content after it |
|
icon.style.display = 'none'; |
|
iconContent.then(content => icon.insertAdjacentHTML('afterend', content)); |
|
function sizeAndColor() { |
|
|
|
// get current color |
|
let iconColor = window.getComputedStyle(icon).color; |
|
// get the current size |
|
let iconSize = window.getComputedStyle(icon).fontSize; |
|
// set the color of the svg |
|
iconContent.then(content => { |
|
let svg = icon.nextElementSibling; |
|
svg.style.fill = iconColor; |
|
svg.style.width = iconSize; |
|
svg.style.height = iconSize; |
|
// add iconClassSplit[1] ad iconClassSplit[2] to svg |
|
svg.classList.add(iconClassSplit[0]); |
|
svg.classList.add(iconClassSplit[1]); |
|
|
|
|
|
}); |
|
} |
|
sizeAndColor(); |
|
// on change any style of the icon, change the svg too |
|
let observer = new MutationObserver(sizeAndColor); |
|
observer.observe(icon, {attributes: true}); |
|
|
|
// observe any class related in devtools to change the svg too |
|
window.addEventListener('devtoolschange', function(event) { |
|
if (event.detail.className.includes('customicon')) { |
|
sizeAndColor(); |
|
} |
|
}); |
|
|
|
|
|
} |
|
}); |
|
</script> |
|
</body> |
|
</html> |
