Custom icon with different state, active and inactive
jarooda opened this issue · comments
Solved using svg and make it into single file component
My method is like this
TestIcon.vue
<template>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.75595 20.8117H20.418V19.1426C20.418 14.548 16.6786 10.8086 12.084 10.8086C7.48942 10.8086 3.75005 14.548 3.75005 19.1426V20.8117H3.75595Z" class="change-to-blue" fill="#676767"/>
<path d="M12.0838 12.6138C14.3959 12.6138 16.2773 10.4551 16.2773 7.80692C16.2773 5.15869 14.3959 3 12.0838 3C9.77178 3 7.8903 5.15869 7.8903 7.80692C7.8903 10.4551 9.77178 12.6138 12.0838 12.6138Z" fill="#BDBDBD"/>
<path d="M16.0072 9.40598C16.715 9.40598 17.2871 8.7454 17.2871 7.93737C17.2871 7.12933 16.715 6.46875 16.0072 6.46875C15.2995 6.46875 14.7274 7.12933 14.7274 7.93737C14.7274 8.7454 15.2995 9.40598 16.0072 9.40598Z" fill="#BDBDBD"/>
<path d="M8.16934 9.40598C8.87711 9.40598 9.44922 8.7454 9.44922 7.93737C9.44922 7.12933 8.87711 6.46875 8.16934 6.46875C7.46157 6.46875 6.88946 7.12933 6.88946 7.93737C6.88946 8.7454 7.46157 9.40598 8.16934 9.40598Z" fill="#BDBDBD"/>
</svg>
</template>
<script>
export default {
name: 'TestIcon'
}
</script>
<style scoped>
</style>
Sidebar.vue
menu: [
{
title: 'Marketing',
icon: {
element: TestIcon
},
child: []
}
]
>>> .open-item > .vsm-link > .vsm-icon > .change-to-blue {
fill: #2325B3;
}