docs: replace svg icons with css icons

packages/docs/package.json

@@ -41,6 +41,7 @@
     "vuetify": "workspace:*"
   },
   "devDependencies": {
+    "@iconify-json/mdi": "^1.1.67",
     "@emailjs/browser": "^4.3.3",
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@types/lodash-es": "^4.17.12",
@@ -69,6 +70,7 @@
     "markdown-it-meta": "^0.0.1",
     "markdown-it-prism": "^2.3.0",
     "markdownlint-cli": "^0.39.0",
+    "unocss": "^0.61.9",
     "unplugin-auto-import": "0.17.5",
     "unplugin-fonts": "1.0.3",
     "unplugin-vue-components": "^0.26.0",

packages/docs/src/components/Alert.vue

@@ -24,10 +24,10 @@
   })
   const icon = computed(() => {
     switch (type.value) {
-      case 'error': return 'mdi-close-circle-outline'
-      case 'info': return 'mdi-information-outline'
-      case 'success': return 'mdi-check-circle-outline'
-      case 'warning': return 'mdi-alert-circle-outline'
+      case 'error': return 'i-mdi:close-circle-outline'
+      case 'info': return 'i-mdi:information-outline'
+      case 'success': return 'i-mdi:check-circle-outline'
+      case 'warning': return 'i-mdi:alert-circle-outline'
       default: return '$vuetify'
     }
   })

packages/docs/src/components/PageFeatures.vue

@@ -2,7 +2,7 @@
   <div class="mb-4">
     <page-feature-chip
       v-if="one.isSubscriber && user.pins"
-      :prepend-icon="`mdi-pin${!pinned ? '-outline' : ''}`"
+      :prepend-icon="`${pinned ? 'i-mdi:pin' : 'i-mdi:pin-outline'}`"
       text="Pin"
       @click="onClickPin"
     >
@@ -15,7 +15,7 @@
       v-if="route.meta?.features?.figma"
       :text="t('figma-design')"
       href="https://figma.vuetifyjs.com/"
-      prepend-icon="mdi-image"
+      prepend-icon="i-mdi:image"
       rel="noopener noreferrer"
       target="_blank"
     >
@@ -28,7 +28,7 @@
       v-if="route.meta?.features?.report"
       :text="t('report-a-bug')"
       href="https://issues.vuetifyjs.com/"
-      prepend-icon="mdi-bug-outline"
+      prepend-icon="i-mdi:bug-outline"
       rel="noopener noreferrer"
       target="_blank"
     >
@@ -41,7 +41,7 @@
       v-if="label"
       :href="label"
       :text="t('open-issues')"
-      prepend-icon="mdi-alert-circle-outline"
+      prepend-icon="i-mdi:alert-circle-outline"
       rel="noopener noreferrer"
       target="_blank"
     >
@@ -54,7 +54,7 @@
       v-if="route.meta?.features?.github"
       :href="`https://github.com/vuetifyjs/vuetify/tree/${branch}/packages/vuetify/src${route.meta.features.github}`"
       :text="t('view-in-github')"
-      prepend-icon="mdi-github"
+      prepend-icon="i-mdi:github"
       rel="noopener noreferrer"
       target="_blank"
     >
@@ -67,7 +67,7 @@
       v-if="route.meta?.features?.spec"
       :href="route.meta.features.spec"
       :text="t('design-spec')"
-      prepend-icon="mdi-material-design"
+      prepend-icon="i-mdi:material-design"
       rel="noopener noreferrer"
       target="_blank"
     >

packages/docs/src/components/about/TeamMember.vue

@@ -3,7 +3,7 @@
     <div class="d-flex">
       <v-avatar color="grey-lighten-2" size="72">
         <v-img v-if="member.avatar" :src="member.avatar" />
-        <v-icon v-else color="grey" size="35"> mdi-image</v-icon>
+        <v-icon v-else class="i-mdi:image" color="grey" size="35" />
       </v-avatar>
 
       <div class="ps-6 font-weight-medium">
@@ -138,7 +138,7 @@
         <border-chip
           v-if="member.joined"
           :text="t('joined', { date: member.joined })"
-          prepend-icon="mdi-calendar"
+          prepend-icon="i-mdi:calendar"
         />
       </div>
     </div>
