chore: add type constraints for icon class names (#1538)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: Yusra89hash

app/components/Button/Base.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { IconClass } from '~/types'
+
 const props = withDefaults(
   defineProps<{
     disabled?: boolean
@@ -8,7 +10,7 @@ const props = withDefaults(
     ariaKeyshortcuts?: string
     block?: boolean
 
-    classicon?: string
+    classicon?: IconClass
   }>(),
   {
     type: 'button',

app/components/Link/Base.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { NuxtLinkProps } from '#app'
+import type { IconClass } from '~/types'
 
 const props = withDefaults(
   defineProps<
@@ -26,7 +27,7 @@ const props = withDefaults(
        */
       rel?: never
 
-      classicon?: string
+      classicon?: IconClass
 
       to?: NuxtLinkProps['to']
 

app/components/Tag/Static.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import type { IconClass } from '~/types'
+
 const props = withDefaults(
   defineProps<{
     as?: string | Component
     variant?: 'ghost' | 'default'
 
-    classicon?: string
+    classicon?: IconClass
   }>(),
   { as: 'span', variant: 'default' },
 )

app/pages/package/[[org]]/[name].vue

@@ -9,6 +9,7 @@ import type {
   SkillsListResponse,
 } from '#shared/types'
 import type { JsrPackageInfo } from '#shared/types/jsr'
+import type { IconClass } from '~/types'
 import { assertValidPackageName } from '#shared/utils/npm'
 import { joinURL } from 'ufo'
 import { areUrlsEquivalent } from '#shared/utils/url'
@@ -246,7 +247,7 @@ const { copied: copiedPkgName, copy: copyPkgName } = useClipboard({
 
 //copy version name
 const { copied: copiedVersion, copy: copyVersion } = useClipboard({
-  source: resolvedVersion.value ?? '',
+  source: () => resolvedVersion.value ?? '',
   copiedDuring: 2000,
 })
 
@@ -398,7 +399,7 @@ const repositoryUrl = computed(() => {
 
 const { meta: repoMeta, repoRef, stars, starsLink, forks, forksLink } = useRepoMeta(repositoryUrl)
 
-const PROVIDER_ICONS: Record<string, string> = {
+const PROVIDER_ICONS: Record<string, IconClass> = {
   github: 'i-simple-icons:github',
   gitlab: 'i-simple-icons:gitlab',
   bitbucket: 'i-simple-icons:bitbucket',
@@ -411,7 +412,7 @@ const PROVIDER_ICONS: Record<string, string> = {
   radicle: 'i-lucide:network', // Radicle is a P2P network, using network icon
 }
 
-const repoProviderIcon = computed(() => {
+const repoProviderIcon = computed((): IconClass => {
   const provider = repoRef.value?.provider
   if (!provider) return 'i-simple-icons:github'
   return PROVIDER_ICONS[provider] ?? 'i-lucide:code'

app/types/icon.ts

@@ -0,0 +1,6 @@
+export type IconClass =
+  | `i-carbon:${string}`
+  | `i-lucide:${string}`
+  | `i-simple-icons:${string}`
+  | `i-svg-spinners:${string}`
+  | `i-custom:${string}`

app/types/index.ts

@@ -1 +1,2 @@
+export * from './icon'
 export * from './navigation'