<template>
  <span
    v-bind="$attrs"
    :aria-hidden="title ? null : true"
    :aria-label="title"
    class="material-design-icon snapchat-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="M21.93 16.56C21.79 16.18 21.5 16 21.22 15.81C21.17 15.78 21.11 15.75 21.07 15.73C21 15.68 20.89 15.64 20.8 15.59C19.86 15.09 19.12 14.46 18.61 13.72C18.47 13.5 18.35 13.29 18.24 13.06C18.2 12.93 18.2 12.86 18.23 12.8C18.26 12.75 18.3 12.7 18.35 12.67C18.5 12.56 18.68 12.46 18.79 12.38C19 12.25 19.15 12.15 19.25 12.08C19.64 11.81 19.91 11.5 20.08 11.2C20.32 10.75 20.35 10.22 20.16 9.75C19.91 9.08 19.27 8.66 18.5 8.66C18.34 8.66 18.18 8.68 18 8.71C18 8.72 17.94 8.73 17.9 8.74C17.9 8.28 17.89 7.8 17.85 7.32C17.71 5.64 17.12 4.76 16.5 4.06C16.11 3.62 15.65 3.24 15.14 2.95C14.21 2.42 13.15 2.15 12 2.15S9.8 2.42 8.87 2.95C8.35 3.24 7.89 3.62 7.5 4.06C6.88 4.76 6.3 5.64 6.15 7.32C6.11 7.8 6.1 8.28 6.11 8.74C6.06 8.73 6 8.72 6 8.71C5.82 8.68 5.66 8.66 5.5 8.66C4.73 8.66 4.09 9.08 3.84 9.75C3.65 10.22 3.68 10.75 3.92 11.2C4.09 11.5 4.36 11.81 4.75 12.08C4.85 12.15 5 12.25 5.21 12.39L5.63 12.66C5.69 12.7 5.73 12.75 5.77 12.8C5.8 12.87 5.8 12.94 5.75 13.07C5.65 13.3 5.53 13.5 5.39 13.72C4.89 14.45 4.18 15.07 3.27 15.56C2.78 15.82 2.28 16 2.07 16.56C1.91 17 2 17.5 2.42 17.91C2.57 18.06 2.74 18.19 2.93 18.29C3.33 18.5 3.75 18.68 4.18 18.79C4.27 18.82 4.36 18.85 4.43 18.91C4.58 19.03 4.56 19.23 4.76 19.5C4.86 19.66 5 19.79 5.13 19.89C5.54 20.18 6 20.19 6.5 20.21C6.94 20.23 7.44 20.25 8 20.44C8.26 20.5 8.5 20.67 8.79 20.85C9.5 21.27 10.42 21.85 12 21.85C13.57 21.85 14.5 21.27 15.22 20.84C15.5 20.67 15.75 20.5 16 20.44C16.55 20.25 17.06 20.23 17.5 20.21C18 20.2 18.46 20.18 18.87 19.89C19.04 19.77 19.18 19.61 19.29 19.43C19.43 19.19 19.43 19 19.56 18.91C19.63 18.86 19.71 18.82 19.8 18.8C20.24 18.68 20.66 18.5 21.06 18.29C21.27 18.18 21.45 18.04 21.6 17.87L21.61 17.87C22 17.46 22.08 17 21.93 16.56M20.53 17.31C19.67 17.78 19.1 17.73 18.66 18C18.5 18.12 18.45 18.28 18.42 18.44C18.41 18.5 18.4 18.58 18.39 18.64C18.37 18.78 18.34 18.9 18.24 18.97C17.9 19.2 16.91 18.95 15.63 19.37C14.57 19.72 13.9 20.73 12 20.73C10.1 20.73 9.45 19.73 8.37 19.37C7.1 18.95 6.1 19.2 5.77 18.97C5.5 18.78 5.72 18.26 5.34 18C4.9 17.73 4.33 17.78 3.5 17.31C3.19 17.15 3.14 17 3.18 16.93C3.22 16.84 3.34 16.77 3.42 16.73C5.07 15.94 6 14.91 6.47 14.1C6.91 13.38 7 12.83 7.03 12.75C7.06 12.54 7.09 12.38 6.86 12.17C6.64 11.96 5.66 11.36 5.39 11.17C4.93 10.85 4.74 10.54 4.88 10.15L4.88 10.15V10.15C5 9.88 5.23 9.78 5.5 9.78C5.58 9.78 5.66 9.79 5.74 9.81C6.24 9.91 6.72 10.16 7 10.23C7.03 10.24 7.06 10.24 7.1 10.24C7.19 10.24 7.24 10.21 7.27 10.15C7.28 10.11 7.29 10.06 7.29 10C7.25 9.46 7.18 8.41 7.26 7.42C7.3 7 7.37 6.64 7.46 6.33C7.66 5.65 8 5.2 8.34 4.79C8.59 4.5 9.75 3.27 12 3.27C13.85 3.27 14.96 4.11 15.44 4.56C15.54 4.66 15.62 4.74 15.66 4.79C16.04 5.23 16.38 5.71 16.58 6.47C16.65 6.74 16.71 7.06 16.74 7.42C16.82 8.4 16.75 9.46 16.71 10C16.71 10.04 16.71 10.08 16.72 10.11C16.73 10.2 16.79 10.24 16.9 10.24C16.94 10.24 16.97 10.24 17 10.23C17.28 10.16 17.76 9.91 18.26 9.8C18.34 9.79 18.42 9.78 18.5 9.78C18.75 9.78 19 9.87 19.1 10.1L19.11 10.14L19.12 10.14L19.12 10.15C19.27 10.53 19.07 10.85 18.62 11.16C18.35 11.35 17.36 11.96 17.14 12.16C16.91 12.38 16.94 12.54 16.97 12.75C17 12.85 17.18 13.8 18.08 14.86C18.63 15.5 19.42 16.17 20.58 16.73C20.65 16.76 20.74 16.81 20.79 16.87C20.82 16.92 20.84 16.96 20.83 17C20.82 17.1 20.73 17.2 20.53 17.31Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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