feat!: advanced customization of the service icon

Author: hywax

components/service/Base.vue

@@ -1,17 +1,18 @@
 <template>
   <div class="p-4 flex gap-4">
     <div class="flex-shrink-0 flex">
-      <a :href="link" :title="title" class="self-center w-16 h-16 overflow-hidden rounded-2xl border border-black/5">
+      <a :href="link" class="self-center w-16 h-16 overflow-hidden rounded-2xl border border-fg/10 dark:border-fg/15">
         <slot name="icon">
-          <img v-if="icon" :src="icon" :alt="title" class="block bg-contain h-full w-full">
-          <div v-else class="bg-fg-dimmed h-full w-full" />
+          <div :class="iconWrapClasses" :style="iconWrapStyles">
+            <Icon v-if="icon?.name" :name="icon.name" :class="iconClasses" />
+            <img v-else-if="icon?.url" :src="icon.url" alt="" :class="iconClasses">
+          </div>
         </slot>
       </a>
     </div>
-
     <div>
       <h3 class="text-lg mt-1 font-semibold line-clamp-1">
-        <a :href="link" :title="title">{{ title }}</a>
+        <a :href="link">{{ title }}</a>
       </h3>
       <p class="text-sm text-fg-dimmed line-clamp-1">
         <slot name="description" :description="description">
@@ -25,5 +26,17 @@
 <script setup lang="ts">
 import type { BaseService } from '~/types'
 
-defineProps<BaseService>()
+const props = defineProps<BaseService>()
+
+const iconsExist = computed(() => props.icon && (props.icon?.name || props.icon?.url))
+const iconClasses = 'block h-full w-full'
+const iconWrapClasses = computed(() => ({
+  'bg-fg/5 dark:bg-fg/10': !iconsExist.value || (props.icon?.wrap && !props.icon?.background),
+  'p-2': props.icon?.wrap,
+  'h-full w-full': true,
+}))
+const iconWrapStyles = computed(() => ({
+  background: props.icon?.background,
+  color: props.icon?.color,
+}))
 </script>

nuxt.config.ts

@@ -63,6 +63,7 @@ export default defineNuxtConfig({
     '@nuxtjs/i18n',
     '@vueuse/nuxt',
     '@vite-pwa/nuxt',
+    'nuxt-icon',
   ],
   i18n: {
     locales: [

package.json

@@ -35,6 +35,7 @@
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
     "nuxt": "^3.9.0",
+    "nuxt-icon": "^0.6.8",
     "typescript": "^5.3.3",
     "vue-tsc": "^1.8.27"
   },
@@ -44,4 +45,4 @@
   "lint-staged": {
     "*.ts": "yarn run lint"
   }
-}
+}

types/services.d.ts

@@ -4,7 +4,13 @@ export interface BaseService {
   title: string
   description?: string
   link: string
-  icon?: string
+  icon?: {
+    url?: string
+    name?: string
+    wrap?: boolean
+    background?: string
+    color?: string
+  }
   options?: Record<string, string | number | boolean>
   secrets?: Record<string, string | number | boolean>
 }

yarn.lock

@@ -1447,6 +1447,25 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz#e5211452df060fa8522b55c7b3c0c4d1981cb044"
   integrity sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==
 
+"@iconify/collections@^1.0.374":
+  version "1.0.375"
+  resolved "https://registry.yarnpkg.com/@iconify/collections/-/collections-1.0.375.tgz#e75d4f84ba7c94c7300cf946de2d4372a0b7734c"
+  integrity sha512-BCHzOQKuKaQRqTzZ0dAXXhGoPhho1B3bdRMyX2Jz/1t62+3WoK9s7frqOekyEU/Z354TI/Z/5b5y+OaIGunk8w==
+  dependencies:
+    "@iconify/types" "*"
+
+"@iconify/types@*", "@iconify/types@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@iconify/types/-/types-2.0.0.tgz#ab0e9ea681d6c8a1214f30cd741fe3a20cc57f57"
+  integrity sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==
+
+"@iconify/vue@^4.1.1":
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/@iconify/vue/-/vue-4.1.1.tgz#c143c2973a4990ba2b47b766f80a9bca97937305"
+  integrity sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==
+  dependencies:
+    "@iconify/types" "^2.0.0"
+
 "@intlify/bundle-utils@^7.4.0":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@intlify/bundle-utils/-/bundle-utils-7.5.0.tgz#fb50947c4e9997228a8abd5775e57a1202f71b09"
@@ -1748,7 +1767,7 @@
   resolved "https://registry.yarnpkg.com/@nuxt/devalue/-/devalue-2.0.2.tgz#5749f04df13bda4c863338d8dabaf370f45ef7c7"
   integrity sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==
 
-"@nuxt/devtools-kit@1.0.6":
+"@nuxt/devtools-kit@1.0.6", "@nuxt/devtools-kit@^1.0.6":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@nuxt/devtools-kit/-/devtools-kit-1.0.6.tgz#e4a96fc20a9bb88fe58a3d775fcc1e317e3438cb"
   integrity sha512-CUSE++NRTIwvBWbLsPzLZIDMpXr6oyllaWm8tOR3Wgr/04jW31uyWbXjU/fxRuDotQwZfcTe19uunRoCoBnk1Q==
@@ -6866,6 +6885,16 @@ nuxi@^3.10.0:
   optionalDependencies:
     fsevents "~2.3.3"
 
+nuxt-icon@^0.6.8:
+  version "0.6.8"
+  resolved "https://registry.yarnpkg.com/nuxt-icon/-/nuxt-icon-0.6.8.tgz#15c36e92e4baa03adf322938dba86bb872b6251f"
+  integrity sha512-6eWlNOb6Uvp63uXFdhcmsB1JlubDv76Pot/VwmIu0yJxDYhwytbnv3WAjw2khl2l7W/65V4eMGIEeX9C5Ahxng==
+  dependencies:
+    "@iconify/collections" "^1.0.374"
+    "@iconify/vue" "^4.1.1"
+    "@nuxt/devtools-kit" "^1.0.6"
+    "@nuxt/kit" "^3.9.0"
+
 nuxt@^3.9.0:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/nuxt/-/nuxt-3.9.0.tgz#a63e9a0a8d70d2233edd0f8ad87d13ed16ad84b7"