44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
<template>
|
||
<svg v-if="icon && icon.data" class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||
<path :d="icon.data" :fill="icon.fillColor ? icon.fillColor : '#000000'" :opacity="icon.fillOpacity" :transform="`rotate(${rotateConver(icon.rotate)})`"
|
||
transform-origin="center center"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'SvgIcon',
|
||
props: {
|
||
icon: {
|
||
type: Object,
|
||
default: {}
|
||
}
|
||
},
|
||
data() {
|
||
return {}
|
||
},
|
||
methods: {
|
||
// 角度转换
|
||
rotateConver: function(rotate) {
|
||
//1-0°，右；2-45°，右下；3-90°，下；4-135°，左下；5-180°，左；6-225°；7-270°，左上；8-315°，右上；
|
||
return (rotate === undefined || rotate === null) ? 0 : (Number(rotate) * 45)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
svg:not(:root) {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.svg-icon {
|
||
width: 1em;
|
||
height: 1em;
|
||
vertical-align: middle;
|
||
fill: currentColor;
|
||
overflow: hidden;
|
||
font-size: 30px;
|
||
}
|
||
</style>
|