Skip to content

Commit e62efc8

Browse files
chaitak-goraichaitak-gorai
committed
Added icon template for svg icons
1 parent 781fa8a commit e62efc8

File tree

2 files changed

+19
-64
lines changed

2 files changed

+19
-64
lines changed

‎resources/app/global-components/Icon.vue

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -681,13 +681,27 @@
681681
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
682682
<path d="M13 5l7 7-7 7M5 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
683683
</svg>
684+
<svg v-else-if="name === 'home-icon'" class="h-5 w-5" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
685+
>
686+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
687+
</svg>
688+
<svg v-else-if="name === 'hamburger'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
689+
<path v-if="!isMenuOpen" stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
690+
<path v-if="isMenuOpen" stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
691+
</svg>
692+
<svg v-else-if="name === 'chat-bubble'" class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" >
693+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="{2}" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
694+
</svg>
695+
684696
</template>
685697
<script>
686698
export default {
687699
name: 'Icon',
688700
props: {
689701
name: String,
690-
}
702+
isMenuOpen: Boolean,
703+
},
704+
691705
}
692706
693707
</script>

‎resources/app/shared/includes/Header.vue

Lines changed: 4 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,7 @@
1111
:href="route('dashboard.index')"
1212
class="p-1 mx-2 border-transparent text-gray-400 rounded-full hover:text-white bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"
1313
>
14-
<svg
15-
class="h-5 w-5"
16-
stroke="currentColor"
17-
xmlns="http://www.w3.org/2000/svg"
18-
fill="none"
19-
viewBox="0 0 24 24"
20-
>
21-
<path
22-
stroke-linecap="round"
23-
stroke-linejoin="round"
24-
stroke-width="2"
25-
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
26-
/>
27-
</svg>
14+
<icon name="home-icon" class="w-6 h-6" />
2815
</inertia-link>
2916

3017
<nav
@@ -35,32 +22,7 @@
3522
class="block lg:hidden text-white hover:text-gray-200 focus:text-gray-200 focus:outline-none"
3623
>
3724
<span class="inline-block align-middle">
38-
<svg
39-
class="h-6 w-6 fill-current"
40-
viewBox="0 0 24 24"
41-
xmlns="http://www.w3.org/2000/svg"
42-
>
43-
<path
44-
v-if="isMenuOpen"
45-
fill-rule="evenodd"
46-
clip-rule="evenodd"
47-
d="M19.293 16.707a1 1 0 0 1-1.414 1.414l-6.293-6.293-6.293 6.293a1 1 0 1 1-1.414-1.414l6.293-6.293-6.293-6.293a1 1 0 1 1 1.414-1.414l6.293 6.293 6.293-6.293a1 1 0 1 1 1.414 1.414l-6.293 6.293 6.293 6.293z"
48-
style="
49-
transition: transform 0.3s
50-
ease-in-out;
51-
"
52-
></path>
53-
<path
54-
v-if="!isMenuOpen"
55-
fill-rule="evenodd"
56-
clip-rule="evenodd"
57-
d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"
58-
style="
59-
transition: transform 0.3s
60-
ease-in-out;
61-
"
62-
></path>
63-
</svg>
25+
<icon name="hamburger" class="w-6 h-6" :isMenuOpen="isMenuOpen"/>
6426
</span>
6527
</button>
6628
<div
@@ -793,20 +755,7 @@
793755
<button
794756
class="p-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-gray-700"
795757
>
796-
<svg
797-
class="h-6 w-6"
798-
xmlns="http://www.w3.org/2000/svg"
799-
fill="none"
800-
viewBox="0 0 24 24"
801-
stroke="currentColor"
802-
>
803-
<path
804-
strokeLinecap="round"
805-
strokeLinejoin="round"
806-
strokeWidth="{2}"
807-
d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
808-
/>
809-
</svg>
758+
<icon name="chat-bubble" />
810759
</button>
811760
<div class="ml-1 relative">
812761
<div>
@@ -1022,15 +971,7 @@
1022971
<div
1023972
class="pointer-events-none absolute inset-y-0 right-0 flex items-center mt-3 px-2 text-gray-700"
1024973
>
1025-
<svg
1026-
class="fill-current h-4 w-4 text-white"
1027-
xmlns="http://www.w3.org/2000/svg"
1028-
viewBox="0 0 20 20"
1029-
>
1030-
<path
1031-
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
1032-
/>
1033-
</svg>
974+
<icon name="chevron-down" class="w-4 h-4" />
1034975
</div>
1035976
</div>
1036977
</div>

0 commit comments

Comments
 (0)