Home›Docs›Basic›Icon Component

Icon Component

Last updated: 1 month ago

Category: Basic

The icon component is primarily used to display an icon. The form of the icon is not limited to iconfont icon fonts; it can also be images such as SVG, PNG, or JPG. It supports theme color themes and the use of label text, as well as various mixed structures of images and text.

Icon Component1 month ago

Basic Usage

Use the oc-icon tag to represent an icon. The icon style class can be written in the label attribute or directly within the tag.

Output
HTML

_icon-global
```
                
                
            
```

Using Images

Although this component is called an icon component, we often see cases where images are used as icons. Therefore, this component supports using images instead of icon fonts. After setting the pictorial attribute, the label value will be treated as an image path.

Output
HTML

https://unpkg.com/@codady/resource/image/icon02.svg
```
                
                
            
```

Using Shapes

The icon component has no shape by default, directly displaying the original state of the icon or image. You can set the shape of the icon or image through the shape attribute.

shape=round: Circular outline with 1px border
shape=radius: Small rounded corner outline with 1px border

Output
HTML

_icon-global https://unpkg.com/@codady/resource/image/icon02.svg _icon-global https://unpkg.com/@codady/resource/image/icon02.svg
```
                
                
            
```

Using Tips

The tips attribute represents the explanation for the icon.

Output
HTML

_icon-global
```
                
                
            
```

Using Badge

The badge attribute represents the numeric badge bubble.

Output
HTML

_icon-global
```
                
                
            
```

Size

The default size of the icon component is: font icons inherit the body text size (14px), while image icons are 24px in size.

Additionally, fixed sizes can be set through the size attribute:

size=sm: Icon width and height 32px
size=md: Icon width and height 48px
size=lg: Icon width and height 64px

Output
HTML

_icon-global _icon-image _icon-shield-f
```
                
                
            
```

Using Vertical Layout

The dir attribute defaults to h (horizontal layout). Using dir="v" allows the icon to be vertically laid out.

Icons with vertical layout will increase in size.

Output
HTML

_icon-global _icon-image
```
                
                
            
```

Using Themes

When using the shape attribute, adding the theme attribute can set the background color of the icon/image.

Theme value examples: theme="prim" or theme="prim-lt". For details about background color usage, click here.

Output
HTML

_icon-global _icon-image _icon-global _icon-image
```
                
                
            
```

Custom Sizing

The horizontal oc-icon component (default) uses em as the size unit, so directly applying font-size to the oc-icon component can change the icon size.

Output
HTML

_icon-global
```
                
                
            
```

However, built-in CSS variables are typically used to change icon and text sizes. Available CSS variables include:

Hyperlinks

The oc-icon component is not a hyperlink by default. To convert it to a hyperlink, enable the href attribute. Once converted to a hyperlink, you can also use the target, rel, and download attributes, with the same usage as the A tag.

Output
HTML

_icon-global _icon-image
```
                
                
            
```

Attributes

Attribute	Semantic Type	Possible Values	Default	Description
disabled	boolean	-	-	Whether disabled
pictorial	boolean	-	-	Label as src of image
tips	string	-	-	Tooltip text
label	string	-	-	Title text
shape	string	'round'/'radius'/'square'	'square'	Icon/image shape
badge	string	-	-	Badge text
dir	string	'h'/'v'	'h'	Layout direction
theme	string	'prim[-lt]'/'error[-lt]'/'issue[-lt]'/ 'warn[-lt]'/'info[-lt]'/'succ[-lt]'	-	Icon/image background color
href	string	-	-	Hyperlink
target	string	Same as hyperlink target attribute	-	Hyperlink target attribute
rel	string	Same as hyperlink rel attribute	-	Hyperlink rel attribute
download	string	-	-	Hyperlink download attribute

Methods

Common component methods:

set: Set properties (takes key-value pairs or array)
reset: Reset properties (no params)
clear: Clear properties and values (no params)

Basic usage: CompElem.reset()

Events

Common component events:

connected: Component connected (no params)
disconnected: Component disconnected (no params)
adopted: Component moved (no params)
set: Property set (receives value)
cleared: Property cleared (no params)
reset: Property reset (no params)

Basic usage: CompElem.on('connected',()=>{console.log('connected')})

Tags: Native, Vanilla, Web Components

CSS Header

1 month ago

Pill Component