feat(Icon): switch to nuxt-icon with dynamic prop or app config

[benjamincanac]

🔗 Linked issue

#267

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR allows to pass a dynamic prop to the UIcon so it uses nuxt-icon underneath, this can be quite useful when using dynamic class names or for icons coming from a database for example.

This behaviour can be changed globally in your app.config.ts through ui.icons.dynamic:

export default defineAppConfig({
  ui: {
    primary: 'green',
    gray: 'slate',
    icons: {
      dynamic: true
    }
  }
})

There is however a little issue with this, as we're using the i-{collection}-{name} syntax due to egoist/tailwindcss-icons, it won't work with nuxt-icon when using collections with dashes. In other words, <UIcon name="i-simple-icons-github" dynamic /> will not work so be careful when activating dynamic icons.

The issue lies in the iconify stringToIcon function used in the loadIcon here: https://github.com/nuxt-modules/icon/blob/main/src/runtime/Icon.vue#L91

EDIT: This has been solved by nuxt/icon#116

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	Nov 6, 2023 5:24pm