docs: add notice that user needs to update aliases when adding new font

[ellie-me]

Overview of the problem

I was trying to use a different icon library by changing the vuestic configuration as in the documentation, I disabled the material design icons because I don't want to use them in my project and wanted to work with phosphor icons instead. I did changed my config as follows:

{
fonts: [{
  name: "ph-{name}",
  resolve: ({name}) => ({
    class: `ph-regular ph-${name}`,
    tag: "i" })
  },
]

But then, when I was working with the VaInput component I found something odd: the form input was showing a red text on error instead of an icon from the phosphor library that I have setup previously. I tried searching for props in the input component but I was a bit disappointed to find that there was no error or warning icon name options.

Upon inspecting the code I found the culprit here:

https://github.com/epicmaxco/vuestic-ui/blob/eef4a961c542a69cb0b5842035dbbc14d1599ba8/packages/ui/src/components/va-input-wrapper/VaInputWrapper.vue#L69-L87

Possible Solutions

It's easy to solve: Add warningIconName, successIconName, loadingIconName as a prop on VaInput and pass it down to the VaInputWrapper.

[m0ksem]

Hi. You need to update default aliases.

For example:

    // Aliases
    { name: 'va-arrow-first', to: 'fa-backward-step' },
    { name: 'va-arrow-last', to: 'fa-forward-step' },
    { name: 'va-arrow-right', to: 'fa-angle-right' },
    { name: 'va-arrow-left', to: 'fa-angle-left' },
    { name: 'va-arrow-down', to: 'fa-angle-down' },
    { name: 'va-arrow-up', to: 'fa-angle-up' },
    { name: 'va-calendar', to: 'fa-regular fa-calendar' },
    { name: 'va-delete', to: 'fa-trash' },
    { name: 'va-check', to: 'fa-check' },
    { name: 'va-check-circle', to: 'fa-circle-check' },
    { name: 'va-warning', to: 'fa-triangle-exclamation' },
    { name: 'va-clear', to: 'fa-regular fa-circle-xmark' },
    { name: 'va-close', to: 'fa-xmark' },
    { name: 'va-loading', to: 'fa-solid fa-rotate fa-flip-vertical' },
    { name: 'va-minus', to: 'fa-minus' },
    { name: 'va-plus', to: 'fa-plus' },
    { name: 'va-unfold-more', to: 'fa-sort' },
    { 
      name: 'va-unsorted', 
      resolve: () => ({
        // Custom class: sort icon is invisible until hovered
        class: `fa-solid fa-sort va-icon--hidden-before-hover`,
      }) 
    },
    { name: 'va-sort-asc', to: 'fa-sort-up' },
    { name: 'va-sort-desc', to: 'fa-sort-down' },

[ellie-me]

I've had a look at it and it works! thanks, it was just not that clear in the documentation that I had to change the alias.