Icon
Graphical symbols for representing actions, objects, or concepts
Source ↗️ Report Issue ↗️Use the Icon
component to create intuitive, visually appealing, and user-friendly interfaces, enhancing both functionality and design. Most icons are provided by the open source MynaUI Icons, along with some custom icons. Sizes are set to 24x24px by default.
Sizes and Colors
You can specify custom icon sizes and colors using the size
and color
props respectively:
Available Icons
The following icons are available in Webcore out of the box (hover the icon to see its type):
Importing as String
Using the Icon
component is the preferred way to render SVG icons provided by Webcore on the server. However, when using the Icon
component on the client, it can drastically increase your bundle size as it prebundles all icons.
If you want to import icons provided by Webcore on the client-side, it’s recommended to import them directly as strings using the following imports:
This can be useful in cases where you cannot use a component. In this case, the value of info
will be an SVG string that you can use to dynamically render the icon.
API
Prop | Purpose |
---|---|
type | Specify the type of the icon. |
size | Sets the size of the icon. Defaults to 24px. |
color | Sets the color of the icons. |
Request improvement for this page