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:

vuestic-ui/packages/ui/src/components/va-input-wrapper/VaInputWrapper.vue

Lines 69 to 87 in eef4a96

	<va-icon
	v-if="success"
	color="success"
	name="va-check-circle"
	class="va-input-wrapper__icon va-input-wrapper__icon--success"
	/>
	<va-icon
	v-if="error"
	color="danger"
	name="va-warning"
	class="va-input-wrapper__icon va-input-wrapper__icon--error"
	/>
	<va-icon
	v-if="$props.loading"
	:color="$props.color"
	name="va-loading"
	spin="counter-clockwise"
	class="va-input-wrapper__icon va-input-wrapper__icon--loading"
	/>

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.

[TFX-98]

Closed in #4480