Vue

by kabanoki

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-unicons.umd.min.js"></script>
<div id="app">
  <unicon name="car-wash" fill="limegreen"></unicon>
  <unicon name="layer-group" fill="royalblue" icon-style="monochrome"></unicon>
</div>
<script>
const icons = function(){
  return {
    uniLayerGroupMonochrome : { name: 'layer-group', style: 'monochrome', path: '<path class="uim-quaternary" d="M12,14.19531a1.00211,1.00211,0,0,1-.5-.13379l-9-5.19726a1.00032,1.00032,0,0,1,0-1.73242l9-5.19336a1.00435,1.00435,0,0,1,1,0l9,5.19336a1.00032,1.00032,0,0,1,0,1.73242l-9,5.19726A1.00211,1.00211,0,0,1,12,14.19531Z"/><path class="uim-tertiary" d="M21.5,11.13184,19.53589,9.99847,12.5,14.06152a1.0012,1.0012,0,0,1-1,0L4.46411,9.99847,2.5,11.13184a1.00032,1.00032,0,0,0,0,1.73242l9,5.19726a1.0012,1.0012,0,0,0,1,0l9-5.19726a1.00032,1.00032,0,0,0,0-1.73242Z"/><path class="uim-primary" d="M21.5,15.13184l-1.96411-1.13337L12.5,18.06152a1.0012,1.0012,0,0,1-1,0L4.46411,13.99847,2.5,15.13184a1.00032,1.00032,0,0,0,0,1.73242l9,5.19726a1.0012,1.0012,0,0,0,1,0l9-5.19726a1.00032,1.00032,0,0,0,0-1.73242Z"/>' },
          uniCarWash : { name: 'car-wash', style: 'line', path: '<path...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align:center;
}

Vue

const Unicon = window['vue-unicons'].default;

Unicon.add([icons.uniLayerGroupMonochrome, icons.uniCarWash]);

Vue.use(Unicon)

new Vue({
	el: '#app'
});