<template functional>
  <span
    :class="[data.staticClass, 'mdi', 'mdi-cloud-lock', 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="M22 17C22.5 17 23 17.5 23 18V22C23 22.5 22.5 23 22 23H17C16.5 23 16 22.5 16 22V18C16 17.5 16.5 17 17 17V15.5C17 14.1 18.1 13 19.5 13C20.9 13 22 14.1 22 15.5V17M21 17V15.5C21 14.7 20.3 14 19.5 14C18.7 14 18 14.7 18 15.5V17H21M19.36 9.03C21.95 9.22 24 11.36 24 14L23.94 14.77C23.59 12.63 21.74 11 19.5 11C17 11 15 13 15 15.5L15 15.76C14.39 16.31 14 17.11 14 18V19H6C2.69 19 0 16.31 0 13C0 9.9 2.34 7.36 5.35 7.04C6.6 4.64 9.11 3 12 3C15.64 3 18.67 5.59 19.36 9.03Z" />
    </svg>
  </span>
</template>

<script>
export default {
  name: 'mdi-cloud-lock',
  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: 'CloudLock icon'
    },
    role: {
      type: String,
      default: 'img'
    },
    title: {
      type: String,
      required: false
    },
    spin: {
      type: Boolean,
      default: false
    }
  }
}
</script>

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