Icon

Font-based icon set.

Component Type

Basic Usage

Set which icon to use through the name property.

<wd-icon name="del" />

Component Style

Icon Color

Set the color property.

<wd-icon name="del" color="#0083ff" />

Icon Size

Set the size property.

<wd-icon name="del" size="20px" />

Special Style

Custom Icons

If you need to use more icons on top of the existing Icon, you can import the font files and CSS files corresponding to third-party iconfont, and then use them directly in the Icon component.

/* Path src/iconfont/index.css */

@font-face {
  font-family: "fish";
  src: url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.woff2?t=1721314121733') format('woff2'),
       url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.woff?t=1721314121733') format('woff'),
       url('//at.alicdn.com/t/c/font_4626013_vwpx4thmin.ttf?t=1721314121733') format('truetype');
}

.fish {
  font-family: "fish" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fish-kehuishouwu:before {
  content: "\e627";
}

<!-- app.vue -->
<style>
@import '@/iconfont/index.css';
</style>

<!-- Specify class name as fish through class-prefix -->
<wd-icon class-prefix="fish" name="kehuishouwu" />

CSS Class Icons (UnoCSS)

If your project uses UnoCSS or other CSS engines, you can set css-icon to true. In this case, the passed name will be directly used as a CSS class name without any prefix concatenation.

<wd-icon css-icon name="i-ep-apple" />
<wd-icon css-icon name="i-carbon-sun" />

Attributes

Parameter	Description	Type	Default Value
name	Icon name or image link	string	-
color	Icon color	string	inherit
size	Icon font size	string | number	inherit
class-prefix	Class name prefix, used for custom icons	string	wd-icon
css-icon	Whether it is a CSS class icon (such as UnoCSS icon). When true, name is directly used as CSS class	boolean	false
custom-style	Root node style	string	-
custom-class	Root node style	string	-

Events

Event Name	Description	Parameters
click	Triggered when clicking the icon	event

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-icon-font-size	$typography-body-size-main	图标字号

Source Code

Documentation

• Component