@@ -160,9 +160,9 @@
   const { t } = useI18n()
 
   const icons = {
-    languages: 'mdi-translate',
-    location: 'mdi-map-marker-outline',
-    work: 'mdi-briefcase-variant-outline',
+    languages: 'i-mdi:translate',
+    location: 'i-mdi:map-marker-outline',
+    work: 'i-mdi:briefcase-variant-outline',
   }
   const fields = ['work', 'location', 'languages'] as const
 
@@ -182,7 +182,7 @@
       links.push({
         color: '#24292E',
         href: `https://github.com/${props.member.github}`,
-        icon: 'mdi-github',
+        icon: 'i-mdi:github',
         tooltip: 'GitHub',
       })
     }
@@ -191,7 +191,7 @@
       links.push({
         color: '#0077B5',
         href: `https://linkedin.com/in/${props.member.linkedin}`,
-        icon: 'mdi-linkedin',
+        icon: 'i-mdi:linkedin',
         tooltip: 'LinkedIn',
       })
     }
@@ -200,7 +200,7 @@
       links.push({
         color: '#738ADB',
         copyText: props.member.discord,
-        icon: 'mdi-discord',
+        icon: 'i-mdi:discord',
         tooltip: `Discord: ${props.member.discord} (click to copy)`,
       })
     }

packages/docs/src/components/api/Inline.vue

@@ -1,6 +1,6 @@
 <template>
   <border-chip
-    :prepend-icon="user.api === 'inline' ? 'mdi-flask-outline' : 'mdi-flask-empty-outline'"
+    :prepend-icon="user.api === 'inline' ? 'i-mdi:flask-outline' : 'i-mdi:flask-empty-outline'"
     :text="t('toggle', [`${t('inline')} ${t('api')}`])"
     class="mb-2"
     @click="onClick"
@@ -18,7 +18,7 @@
           class="mb-2"
           color="primary"
           label="Component API"
-          prepend-inner-icon="mdi-view-dashboard"
+          prepend-inner-icon="i-mdi:view-dashboard"
           style="max-width: 250px;"
           variant="outlined"
           hide-details

packages/docs/src/components/app/BackToTop.vue

@@ -3,7 +3,7 @@
     v-model="model"
     color="primary"
     elevation="8"
-    icon="mdi-chevron-up"
+    icon="i-mdi:chevron-up"
     size="large"
     app
     v-scroll="onScroll"

packages/docs/src/components/app/CommitBtn.vue

@@ -1,7 +1,7 @@
 <template>
   <v-btn
     :href="`https://github.com/vuetifyjs/vuetify/commit/${commits.latest?.sha}`"
-    :prepend-icon="commits.latest ? 'mdi-source-commit' : undefined"
+    :prepend-icon="commits.latest ? 'i-mdi:source-commit' : undefined"
     :readonly="!commits.latest"
     :text="commits.latest?.sha.slice(0, 7)"
     class="text-caption"

packages/docs/src/components/app/Link.vue

@@ -32,9 +32,9 @@
   )
 
   const icon = computed(() => {
-    if (isSamePage.value) return 'mdi-pound'
-    if (isExternal.value) return 'mdi-open-in-new'
-    if (props.href) return 'mdi-page-next'
+    if (isSamePage.value) return 'i-mdi:pound'
+    if (isExternal.value) return 'i-mdi:open-in-new'
+    if (props.href) return 'i-mdi:page-next'
 
     return null
   })

packages/docs/src/components/app/Markup.vue

@@ -19,7 +19,7 @@
         height="44"
         rounded="tl"
       >
-        <v-icon icon="mdi-file-tree" />
+        <v-icon icon="i-mdi:file-tree" />
 
         {{ resource }}
       </v-sheet>
@@ -111,7 +111,7 @@
   })
 
   const className = computed(() => `language-${props.language}`)
