Improve icon integration

This function solves the problem (这个功能解决的问题)

The use of icons in buttons and menu’s is not very elegant and a lot of work. For example: To add an icon to a button, a template slot must be used, that contains an NIcon, that wraps an icon component, like this:

<NButton>
  <template #icon>
    <NIcon>
      <LinkOutlined/>
    </NIcon>
 </template
</NButton>

That is 7 lines for every icon. This adds a mental load reading code. Instead of seeing, ‘icon=…’ that simply expresses the intent to show an icon, there is all this code to read. This is what I mean with not very elegant.

Similarly, Showing an icon in a Dropdown, the docs recommend adding renderIcon function to the ‘icon’ field in the menu items. This too is cumbersome and distracting.

Expected API (期望的 API)

The proposed usage is to simply specify the icon component:

<NButton :icon="LinkOutlined" />

and for Dropdowns the item would contain a field {icon: LinkOutlined}

This minimizes the mental load in understanding the intent and is very elegant due to its simplicity.

[hspaay]

Yes maintenance is always a concern. It would be nice if we would not be bound to this restriction.

I would like to offer the thought that fewer artifacts in the code makes it more readable for the user. After 25 years in development I’ve come to appreciate simplicity code. It looks like we have a different perspective on this.

Thank you kindly for taking the time to reply and for your efforts on naive-ui. I wish you good luck with this library.

[cardosofelipe]

Hello, I would like to bump this feature request, this would be a great improvement over the current implementation. Maybe you could make a specific component: NIconButton. Could be something simple which accepts only an icon and renders a button with one-liner: <NIconButton :icon="LinkOutlined"/> Or something like that.