vuestic-ui icon indicating copy to clipboard operation
vuestic-ui copied to clipboard

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

Open ellie-me opened this issue 8 months ago • 2 comments

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.

ellie-me avatar Jun 23 '24 07:06 ellie-me