Skip to content

Conversation

@Antreesy
Copy link
Contributor

☑️ Resolves

🖼️ Screenshots

🏚️ Before 🏡 After
image image

🏁 Checklist

  • ⛑️ Tests are included or are not applicable
  • 📘 Component documentation has been extended, updated or is not applicable
  • 2️⃣ Backport to stable8 for maintained Vue 2 version or not applicable

@Antreesy Antreesy added this to the 9.0.0-rc.6 milestone Aug 13, 2025
@Antreesy Antreesy requested review from skjnldsv and susnux August 13, 2025 12:55
@Antreesy Antreesy self-assigned this Aug 13, 2025
@Antreesy Antreesy added bug Something isn't working 3. to review Waiting for reviews feature: icon-svg-wrapper labels Aug 13, 2025
Copy link
Contributor

@susnux susnux left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is done intentionally - you should just use the inline prop.
As this might break other use cases - the icon should be by default the default clickable area and only for inline usage have the real icon size.

@Antreesy
Copy link
Contributor Author

the icon should be by default the default clickable area

But prop description states:

    /**
     * Set if the icon should be used as inline content e.g. within text.
     * By default the icon is made a block element for use inside `icon`-slots.
     */

Almost all the icon slots I can think of are present in elements, which size is already limited by 34px (buttons, input fields, notes, e.t.c.). So icon should not exceed this?

@susnux
Copy link
Contributor

susnux commented Aug 13, 2025

Yes exactly if not set the element is a block element with the size of the icon slot which should always be the default clickable area. inline is to allow any arbitrary size (real size of the icon).

@Antreesy
Copy link
Contributor Author

Ok, it covers our specific case with non-standard icon wrapper. But IMO it's still confusing to ignore size prop, when it's passed.

@Antreesy Antreesy closed this Aug 13, 2025
@susnux
Copy link
Contributor

susnux commented Aug 13, 2025

Ok, it covers our specific case with non-standard icon wrapper. But IMO it's still confusing to ignore size prop, when it's passed.

You should just use icon prop - it was explicitly added for cases like you now have - no need for custom patches.

The icon size only controls the size of the icon itself - not of the wrapper. The wrapper for legacy reasons (or better for legacy reasons of all components that have a icon slot) needed to always have a fixed size of clickable area.
Thus we could not change that - instead we added the inline slot for this -> the icon no longer has a wrapper with padding but its just the specified icon size.

@susnux susnux deleted the fix/noid/icon-svg-wrapper-size branch October 21, 2025 16:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

3. to review Waiting for reviews bug Something isn't working feature: icon-svg-wrapper

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants