<template functional>
  <span
    :class="[data.staticClass, 'mdi', 'mdi-pen', props.spin ? 'mdi-spin' : undefined]"
    :role="props.role"
    :aria-label="props.ariaLabel"
  >
    <svg
      fill="currentColor"
      :width="props.width"
      :height="props.height"
      :viewBox="props.viewBox"
      :xmlns="props.xmlns"
    >
      <title v-if="title">{{ title }}</title>
      <path d="M20.71,7.04C20.37,7.38 20.04,7.71 20.03,8.04C20,8.36 20.34,8.69 20.66,9C21.14,9.5 21.61,9.95 21.59,10.44C21.57,10.93 21.06,11.44 20.55,11.94L16.42,16.08L15,14.66L19.25,10.42L18.29,9.46L16.87,10.87L13.12,7.12L16.96,3.29C17.35,2.9 18,2.9 18.37,3.29L20.71,5.63C21.1,6 21.1,6.65 20.71,7.04M3,17.25L12.56,7.68L16.31,11.43L6.75,21H3V17.25Z" />
    </svg>
  </span>
</template>

<script>
export default {
  name: 'mdi-pen',
  props: {
    width: {
      type: [Number, String],
      default: 24
    },
    height: {
      type: [Number, String],
      default: 24
    },
    viewBox: {
      type: [String],
      default: '0 0 24 24'
    },
    xmlns: {
      type: String,
      default: 'http://www.w3.org/2000/svg'
    },
    ariaLabel: {
      type: String,
      default: 'Pen icon'
    },
    role: {
      type: String,
      default: 'img'
    },
    title: {
      type: String,
      required: false
    },
    spin: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style src="./icons.css"/>
