Custom icon with different state, active and inactive

[Jalu Wibowo]

Hello, I want to make a sidebar icon with different image between active and inactive state,
Because the design is not possible with CSS filter, so I need different image to work
How can I achieve this? currently using Vue 2

The image variant will be this 2

[Jalu Wibowo]

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;
}