You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
698 B
43 lines
698 B
<template> |
|
<svg :class="svgClass" :aria-hidden="true"> |
|
{{ iconClass }} |
|
<use :xlink:href="iconName" /> |
|
</svg> |
|
</template> |
|
<script> |
|
export default { |
|
name: 'SvgIcon', |
|
props: { |
|
iconClass: { |
|
type: String, |
|
required: true |
|
}, |
|
className: { |
|
type: String, |
|
default: '' |
|
} |
|
}, |
|
computed: { |
|
iconName() { |
|
return `#icon-${this.iconClass}`; |
|
}, |
|
svgClass() { |
|
if (this.className) { |
|
return 'svg-icon ' + this.className; |
|
} else { |
|
return 'svg-icon'; |
|
} |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style scoped> |
|
.svg-icon { |
|
width: 1em; |
|
height: 1em; |
|
vertical-align: -0.15em; |
|
fill: currentColor; |
|
overflow: hidden; |
|
} |
|
</style>
|
|
|