vuestic-ui
vuestic-ui copied to clipboard
docs: add notice that user needs to update aliases when adding new font
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.