feat: update icons

src/components/PostCard.vue

@@ -18,19 +18,19 @@
         <NcActions>
           <NcActionButton @click="$emit('reply', post)">
             <template #icon>
-              <span class="icon">💬</span>
+              <ReplyIcon :size="20" />
             </template>
             {{ strings.reply }}
           </NcActionButton>
           <NcActionButton v-if="canEdit" @click="$emit('edit', post)">
             <template #icon>
-              <span class="icon">✏️</span>
+              <PencilIcon :size="20" />
             </template>
             {{ strings.edit }}
           </NcActionButton>
           <NcActionButton v-if="canDelete" @click="$emit('delete', post)">
             <template #icon>
-              <span class="icon">🗑️</span>
+              <DeleteIcon :size="20" />
             </template>
             {{ strings.delete }}
           </NcActionButton>
@@ -49,6 +49,9 @@ import NcAvatar from '@nextcloud/vue/components/NcAvatar'
 import NcDateTime from '@nextcloud/vue/components/NcDateTime'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import ReplyIcon from '@icons/Reply.vue'
+import PencilIcon from '@icons/Pencil.vue'
+import DeleteIcon from '@icons/Delete.vue'
 import { t } from '@nextcloud/l10n'
 import { getCurrentUser } from '@nextcloud/auth'
 
@@ -59,6 +62,9 @@ export default {
     NcDateTime,
     NcActions,
     NcActionButton,
+    ReplyIcon,
+    PencilIcon,
+    DeleteIcon,
   },
   props: {
     post: {

src/components/ThreadCard.vue

@@ -4,8 +4,12 @@
       <div class="thread-header">
         <div class="thread-title-row">
           <h4 class="thread-title">
-            <span v-if="thread.isPinned" class="badge badge-pinned" :title="strings.pinned">📌</span>
-            <span v-if="thread.isLocked" class="badge badge-locked" :title="strings.locked">🔒</span>
+            <span v-if="thread.isPinned" class="badge badge-pinned" :title="strings.pinned">
+              <PinIcon :size="16" />
+            </span>
+            <span v-if="thread.isLocked" class="badge badge-locked" :title="strings.locked">
+              <LockIcon :size="16" />
+            </span>
             {{ thread.title }}
           </h4>
         </div>
@@ -23,12 +27,16 @@
 
       <div class="thread-stats">
         <div class="stat">
-          <span class="stat-icon">💬</span>
+          <span class="stat-icon">
+            <CommentIcon :size="20" />
+          </span>
           <span class="stat-value">{{ thread.postCount || 0 }}</span>
           <span class="stat-label">{{ strings.posts }}</span>
         </div>
         <div class="stat">
-          <span class="stat-icon">👁️</span>
+          <span class="stat-icon">
+            <EyeIcon :size="20" />
+          </span>
           <span class="stat-value">{{ thread.viewCount || 0 }}</span>
           <span class="stat-label">{{ strings.views }}</span>
         </div>
@@ -39,12 +47,20 @@
 
 <script>
 import NcDateTime from '@nextcloud/vue/components/NcDateTime'
+import PinIcon from '@icons/Pin.vue'
+import LockIcon from '@icons/Lock.vue'
+import CommentIcon from '@icons/Comment.vue'
+import EyeIcon from '@icons/Eye.vue'
 import { t } from '@nextcloud/l10n'
 
 export default {
   name: 'ThreadCard',
   components: {
     NcDateTime,
+    PinIcon,
+    LockIcon,
+    CommentIcon,
+    EyeIcon,
   },
   props: {
     thread: {

src/views/ThreadView.vue

@@ -31,8 +31,12 @@
     <div v-else-if="thread" class="thread-header mt-16">
       <div class="thread-title-section">
         <h2 class="thread-title">
-          <span v-if="thread.isPinned" class="badge badge-pinned" :title="strings.pinned">📌</span>
-          <span v-if="thread.isLocked" class="badge badge-locked" :title="strings.locked">🔒</span>
+          <span v-if="thread.isPinned" class="badge badge-pinned" :title="strings.pinned">
+            <PinIcon :size="20" />
+          </span>
+          <span v-if="thread.isLocked" class="badge badge-locked" :title="strings.locked">
+            <LockIcon :size="20" />
+          </span>
           {{ thread.title }}
         </h2>
         <div class="thread-meta">
@@ -46,7 +50,9 @@
           </span>
           <span class="meta-divider">·</span>
           <span class="meta-item">
-            <span class="stat-icon">👁️</span>
+            <span class="stat-icon">
+              <EyeIcon :size="16" />
+            </span>
             <span class="stat-label">{{ strings.views(thread.viewCount) }}</span>
           </span>
         </div>
@@ -82,6 +88,9 @@ import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcDateTime from '@nextcloud/vue/components/NcDateTime'
 import PostCard from '@/components/PostCard.vue'
+import PinIcon from '@icons/Pin.vue'
+import LockIcon from '@icons/Lock.vue'
+import EyeIcon from '@icons/Eye.vue'
 
 import { ocs } from '@/axios'
 import { t, n } from '@nextcloud/l10n'
@@ -94,6 +103,9 @@ export default {
     NcLoadingIcon,
     NcDateTime,
     PostCard,
+    PinIcon,
+    LockIcon,
+    EyeIcon,
   },
   data() {
     return {