chore: optimize @mdi/js and sass

Author: userquin

packages/docs/package.json

@@ -55,6 +55,7 @@
     "@vuetify/api-generator": "workspace:*",
     "ajv": "^8.12.0",
     "async-es": "^3.2.5",
+    "mdi-js-es": "7.4.47",
     "date-fns": "^3.6.0",
     "emailjs-com": "^3.2.0",
     "front-matter": "^4.0.2",
@@ -74,7 +75,7 @@
     "unplugin-auto-import": "0.17.5",
     "unplugin-fonts": "1.0.3",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.2.8",
+    "vite": "5.4.0-beta.1",
     "vite-plugin-md": "^0.21.5",
     "vite-plugin-pages": "^0.32.1",
     "vite-plugin-pwa": "^0.17.4",

packages/docs/src/components/doc/IconList.vue

@@ -46,21 +46,32 @@
 </template>
 
 <script setup>
-  // Data
-  import * as paths from '@mdi/js'
-
   const { t } = useI18n()
 
   const copied = shallowRef(false)
   const loading = shallowRef(true)
   const icons = shallowRef([])
+  const paths = shallowRef({})
   const selection = shallowRef()
   const search = shallowRef('')
 
-  import('virtual:mdi-js-icons')
-    .then(i => icons.value = i.icons)
-    .catch(console.error)
-    .finally(() => loading.value = false)
+  const data = Promise.all([
+    import('virtual:mdi-js-icons'),
+    import('@mdi/js'),
+  ])
+
+  function load () {
+    nextTick(() => {
+      data.then(([i, p]) => {
+        paths.value = p
+        icons.value = i.icons
+      })
+        .catch(console.error)
+        .finally(() => loading.value = false)
+    })
+  }
+
+  onMounted(load)
 
   /** @param s {string} */
   function * mapIcons (s) {
@@ -96,7 +107,7 @@
   })
 
   function getIcon (name) {
-    return 'svg:' + paths[camelize('mdi-' + name)]
+    return 'svg:' + paths.value[camelize('mdi-' + name)]
   }
   function itemProps (item) {
     return {

packages/docs/src/plugins/icons.ts

@@ -395,7 +395,7 @@ export {
   mdiWindowMinimize,
   mdiWindowRestore,
   mdiWrench,
-} from '@mdi/js'
+} from 'mdi-js-es'
 
 export const mdiDiscord = 'M22,24L16.75,19L17.38,21H4.5A2.5,2.5 0 0,1 2,18.5V3.5A2.5,2.5 0 0,1 4.5,1H19.5A2.5,2.5 0 0,1 22,3.5V24M12,6.8C9.32,6.8 7.44,7.95 7.44,7.95C8.47,7.03 10.27,6.5 10.27,6.5L10.1,6.33C8.41,6.36 6.88,7.53 6.88,7.53C5.16,11.12 5.27,14.22 5.27,14.22C6.67,16.03 8.75,15.9 8.75,15.9L9.46,15C8.21,14.73 7.42,13.62 7.42,13.62C7.42,13.62 9.3,14.9 12,14.9C14.7,14.9 16.58,13.62 16.58,13.62C16.58,13.62 15.79,14.73 14.54,15L15.25,15.9C15.25,15.9 17.33,16.03 18.73,14.22C18.73,14.22 18.84,11.12 17.12,7.53C17.12,7.53 15.59,6.36 13.9,6.33L13.73,6.5C13.73,6.5 15.53,7.03 16.56,7.95C16.56,7.95 14.68,6.8 12,6.8M9.93,10.59C10.58,10.59 11.11,11.16 11.1,11.86C11.1,12.55 10.58,13.13 9.93,13.13C9.29,13.13 8.77,12.55 8.77,11.86C8.77,11.16 9.28,10.59 9.93,10.59M14.1,10.59C14.75,10.59 15.27,11.16 15.27,11.86C15.27,12.55 14.75,13.13 14.1,13.13C13.46,13.13 12.94,12.55 12.94,11.86C12.94,11.16 13.45,10.59 14.1,10.59Z'
 export const mdiFormatTextdirectionLToR = 'M21,18L17,14V17H5V19H17V22M9,10V15H11V4H13V15H15V4H17V2H9A4,4 0 0,0 5,6A4,4 0 0,0 9,10Z'

packages/docs/vite.config.mts

@@ -50,6 +50,14 @@ export default defineConfig(({ command, mode, isSsrBuild }) => {
       'process.env.NODE_ENV': mode === 'production' || isSsrBuild ? '"production"' : '"development"',
       __INTLIFY_PROD_DEVTOOLS__: 'false',
     },
+    css: {
+      preprocessorOptions: {
+        sass: {
+          api: 'modern'
+        }
+      },
+      preprocessorMaxWorkers: true,
+    },
     build: {
       sourcemap: mode === 'development',
       modulePreload: false,