Icon

The Icon component allows you to display an icon from the Iconography library. They are used to provide additional meaning or give a hint about the usability of the component they are used in.

Code


                                                        
                                                        
                                                            <template>
                                                          <div>
                                                            <w-icon name="calendar" size="small"></w-icon>
                                                            <w-icon name="calendar" size="medium"></w-icon>
                                                            <w-icon name="calendar" size="large"></w-icon>
                                                          </div>
                                                        </template>

Props

Name	Description	Type	Default	Values
name Required	Icon name in the kebab-case format	string
color	Sets the icon color	string	muted	primary, secondary, muted, inverted, accent, success, warning, danger, accent-inverted, success-inverted, info, info-inverted, danger-inverted, any hexadecimal color (#176d00)
size	Defines the size of the icon	string	medium	small, medium, large, xlarge
aria-hidden	Indicates whether the element is exposed to an accessibility API. This can be used for hiding decorative icons that already display a visible and accessible label.	boolean\|string		true, false
aria-label	Defines a string value that labels an element.	string