<template functional> <span :aria-hidden="props.decorative" :aria-label="props.title" :class="[data.class, data.staticClass]" class="material-design-icon target-icon" role="img" @click="listeners.click ? listeners.click : () => true"> <svg :fill="props.fillColor" class="material-design-icon__svg" :width="props.size" :height="props.size" viewBox="0 0 24 24"> <path d="M11,2V4.07C7.38,4.53 4.53,7.38 4.07,11H2V13H4.07C4.53,16.62 7.38,19.47 11,19.93V22H13V19.93C16.62,19.47 19.47,16.62 19.93,13H22V11H19.93C19.47,7.38 16.62,4.53 13,4.07V2M11,6.08V8H13V6.09C15.5,6.5 17.5,8.5 17.92,11H16V13H17.91C17.5,15.5 15.5,17.5 13,17.92V16H11V17.91C8.5,17.5 6.5,15.5 6.08,13H8V11H6.09C6.5,8.5 8.5,6.5 11,6.08M12,11C11.45,11 11,11.45 11,12C11,12.55 11.45,13 12,13C12.55,13 13,12.55 13,12C13,11.45 12.55,11 12,11Z"> <title>{{ props.title }}</title> </path> </svg> </span> </template> <script> export default { name: "TargetIcon", props: { title: { type: String, default: "Target icon" }, decorative: { type: Boolean, default: false }, fillColor: { type: String, default: "currentColor" }, size: { type: Number, default: 24 } } } </script>