Search documentation v0.6.1

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.

Preview
How to use Icons in Astro
---
import { Icon } from 'webcoreui/astro'
---
<Icon type="github" />
How to use Icons in Svelte
<script>
import { Icon } from 'webcoreui/svelte'
</script>
<Icon type="github" />
How to use Icons in React
import React from 'react'
import { Icon } from 'webcoreui/react'
const Component = () => <Icon type="github" />
export default Component

Sizes and Colors

You can specify custom icon sizes and colors using the size and color props respectively:

<Icon type="github" size={12} color="#32e3a0" />
<Icon type="github" size={16} color="#32cae3" />
<Icon type="github" size={20} color="#ad74f7" />
<Icon type="github" size={24} color="#ff89aa" />
<Icon type="github" size={30} color="#f2c262" />
Icon colors will always use the color of the text of the parent element.

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:

How to import SVG icons as strings
import { info } from 'webcoreui/icons'

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

type IconProps = {
type: string
size?: number
color?: string
}
PropPurpose
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