@devchristian1337/dev-icons
Version:
A library to serve development-related icons
73 lines (67 loc) • 2.13 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dev Icons Test</title>
<style>
.icon-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
padding: 20px;
}
.icon-card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
text-align: center;
}
.icon-card img,
.icon-card svg {
width: 64px;
height: 64px;
margin-bottom: 10px;
}
.icon-name {
font-family: system-ui, -apple-system, sans-serif;
color: #333;
}
</style>
</head>
<body>
<div class="icon-grid" id="iconGrid"></div>
<script>
async function loadIcons() {
try {
const response = await fetch("../src/data/icons.json");
const icons = await response.json();
const grid = document.getElementById("iconGrid");
Object.entries(icons).forEach(([key, icon]) => {
const card = document.createElement("div");
card.className = "icon-card";
if (icon.icon.startsWith("http")) {
// For URL-based icons
const img = document.createElement("img");
img.src = icon.icon;
img.alt = icon.name;
card.appendChild(img);
} else {
// For inline SVG icons
card.innerHTML = icon.icon;
}
const name = document.createElement("div");
name.className = "icon-name";
name.textContent = icon.name;
card.appendChild(name);
grid.appendChild(card);
});
} catch (error) {
console.error("Error loading icons:", error);
document.body.innerHTML = `<p style="color: red; padding: 20px;">Error loading icons: ${error.message}</p>`;
}
}
loadIcons();
</script>
</body>
</html>