Skip to content

Commit 0011680

Browse files
shiveroshivero
committed
refactor icons to iconify
1 parent 4ae280e commit 0011680

24 files changed

+100
-241
lines changed

‎.prettierrc

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
{
2-
"printWidth": 90,
2+
"printWidth": 240,
33
"bracketSameLine": true,
44
"plugins": [
55
"prettier-plugin-tailwindcss"
66
],
7-
"tailwindFunctions": ["tw", "cva", "clsx"]
7+
"tailwindFunctions": [
8+
"tw",
9+
"cva",
10+
"clsx"
11+
]
812
}

‎bun.lockb

1.89 KB
Binary file not shown.

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<title>Discord clone - Vue 3 + Vite + TailwindCSS </title>
99
</head>
1010

11-
<body class="bg-discord-dark-2 h-screen w-screen">
11+
<body class="bg-discord-dark-2 h-dvh w-screen">
1212
<div id="app" class="h-full overflow-hidden"></div>
1313
<script type="module" src="/src/main.ts"></script>
1414
</body>

‎package.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,23 @@
1111
},
1212
"dependencies": {
1313
"@headlessui/vue": "^1.7.16",
14+
"@iconify/tailwind": "^0.1.4",
1415
"@types/node": "^20.10.0",
1516
"class-variance-authority": "^0.7.0",
1617
"date-fns": "^2.30.0",
1718
"pinia": "^2.1.7",
1819
"vue": "^3.3.4"
1920
},
2021
"devDependencies": {
22+
"@iconify-json/mdi": "^1.1.64",
23+
"@iconify-json/mdi-light": "^1.1.10",
24+
"@iconify-json/tabler": "^1.1.105",
2125
"@vitejs/plugin-vue": "^4.2.3",
2226
"autoprefixer": "^10.4.16",
2327
"postcss": "^8.4.31",
2428
"prettier": "^3.1.0",
2529
"prettier-plugin-tailwindcss": "^0.5.7",
26-
"tailwindcss": "^3.3.5",
30+
"tailwindcss": "^3.4.1",
2731
"typescript": "^5.0.2",
2832
"vite": "^4.4.5",
2933
"vue-tsc": "^1.8.5"

‎src/components/Channel.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div :class="unreadClass" class="">
33
<div
44
:class="isActive"
5-
class="mx-2 flex h-8 items-center gap-2 rounded-sm px-2 opacity-100 hover:cursor-pointer ">
5+
class="mx-2 flex h-8 items-center gap-2 rounded-md px-2 opacity-100 hover:cursor-pointer ">
66
<div v-if="props.channel.type == 'voice'">
77
<div><VolumeChannelIcon class="fill-gray-500" /></div>
88
</div>

‎src/components/ChannelHeader.vue

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const muteNotificationOptions = [
5252
<template>
5353
<div
5454
class="relative flex h-12 flex-shrink-0 items-center justify-between rounded-tr-xl bg-discord-dark px-4 text-slate-200 shadow-slight-bottom">
55-
<div>
55+
<div class="flex items-center flex-nowrap">
5656
<TextChannelIcon
5757
class="inline-block fill-gray-500"
5858
v-if="channelStore.type === 'text'" />
@@ -61,11 +61,11 @@ const muteNotificationOptions = [
6161
v-else-if="channelStore.type === 'voice'" />
6262
<span class="ml-2 font-bold">{{ channelStore.name }}</span>
6363
</div>
64-
<div class="flex flex-row items-center gap-4">
64+
<div class="flex flex-row items-center gap-4 outline-dashed outline-1">
6565
<Popover v-slot="{ open }" class="relative">
66-
<PopoverButton>
66+
<PopoverButton class="flex items-center">
6767
<Tooltip intent="primary" size="medium" :tooltipText="localeEn.ui_threads.name">
68-
<MdiCommentMultiple class="inline-block fill-gray-400 text-2xl" />
68+
<MdiCommentMultiple class="inline-block text-gray-400 text-2xl" />
6969
</Tooltip>
7070
</PopoverButton>
7171
<PopoverPanel class="absolute right-0 top-8 z-10 w-80 rounded-lg">
@@ -77,8 +77,8 @@ const muteNotificationOptions = [
7777
<Tooltip
7878
intent="primary"
7979
size="medium"
80-
:tooltipText="localeEn.ui_notiifcations.name">
81-
<MdiBell class="inline-block fill-gray-400 text-2xl" />
80+
:tooltipText="localeEn.ui_notifcations.name">
81+
<MdiBell class="inline-block text-gray-400 text-2xl" />
8282
</Tooltip>
8383
</MenuButton>
8484

@@ -90,7 +90,7 @@ const muteNotificationOptions = [
9090
<MenuButton
9191
class="flex h-8 w-full items-center justify-between rounded-sm p-2 text-sm text-gray-400 hover:bg-discord-blue hover:text-white"
9292
:onmouseenter="() => (muteMenuOpen = true)">
93-
Mute Channel <ArrowRight class="translate-x-2 fill-gray-400 text-lg" />
93+
Mute Channel <ArrowRight class="translate-x-2 text-gray-400 text-lg" />
9494
</MenuButton>
9595
<MenuItems
9696
static
@@ -130,10 +130,10 @@ const muteNotificationOptions = [
130130
</MenuItems>
131131
</Menu>
132132
<Tooltip intent="primary" size="medium" :tooltipText="localeEn.ui_pinned.name">
133-
<MdiPin class="inline-block fill-gray-400 text-2xl" />
133+
<MdiPin class="inline-block text-gray-400 text-2xl" />
134134
</Tooltip>
135135
<Tooltip intent="primary" size="medium" :tooltipText="localeEn.ui_members.name">
136-
<MdiAccountMultiple class="inline-block fill-gray-400 text-2xl cursor-pointer" @click="memberPanelStore.toggleMemberPanel" />
136+
<MdiAccountMultiple class="inline-block text-gray-400 text-2xl cursor-pointer" @click="memberPanelStore.toggleMemberPanel" />
137137
</Tooltip>
138138
<div class="flex items-center">
139139
<input
@@ -142,14 +142,14 @@ const muteNotificationOptions = [
142142
placeholder="Search" />
143143
<div
144144
class="inline-flex h-6 -translate-x-5 items-center rounded-r-sm bg-discord-dark-3">
145-
<MdiMagnify class="shrink-0 fill-gray-400 text-base" />
145+
<MdiMagnify class="shrink-0 text-gray-400 text-base" />
146146
</div>
147147
<div class="flex flex-row gap-4">
148148
<Tooltip intent="primary" size="medium" :tooltipText="localeEn.ui_inbox.name">
149-
<MdiInbox class="inline-block shrink-0 fill-gray-400 text-2xl" />
149+
<MdiInbox class="inline-block shrink-0 text-gray-400 text-2xl" />
150150
</Tooltip>
151151
<Tooltip intent="primary" size="medium" :tooltipText="localeEn.ui_help.name">
152-
<MdiHelpCircle class="inline-block shrink-0 fill-gray-400 text-2xl" />
152+
<MdiHelpCircle class="inline-block shrink-0 text-gray-400 text-2xl" />
153153
</Tooltip>
154154
</div>
155155
</div>

‎src/components/Icons/ArrowDown.vue

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
1-
<script setup lang="ts">
2-
</script>
3-
41
<template>
5-
<svg
6-
xmlns="http://www.w3.org/2000/svg"
7-
height="1em"
8-
width="1em"
9-
viewBox="0 -960 960 960"
10-
>
11-
<path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" />
12-
</svg>
2+
<span class="icon-[mdi--chevron-down]" :class="props.classes"></span>
133
</template>
4+
5+
<script setup lang="ts">
6+
const props = defineProps({
7+
classes: { type: String, default: "" },
8+
});
9+
</script>

‎src/components/Icons/ArrowRight.vue

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
1-
<script setup lang="ts">
2-
</script>
3-
41
<template>
5-
<svg
6-
xmlns="http://www.w3.org/2000/svg"
7-
height="1em"
8-
width="1em"
9-
viewBox="0 -960 960 960"
10-
>
11-
<path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" />
12-
</svg>
2+
<span class="icon-[mdi--chevron-right]" :class="props.classes"></span>
133
</template>
4+
5+
<script setup lang="ts">
6+
const props = defineProps({
7+
classes: { type: String, default: "" },
8+
});
9+
</script>

‎src/components/Icons/MdiAccountMultiple.vue

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,9 @@
11
<template>
2-
<svg
3-
xmlns="http://www.w3.org/2000/svg"
4-
height="1em"
5-
width="1em"
6-
:viewBox="viewBox">
7-
<path
8-
fill="inherit"
9-
d="M16 17v2H2v-2s0-4 7-4s7 4 7 4m-3.5-9.5A3.5 3.5 0 1 0 9 11a3.5 3.5 0 0 0 3.5-3.5m3.44 5.5A5.32 5.32 0 0 1 18 17v2h4v-2s0-3.63-6.06-4M15 4a3.39 3.39 0 0 0-1.93.59a5 5 0 0 1 0 5.82A3.39 3.39 0 0 0 15 11a3.5 3.5 0 0 0 0-7Z"></path>
10-
</svg>
2+
<span class="icon-[mdi--account-multiple]" :class="props.classes"></span>
113
</template>
124

135
<script setup lang="ts">
14-
import { computed } from "vue";
15-
166
const props = defineProps({
17-
size: { type: Number, default: 24 },
7+
classes: { type: String, default: "" },
188
});
19-
20-
const viewBox = computed(() => `0 0 ${props.size} ${props.size}`);
219
</script>

‎src/components/Icons/MdiBell.vue

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,9 @@
11
<template>
2-
<svg
3-
xmlns="http://www.w3.org/2000/svg"
4-
height="1em"
5-
width="1em"
6-
:viewBox="viewBox">
7-
<path
8-
fill="inherit"
9-
d="M21 19v1H3v-1l2-2v-6c0-3.1 2.03-5.83 5-6.71V4a2 2 0 0 1 2-2a2 2 0 0 1 2 2v.29c2.97.88 5 3.61 5 6.71v6l2 2m-7 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2"></path>
10-
</svg>
2+
<span class="icon-[mdi--bell]" :class="props.classes"></span>
113
</template>
124

135
<script setup lang="ts">
14-
import { computed } from 'vue';
15-
166
const props = defineProps({
17-
size: { type: Number, default: 24 },
7+
classes: { type: String, default: "" },
188
});
19-
20-
const viewBox = computed(() => `0 0 ${props.size} ${props.size}`);
21-
</script>
9+
</script>

0 commit comments

Comments
 (0)