Icon

Render symbols for representing actions, objects, or concepts

Use the Icon component to create intuitive, visually appealing, and user-friendly interfaces, enhancing both functionality and design. Icons are provided by the open source MynaUI Icons, along with some custom icons. Sizes are set to 24x24px by default.

---
import { Icon } from 'webcoreui/astro'
---

<Icon type="github" />

<script>
    import { Icon } from 'webcoreui/svelte'
</script>

<Icon type="github" />

import React from 'react'
import { Icon } from 'webcoreui/react'

const Component = () => <Icon type="github" />

export default Component

Themes

The Icon component supports four different themes that you can use to set the color of your icon:

<Icon type="github" theme="info" />
<Icon type="github" theme="success" />
<Icon type="github" theme="warning" />
<Icon type="github" theme="alert" />

Sizes and Colors

You can specify custom icon sizes and colors using the size and color props respectively. When the color prop is specified, it’ll override the theme prop:

<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" />

Available Icons

To avoid shipping hundreds of icons to all users where most remain unused, we only provide a small subset of most commonly used icons out of the box, the ones that are required for Webcore components. The following icons are available with the Icon component (hover the icon to see its type):

<Icon type="alert" />
<Icon type="check" />
...

Adding Custom Icons

As some projects may require additional icons, we wanted to make sure that you can easily extend the Icon component. To add your own set of icons, you can use the iconSet prop that expects an object of SVG strings, where each key represents the type of the icon, and each value is an SVG string:

---

import Astro from '@icons/astro.svg?raw'
import Components from '@icons/components.svg?raw'


import { Icon as IconComponent } from 'webcoreui/astro'


const iconSet = {
    'astro': Astro,
    'components': Components
}
---


<IconComponent iconSet={iconSet} {...Astro.props} />

Using the above setup, you can abstract the Icon component into your own component that adds additional custom icons that you can use in your project with the same API. Note that in this case, your import path must point to your component. Now you can use astro and components as a new type along with the existing types:

---
// Import the above component in your project
// Your import path may differ
import Icon from '@components/Icon.astro'
---

<Icon type="alert" />
<Icon type="check" />
<Icon type="astro" />
<Icon type="components" />

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:

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
    theme?: 'info' | 'success' | 'warning' | 'alert'
    iconSet?: {
        [key: string]: string
    }
}