<template>
  <a
    class="edit-group-name"
    data-cy="edit-group-name-link"
    @click="$emit('edit')">
    <pen-icon class="edit-group-name__icon"/>
  </a>
</template>

<script>
  import PenIcon from '@/components/icons/PenIcon';

  export default {
    components: {
      PenIcon
    }
  };
</script>

<style scoped lang="scss">
  @import "~styles/_variables.scss";

  .edit-group-name {
    &__icon {
      width: 20px;
      height: 20px;
      fill: $color-brand;
    }
  }
</style>
