@naturacosmeticos/natds-icons
Version:
A collection of icons for Natura & Co. Design System
66 lines (53 loc) • 1.69 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Natds Icons</title>
<link rel="stylesheet" href="./natds-icons.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div id="icons-by-name"></div>
<style>
#icons-by-name {
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: start;
margin-bottom: 150px;
}
.icon-wrapper {
text-align: center;
margin: 20px 30px;
width: 48px;
}
code {
color: #e8007f;
}
</style>
<script>
const wrapper = document.getElementById('icons-by-name');
const startUnicode = 0xea01;
const createIcon = (index) => {
const iconWrapper = document.createElement('div');
iconWrapper.classList.add('icon-wrapper')
const icon = document.createElement('i');
const nameWrapper = document.createElement('div');
const code = document.createElement('code');
icon.classList.add('natds-icons', 'natds-icons-3x')
icon.innerHTML = String.fromCodePoint(startUnicode + index);
code.innerHTML = escape(String.fromCodePoint(startUnicode + index));
nameWrapper.appendChild(code)
iconWrapper.appendChild(icon)
iconWrapper.appendChild(nameWrapper)
return iconWrapper;
}
fetch('./natds-icons.json')
.then(res => res.json())
.then((icons) => Object
.keys(icons)
.forEach((iconName, index) => wrapper.appendChild(createIcon(index))));
</script>
</body>
</html>