-
Notifications
You must be signed in to change notification settings - Fork 337
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: add notice that user needs to update aliases when adding new font #4331
Labels
docs
packages/docs
Comments
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' }, |
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. |
m0ksem
changed the title
VaInputWrapper Icons are hard coded, can't switch from materialdesign icons
docs: add notice that user needs to update aliases when adding new font
Jun 30, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:
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
Possible Solutions
It's easy to solve:
Add warningIconName, successIconName, loadingIconName as a prop on VaInput and pass it down to the VaInputWrapper.
The text was updated successfully, but these errors were encountered: