feat(icons): add Solar iconset via UnoCSS

[J-Sek]

• adds aliases for UnoCSS-based icon set Solar
• note: ratingHalf uses custom inline SVG path since Solar does not include a half-star icon
• MDI fallbacks:
  • keyboard modifier keys (command, ctrl, space, shift, alt, enter) for VKbd and VHotkey
  • unfold for ColorPicker
  • complete and close used in some components, but also suggested extensively across many examples

PR verification

Instructions to run the last snippet as dev/Playground.vue

1. install dependencies

cd packages/vuetify
pnpm i -D unocss @iconify-json/solar

2. add UnoCSS for dev Playground setup

// in dev/vuetify.js
import 'virtual:uno.css'

3. add uno.config.ts

import { defineConfig } from 'unocss'
import presetIcons from '@unocss/preset-icons'

export default defineConfig({
  presets: [presetIcons()],
})

4. add line in vite.config.ts (include UnoCSS() in plugins array)

import UnoCSS from 'unocss/vite'

---

dev/Playground.vue — icon set comparison table

<template>
  <v-app theme="dark">
    <v-main>
      <v-container max-width="400">
        <v-table density="compact" height="calc(100vh - 32px)" fixed-header>
          <thead>
            <tr>
              <th class="text-left">Alias</th>
              <th v-for="set in iconSets" :key="set.name" class="text-center">{{ set.name }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="alias in allAliases" :key="alias">
              <td><code>${{ alias }}</code></td>
              <td v-for="set in iconSets" :key="set.name" class="text-center">
                <v-tooltip v-if="set.aliases[alias]" location="bottom">
                  <template #activator="{ props }">
                    <v-icon v-bind="props" :icon="set.aliases[alias]" />
                  </template>
                  <code>{{ set.aliases[alias] }}</code>
                </v-tooltip>
                <span v-else class="text-disabled">—</span>
              </td>
            </tr>
          </tbody>
        </v-table>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup>
  import { computed } from 'vue'
  import { aliases as mdiAliases } from '@/iconsets/mdi-svg'
  import { aliases as solarAliases } from '@/iconsets/solar'

  const iconSets = [
    { name: 'MDI (SVG)', aliases: mdiAliases },
    { name: 'Solar', aliases: solarAliases },
  ]

  const allAliases = computed(() => {
    const keys = new Set()
    for (const set of iconSets) {
      for (const key of Object.keys(set.aliases)) {
        keys.add(key)
      }
    }
    return [...keys]
  })
</script>

<style>
.v-table thead th:not(:first-child) {
  writing-mode: sideways-lr;
  height: 200px;
}
</style>

[userquin]

We should add a note about inlining svg, wont be available for normal unocss icons at html elements since it wont be available, we will need the svg as custom icon in the preset icons.

We may file an issue at iconify to include the missing icon, or try to use another icon from the set.

I can ask cyberalien.

Can you show the inline svg icon here?

Note: i was checking all new unocss icon sets, same problem when using mdi svg aliases, those icons will go to the dom not to css.

[J-Sek]

UnoCSS docs mention createExternalPackageIconLoader but I did not have a chance to try it yet.
The idea is to have a tiny subset of i-mdi:... we could actually export either from vuetify or unocss-preset-vuetify.