Skip to content

feat: add custom icon to buttons #2245

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

Closed
wants to merge 1 commit into from
Closed

Conversation

gion
Copy link

@gion gion commented May 14, 2020

First of all, thank you for your contribution! 😄

New feature please send pull request to feature branch, and rest to master branch. Pull request will be merged after one of collaborators approve. Please makes sure that these form are filled before submitting your pull request, thank you!

[中文版模板 / Chinese template]

This is a ...

  • New feature
  • Bug fix
  • Site / document update
  • Component style update
  • TypeScript definition update
  • Refactoring
  • Code style optimization
  • Branch merge
  • Other (about what?)

I'm sorry, I'm not sure if it is actually a new blown feature, as this feels more of a refactoring.

What's the background?

  1. Describe the source of requirement.

Currently, if you use a custom icon, there's no way you can integrate that icon into other components (such as buttons).

In the React version Antd, a button can simply pass a different component as an icon.
For example, if you look at the docs, you could write a button with a custom icon this way:
<Button icon={<MyCustomIcon />} />
In Vue, this is not possible.

  1. Resolve what problem.

Refactor the button component to allow passing a custom icon component through slots:

<Button>
    <MyCustomIcon slot="icon" />
</Button>
  1. Related issue link.

API Realization (Optional if not new feature)

  1. Basic thought of solution and other optional proposal.
  2. List final API realization and usage sample.
  3. GIF or snapshot should be provided if includes UI/interactive modification.

Screenshot 2020-05-14 at 15 37 14

What's the effect? (Optional if not new feature)

  1. Does this PR affect user? Which part will be affected?
  2. What will say in changelog?
  3. Does this PR contains potential break change or other risk?

Changelog description (Optional if not new feature)

  1. English description.

Add custom icon to buttons through slots

  1. Chinese description (optional)

Self Check before Merge

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

Additional Plan? (Optional if not new feature)

If this PR related with other PR or following info. You can type here.

tangjinzhou added a commit that referenced this pull request Jul 1, 2020
@tangjinzhou tangjinzhou closed this Jul 2, 2020
@github-actions
Copy link

github-actions bot commented Jul 3, 2021

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 3, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants