<!-- <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);
// })

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js