Allow alternatives to icon fonts

[KazimirPodolski]

Is your feature request related to a problem? Please describe.

There should be a way to use Vuestic with SVG icons including component use.

Icon fonts are widely discouraged, just some of the examples: https://pictogrammers.com/docs/guides/webfont-alternatives/ https://fontawesome.com/docs/web/dig-deeper/webfont-vs-svg https://www.lambdatest.com/blog/its-2019-lets-end-the-debate-on-icon-fonts-vs-svg-icons

Some popular frameworks provide more ways to set up icons than just fonts - https://vuetifyjs.com/en/features/icon-fonts/.

Describe the solution you'd like

Icon components should be supported everywhere. So one would be able to do:

<script>
import {mdiAccount} from '@mdi/js';
</script>

<template>
<va-button :icon="mdiAccount"/>
</template>

And also configure aliases using a component if va-icon won't do it.

Describe alternatives you've considered

I think vuetify does this particular thing just right: https://vuetifyjs.com/en/api/v-icon/#props-icon https://vuetifyjs.com/en/api/v-btn/#props-icon

Also maybe UnoCSS might help here (it claims a solution for icons), but I haven't tried it.

Additional context

I'm currently evaluating Vuestic to migrate from Vuetify, and I believe this issue is one of the blockers for people doing the same migration.

[m0ksem]

Hi, @KazimirPodolski. Good point. You already can use it if you tweak icons config like here: https://codesandbox.io/p/sandbox/frosty-worker-4vrc2h?file=/src/main.ts:5,1

In case you want this as default behavior, you will need to change svg-{d} to {d}, then you simply use <VaIcon :name="mdiPhone" />.

I know it might not be obvious how to use Icons Config, so I'm open for suggestions!

We may also need to add this as an example in docs.

[KazimirPodolski]

@m0ksem With that example the Icons config doc now makes more sense. I guess this is mostly documenting/examples/defaults issue.

I just had to wrap it into <i> so vuestic classes are applied properly:

config: {
    icons: createIconsConfig({
        // use imported MDI icons: https://github.com/epicmaxco/vuestic-ui/issues/3786#issuecomment-1703075019
        fonts: [{
            name: '{d}', // 'd' as in SVG's d: https://pictogrammers.com/docs/guides/webfont-alternatives/#other
            resolve: ({d}) => ({
                attrs: {d},
                component: defineComponent({
                    props: {d: {type: String}},
                    render() {
                        return h('i', [
                            h('svg', {'viewBox': '0 0 24 24'}, [
                                h('path', {d: this.$props.d})
                            ])
                        ]);
                    }
                })
            })
        }],
        // https://ui.vuestic.dev/services/icons-config#vuestic-component-alises
        aliases: [
            {name: 'va-calendar', to: mdiCalendar}
        ]
    })
}