-  const icon = computed(() => clicked.value ? 'mdi-check' : 'mdi-clipboard-text-outline')
+  const icon = computed(() => clicked.value ? 'i-mdi:check' : 'i-mdi:clipboard-text-outline')
 
   async function copy () {
     const el = root.value?.$el.querySelector('code')

packages/docs/src/components/app/TextField.vue

@@ -2,7 +2,7 @@
   <v-text-field
     :placeholder="t('search.label')"
     base-color="disabled"
-    prepend-inner-icon="mdi-magnify"
+    prepend-inner-icon="i-mdi:magnify"
     variant="outlined"
     hide-details
     persistent-placeholder

packages/docs/src/components/app/Toc.vue

@@ -92,7 +92,7 @@
               class="text-none border-opacity-50 border-primary"
               color="primary"
               href="https://github.com/sponsors/johnleider"
-              prepend-icon="mdi-github"
+              prepend-icon="i-mdi:github"
               rel="noopener noreferrer"
               size="large"
               target="_blank"

packages/docs/src/components/app/VersionBtn.vue

@@ -3,7 +3,7 @@
     :text="version"
     :to="rpath(`/getting-started/release-notes/?version=v${version}`)"
     class="text-caption"
-    prepend-icon="mdi-tag-outline"
+    prepend-icon="i-mdi:tag-outline"
     size="small"
     variant="text"
     slim

packages/docs/src/components/app/bar/Bar.vue

@@ -11,7 +11,7 @@
 
       <AppBtn
         v-if="route.meta.layout !== 'home' && mdAndDown"
-        icon="mdi-menu"
+        icon="i-mdi:menu"
         @click="app.drawer = !app.drawer"
       />
 

packages/docs/src/components/app/bar/EcosystemMenu.vue

@@ -29,19 +29,19 @@
     {
       title: 'github',
       href: 'https://github.com/vuetifyjs/vuetify',
-      appendIcon: 'mdi-github',
+      appendIcon: 'i-mdi:github',
     },
     {
       title: 'reddit',
       href: 'https://reddit.com/r/vuetifyjs',
-      appendIcon: 'mdi-reddit',
+      appendIcon: 'i-mdi:reddit',
     },
     { divider: true },
     { subheader: t('tools') },
     {
       title: 'awesome',
       href: 'https://github.com/vuetifyjs/awesome-vuetify',
-      appendIcon: 'mdi-creation-outline',
+      appendIcon: 'i-mdi:creation-outline',
     },
     {
       title: 'brand-kit',
@@ -51,22 +51,22 @@
     {
       title: 'create',
       href: 'https://tryvuetify.com/',
-      appendIcon: 'mdi-widgets-outline',
+      appendIcon: 'i-mdi:widgets-outline',
     },
     {
       title: 'pastebin',
       href: 'https://bin.vuetifyjs.com/',
-      appendIcon: 'mdi-delete-outline',
+      appendIcon: 'i-mdi:delete-outline',
     },
     {
       title: 'playground',
       href: 'https://play.vuetifyjs.com/',
-      appendIcon: 'mdi-play-circle-outline',
+      appendIcon: 'i-mdi:play-circle-outline',
     },
     {
       title: 'jobs',
       to: rpath('/resources/jobs-for-vue/'),
-      appendIcon: 'mdi-briefcase-variant-outline',
+      appendIcon: 'i-mdi:briefcase-variant-outline',
     },
     {
       title: 'snips',
@@ -81,12 +81,12 @@
     {
       title: 'themes',
       to: rpath('/resources/themes/'),
-      appendIcon: 'mdi-shape-outline',
+      appendIcon: 'i-mdi:shape-outline',
     },
     {
       title: 'ui-kits',
       to: rpath('/resources/ui-kits/'),
-      appendIcon: 'mdi-vector-difference-ab',
+      appendIcon: 'i-mdi:vector-difference-ab',
     },
   ]))
 </script>

packages/docs/src/components/app/bar/JobsLink.vue

@@ -22,8 +22,8 @@
 
   const icon = computed(() => {
     return currentRoute.value.path.match('resources/jobs-for-vue')
-      ? 'mdi-briefcase-variant'
-      : 'mdi-briefcase-variant-outline'
+      ? 'i-mdi:briefcase-variant'
+      : 'i-mdi:briefcase-variant-outline'
   })
 
   function onClick () {

packages/docs/src/components/app/bar/LanguageMenu.vue

@@ -7,7 +7,7 @@
     <template #activator="{ props }">
       <AppBtn
         color="medium-emphasis"
-        icon="mdi-translate"
+        icon="i-mdi:translate"
         v-bind="props"
       />
     </template>