Skip to content

Commit 9ea985e

Browse files
KreezagKreezag
committed
[#95] polish icon-svg component
1 parent 7eb6b59 commit 9ea985e

File tree

1 file changed

+47
-31
lines changed

1 file changed

+47
-31
lines changed

‎src/shared/ui/icon-svg/icon-svg.vue‎

Lines changed: 47 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,43 @@ type Props = {
33
name: string;
44
};
55
6-
const props = defineProps<Props>();
6+
defineProps<Props>();
77
</script>
88

99
<template>
1010
<div class="icon-svg">
1111
<svg
1212
v-if="name === 'bolt'"
1313
xmlns="http://www.w3.org/2000/svg"
14-
width="24" height="24" viewBox="0 0 24 24" fill="none"
14+
width="24"
15+
height="24"
16+
viewBox="0 0 24 24"
17+
fill="none"
1518
>
16-
<path d="M3.75 13.5L14.25 2.25L12 10.5H20.25L9.75 21.75L12 13.5H3.75Z" stroke-width="1.5"
17-
stroke-linecap="round" stroke-linejoin="round"/>
19+
<path
20+
d="M3.75 13.5L14.25 2.25L12 10.5H20.25L9.75 21.75L12 13.5H3.75Z"
21+
stroke-width="1.5"
22+
stroke-linecap="round"
23+
stroke-linejoin="round"
24+
/>
1825
</svg>
1926
<svg
20-
v-if="name === 'bolt-slash'"
27+
v-else-if="name === 'bolt-slash'"
2128
xmlns="http://www.w3.org/2000/svg"
22-
width="24" height="24" viewBox="0 0 24 24" fill="none"
29+
width="24"
30+
height="24"
31+
viewBox="0 0 24 24"
32+
fill="none"
2333
>
2434
<path
2535
d="M11.4123 15.6549L9.75 21.75L13.4949 17.7376M9.25736 13.5H3.75L6.40873 10.6514M8.4569 8.4569L14.25 2.25L12 10.5H20.25L15.5431 15.5431M8.4569 8.4569L3 3M8.4569 8.4569L15.5431 15.5431M15.5431 15.5431L21 21"
26-
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
36+
stroke-width="1.5"
37+
stroke-linecap="round"
38+
stroke-linejoin="round"
39+
/>
2740
</svg>
2841
<svg
29-
v-if="name === 'copy'"
42+
v-else-if="name === 'copy'"
3043
xmlns="http://www.w3.org/2000/svg"
3144
viewBox="0 0 460 460"
3245
>
@@ -73,14 +86,17 @@ const props = defineProps<Props>();
7386
/>
7487
</svg>
7588

76-
<svg v-else-if="name === 'discord'"
77-
viewBox="0 -28.5 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
89+
<svg
90+
v-else-if="name === 'discord'"
91+
viewBox="0 -28.5 256 256"
92+
xmlns="http://www.w3.org/2000/svg"
93+
preserveAspectRatio="xMidYMid"
94+
>
7895
<path
7996
d="M216.856 16.597A208.502 208.502 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.809 207.809 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.094 161.094 0 0 0 79.735 175.3a136.413 136.413 0 0 1-21.846-10.632 108.636 108.636 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a131.66 131.66 0 0 0 5.355 4.237 136.07 136.07 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848 21.142-6.58 42.646-16.637 64.815-33.213 5.316-56.288-9.08-105.09-38.056-148.36ZM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18Zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18Z"
8097
/>
8198
</svg>
8299

83-
84100
<svg
85101
v-else-if="name === 'heartBeat'"
86102
xmlns="http://www.w3.org/2000/svg"
@@ -98,19 +114,19 @@ const props = defineProps<Props>();
98114
xmlns="http://www.w3.org/2000/svg"
99115
viewBox="0 0 489.8 489.8"
100116
>
101-
<circle cx="245" cy="453.9" r="26.8"/>
102-
<circle cx="422.8" cy="453.9" r="26.8"/>
103-
<circle cx="67" cy="453.9" r="26.8"/>
117+
<circle cx="245" cy="453.9" r="26.8" />
118+
<circle cx="422.8" cy="453.9" r="26.8" />
119+
<circle cx="67" cy="453.9" r="26.8" />
104120
<path
105121
d="M443 31c0-17-14-31-31-31H78C61 0 47 14 47 31v69c0 8 4 15 9 21-5 6-9 13-9 21v70c0 8 4 15 9 21-5 5-9 13-9 21v69c0 17 14 31 31 31h334c17 0 31-14 31-31v-69c0-8-3-16-9-21 6-6 9-13 9-22v-69c0-8-3-16-9-21 6-6 9-13 9-21V31zM65 31c0-7 6-13 12-13h335c7 0 13 6 13 13v69c0 6-6 12-13 12H78c-7 0-13-5-13-12V31zm360 111v70c0 6-6 12-13 12H78c-7 0-13-6-13-12v-70c0-6 6-12 13-12h334c7 0 13 6 13 12zm0 181c0 7-6 13-13 13H78c-7 0-13-6-13-13v-69c0-7 6-12 13-12h334c7 0 13 5 13 12v69z"
106122
/>
107-
<path d="M241 74h113c5 0 9-4 9-9s-4-9-9-9H241c-5 0-9 4-9 9s4 9 9 9z"/>
108-
<circle cx="148.8" cy="65.1" r="10.8"/>
123+
<path d="M241 74h113c5 0 9-4 9-9s-4-9-9-9H241c-5 0-9 4-9 9s4 9 9 9z" />
124+
<circle cx="148.8" cy="65.1" r="10.8" />
109125
<path
110126
d="M241 186h113c5 0 9-4 9-9s-4-9-9-9H241c-5 0-9 4-9 9s4 9 9 9zM354 280H241c-5 0-9 4-9 9s4 9 9 9h113c5 0 9-4 9-9s-4-9-9-9z"
111127
/>
112-
<circle cx="148.8" cy="177" r="10.8"/>
113-
<circle cx="148.8" cy="288.9" r="10.8"/>
128+
<circle cx="148.8" cy="177" r="10.8" />
129+
<circle cx="148.8" cy="288.9" r="10.8" />
114130
<path
115131
d="M423 418c-17 0-31 11-35 27H280c-4-13-13-22-26-26v-28c0-5-4-9-9-9s-9 4-9 9v28c-13 3-22 13-26 26H102a36 36 0 100 18h108a36 36 0 0070 0h108a36 36 0 1035-45zM67 472a18 18 0 010-36 18 18 0 010 36zm178 0a18 18 0 010-36 18 18 0 010 36zm178 0a18 18 0 010-36 18 18 0 010 36z"
116132
/>
@@ -176,7 +192,7 @@ const props = defineProps<Props>();
176192
xmlns="http://www.w3.org/2000/svg"
177193
viewBox="0 0 12 12"
178194
>
179-
<path d="M12 6c0 .6-.4 1-1 1H1a1 1 0 0 1 0-2h10c.6 0 1 .4 1 1Z"/>
195+
<path d="M12 6c0 .6-.4 1-1 1H1a1 1 0 0 1 0-2h10c.6 0 1 .4 1 1Z" />
180196
</svg>
181197

182198
<svg
@@ -196,8 +212,8 @@ const props = defineProps<Props>();
196212
xmlns="http://www.w3.org/2000/svg"
197213
viewBox="0 0 12 12"
198214
>
199-
<path d="M6 0c.6 0 1 .4 1 1v10a1 1 0 1 1-2 0V1c0-.6.4-1 1-1Z"/>
200-
<path d="M12 6c0 .6-.4 1-1 1H1a1 1 0 0 1 0-2h10c.6 0 1 .4 1 1Z"/>
215+
<path d="M6 0c.6 0 1 .4 1 1v10a1 1 0 1 1-2 0V1c0-.6.4-1 1-1Z" />
216+
<path d="M12 6c0 .6-.4 1-1 1H1a1 1 0 0 1 0-2h10c.6 0 1 .4 1 1Z" />
201217
</svg>
202218

203219
<svg
@@ -379,7 +395,7 @@ const props = defineProps<Props>();
379395
y2="30"
380396
gradientUnits="userSpaceOnUse"
381397
>
382-
<stop class="transition-all duration-200" stop-color="#FACC15"/>
398+
<stop class="transition-all duration-200" stop-color="#FACC15" />
383399
<stop
384400
class="transition-all duration-200"
385401
offset="1"
@@ -410,7 +426,7 @@ const props = defineProps<Props>();
410426
<path
411427
d="M128 406c4 0 8-4 8-8V124a8 8 0 0 0-15 0v274c0 4 3 8 7 8zM384 264c-4 0-7 3-7 7v204c0 12-11 22-23 22H158c-12 0-22-10-22-22v-47a8 8 0 0 0-15 0v47c0 20 16 37 37 37h196c21 0 38-17 38-37V271c0-4-4-7-8-7zM354 0H158c-21 0-37 17-37 38v56a8 8 0 0 0 15 0V38c0-13 10-23 22-23h31c8 15 24 25 41 25h52c17 0 33-10 41-25h31c12 0 23 10 23 23v203a8 8 0 0 0 15 0V38c0-21-17-38-38-38zm-72 25h-52c-9 0-17-4-23-10h98c-6 6-14 10-23 10z"
412428
/>
413-
<path d="M287 478a8 8 0 0 0 0-15h-62a8 8 0 0 0 0 15h62z"/>
429+
<path d="M287 478a8 8 0 0 0 0-15h-62a8 8 0 0 0 0 15h62z" />
414430
</svg>
415431

416432
<svg
@@ -424,7 +440,7 @@ const props = defineProps<Props>();
424440
<path
425441
d="M90 61v284a8 8 0 0 0 15 0V69h302v103a8 8 0 0 0 15 0V61c0-4-3-7-7-7H97c-4 0-7 3-7 7zM90 432c0 4 3 8 7 8h318c4 0 7-4 7-8V202a8 8 0 0 0-15 0v223H105v-50a8 8 0 0 0-15 0v57zM233 467a23 23 0 1 0 46-1 23 23 0 0 0-46 1zm31 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0zM288 42a8 8 0 0 0 0-15h-34a8 8 0 0 0 0 15h34z"
426442
/>
427-
<circle cx="225.6" cy="34.3" r="7.5"/>
443+
<circle cx="225.6" cy="34.3" r="7.5" />
428444
</svg>
429445

430446
<svg
@@ -487,12 +503,12 @@ const props = defineProps<Props>();
487503
stroke-linecap="round"
488504
stroke-linejoin="round"
489505
>
490-
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
506+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
491507
<path
492508
d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z"
493509
/>
494-
<path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/>
495-
<path d="M8 11v-4a4 4 0 1 1 8 0v4"/>
510+
<path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />
511+
<path d="M8 11v-4a4 4 0 1 1 8 0v4" />
496512
</svg>
497513

498514
<svg
@@ -506,13 +522,13 @@ const props = defineProps<Props>();
506522
stroke-linecap="round"
507523
stroke-linejoin="round"
508524
>
509-
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
525+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
510526
<path
511527
d="M15 11h2a2 2 0 0 1 2 2v2m0 4a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2h4"
512528
/>
513-
<path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/>
514-
<path d="M8 11v-3m.719 -3.289a4 4 0 0 1 7.281 2.289v4"/>
515-
<path d="M3 3l18 18"/>
529+
<path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />
530+
<path d="M8 11v-3m.719 -3.289a4 4 0 0 1 7.281 2.289v4" />
531+
<path d="M3 3l18 18" />
516532
</svg>
517533
</div>
518534
</template>

0 commit comments

Comments
 (0)