1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
| <template>
| <div :style="svgBodyStyle">
| <img :style="svgStyle" :src="svgSrc" alt="" style="object-fit: cover;">
| </div>
| </template>
|
| <script>
| import {getCurrentInstance, onBeforeUnmount, onMounted, reactive, toRefs} from "vue";
|
| export default {
| name: "svgicon",
| props: {
| width: {
| type: String,
| required: true,
| },
| height: {
| type: String,
| required: true,
| },
| color: {
| type: String,
| required: true,
| },
| name: {
| type: String,
| required: true,
| },
| type: {
| type: String,
| required: false,
| },
| src: null
| },
| components: {},
| setup(props) {
| let {proxy} = getCurrentInstance();
| const state = reactive({
| staticDomain: WGURL.staticDomain,
| svgStyle: '',
| svgSrc: '',
| svgBodyStyle: ''
| });
|
| onMounted(() => {
| Init();
| });
| onBeforeUnmount(() => {
|
| });
|
| const Init = () => {
| //brands,regular,solid
| if (props.type) {
| state.svgSrc = `${state.staticDomain}icon/svgs/${props.type}/${props.name}.svg`;
| } else if (props.name) {
| state.svgSrc = `${state.staticDomain}icon/svg/${props.name}.svg`;
| } else {
| state.svgSrc = props.src;
| }
|
| state.svgBodyStyle = "width:" + props.width + "px;"
| + "height:" + props.height + "px;"
| + "overflow:hidden;"
| + "display: inline-block;line-height:0px;vertical-align:middle;"
| state.svgStyle = "width:" + props.width + "px;"
| + "height:" + props.height + "px;"
| if (props.color) {
| state.svgStyle = state.svgStyle + "transform: translateX(-" + props.width + "px);"
| + "filter:drop-shadow(" + props.color + " " + props.width + "px 0);"
| }
| };
|
| return {
| ...toRefs(state)
| }
| },
| }
| </script>
|
| <style scoped lang="scss"></style>
|
|
