<template>
  <div class="icon checkbox-icon">
    <SpIcon v-if="props.active" name="sp-checkbox-checked" class="checked" />
    <SpIcon v-else name="sp-checkbox-unchecked" class="unchecked" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    active: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    return {
      props,
    };
  },
});
</script>
<style lang="scss">
.checkbox-icon {
  .checked {
    path {
      fill: var(--blue);
    }
  }
}
</style>
