|
<!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/[email protected]/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/[email protected]/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>
|
|
|
