parent
e191d25b68
commit
ed05e3d799
2 changed files with 63 additions and 0 deletions
@ -0,0 +1,43 @@ |
|||||||
|
<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> |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
<template> |
||||||
|
<div class="top_login"> |
||||||
|
|
||||||
|
<svgs :iconClass="'system-management'" /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import svgs from '@/components/svg-icon/svg.vue'; |
||||||
|
export default { |
||||||
|
name: 'top-login', |
||||||
|
components:{ |
||||||
|
svgs |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
|
||||||
|
</style> |
||||||
Loading…
Reference in new issue