<!-- <script src="https://cdn.jsdelivr.net/npm/akar-icons-web-components@0.0.2/dist/akar-icons-web-components/akar-icons-web-components.esm.js" type="module"></script> -->
<script src="https://unpkg.com/akar-icons-web-components" type="module"></script>
<akar-icon name="bicycle" id="icon" stroke="1.5" color="#11cc00" size="240"> </akar-icon>
html,
body {
width: 100%;
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
const icon = document.getElementById('icon');
const gui = new dat.GUI();
const iconConfigs = {
name: 'bicycle',
stroke: 1.5,
color: '#11cc00',
size: 240,
cap: 'round',
join: 'round',
}
gui.add(iconConfigs, "name").onFinishChange((x) => {
icon.setAttribute('name', x)
});
gui.add(iconConfigs, 'size', 24, 400)
.onChange((x) => (icon.setAttribute('size', x)));
gui.addColor(iconConfigs, 'color')
.onChange((x) => (icon.setAttribute('color', x)));
gui.add(iconConfigs, 'stroke', 0.5, 3, 0.1)
.onChange((x)=>(icon.setAttribute('stroke', x)));
gui.add(iconConfigs, 'cap', {
butt: 'butt', square: 'square', round: 'round'
})
.onChange((x) => (icon.setAttribute('cap', x)));
gui.add(iconConfigs, 'join', {
crop: 'crop', arcs: 'arcs', miter: 'miter', bevel: 'bevel', round: 'round'
})
.onChange((x) => (icon.setAttribute('join', x)));
// Object.entries(iconConfigs).forEach(([k,v])=>{
// icon.setAttribute(k, v);
// })
This Pen doesn't use any external CSS resources.