<template>
  <span
    v-bind="$attrs"
    :aria-hidden="title ? null : true"
    :aria-label="title"
    class="material-design-icon piggy-bank-outline-icon"
    role="img"
    @click="$emit('click', $event)"
  >
    <svg
      :fill="fillColor"
      class="material-design-icon__svg"
      :width="size"
      :height="size"
      viewBox="0 0 24 24"
    >
      <path d="M22 14H20C20 11.6 18.2 9.6 15.5 8.6C15 9.4 14.1 10 13 10C11.7 10 10.7 9.2 10.2 8.2C10 8.2 9.8 8.3 9.5 8.3L7 7V9.3C5.5 10.2 4.4 11.5 4.1 13H2V17H5.1C5.6 17.6 6.2 18.2 7 18.7V22H9V19.6C9.9 19.9 10.9 20 12 20S14.1 19.8 15 19.6V22H17V18.7C18.1 18 19 17.1 19.5 16H22V14M12 18C8.7 18 6 16.2 6 14C6 12.5 7.4 11.1 9.4 10.4C10.3 11.4 11.6 12 13 12C14.1 12 15.1 11.7 16 11C17.3 11.8 18 12.9 18 14C18 16.2 15.3 18 12 18M13 3C13.6 3 14 3.4 14 4S13.6 5 13 5 12 4.6 12 4 12.4 3 13 3M13 1C11.3 1 10 2.3 10 4S11.3 7 13 7 16 5.7 16 4 14.7 1 13 1M10 13C10 13.6 9.6 14 9 14S8 13.6 8 13 8.4 12 9 12 10 12.4 10 13">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

<script>
export default {
  name: 'PiggyBankOutlineIcon',
  props: {
    title: {
      type: String,
      default: null
    },
    fillColor: {
      type: String,
      default: 'currentColor'
    },
    size: {
      type: Number,
      default: 24
    }
  },
  emits: [ 'click' ]
};
</script>