vmware-clarity / core

Clarity is a scalable, accessible, customizable, open-source design system built with web components. Works with any JavaScript framework, created for enterprises, and designed to be inclusive.
https://clarity.design
MIT License
163 stars 41 forks source link

The circle size of the icon not align #300

Open yociduo opened 5 months ago

yociduo commented 5 months ago

Describe the bug

image

A clear and concise description of what the bug is, and the conditions when it occurs.

How to reproduce

Please provide a link to a reproduction scenario using one of the Clarity Stackblitz templates. Reports without a clear reproduction may not be prioritized until one is provided.

Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Versions

Clarity project:

Clarity version:

Framework:

Framework version: ie: Angular 11

Device:

Additional notes

Add any other notes about the problem here.

repolevedavaj commented 4 months ago

I realized the same today. @yociduo do you found a workaround to style the icons so they have the same size?

yociduo commented 4 months ago

I realized the same today. @yociduo do you found a workaround to style the icons so they have the same size?

cds-icon[shape='check-circle'] svg,
cds-icon[shape='exclamation-circle'] svg,
cds-icon[shape='info-circle'] svg{
transform: scale(1.5)
}