/*! For license information please see 1817.d3fa9e0c.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["1817"],{97261:function(s,n,a){"use strict";a.r(n);var t=a("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Icon

\n

Intro

\n

The font-based icon set that can be used via the Icon component or referenced in other components via the icon attribute.

\n

Install

\n

Register component globally via app.use, refer to Component Registration for more registration ways.

\n
import { createApp } from 'vue';\nimport { Icon } from 'vant';\n\nconst app = createApp();\napp.use(Icon);\n
\n

Usage

\n

Basic Usage

\n

Use name prop to set icon name or icon URL.

\n
<van-icon name="chat-o" />\n
\n

Using URL

\n

You can directly passing an image URL to the name props.

\n
<van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" />\n
\n

Show Badge

\n

Use dot prop, a small red dot will be displayed in the upper right corner of the icon.

\n

Use badge prop, the badge will be displayed in the upper right corner of the icon.

\n
<van-icon name="chat-o" dot />\n<van-icon name="chat-o" badge="9" />\n<van-icon name="chat-o" badge="99+" />\n
\n

Icon Color

\n

Use color prop to set icon color.

\n
<van-icon name="cart-o" color="#1989fa" />\n<van-icon name="fire-o" color="#ee0a24" />\n
\n

Icon Size

\n

Use size prop to set icon size.

\n
<!-- Using px unit by default -->\n<van-icon name="chat-o" size="40" />\n<!-- Using rem unit -->\n<van-icon name="chat-o" size="3rem" />\n
\n

Add custom iconfont

\n
@font-face {\n  font-family: 'my-icon';\n  src: url('./my-icon.ttf') format('truetype');\n}\n\n.my-icon {\n  font-family: 'my-icon';\n}\n\n.my-icon-extra::before {\n  content: '\\e626';\n}\n
\n
<van-icon class-prefix="my-icon" name="extra" />\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
nameIcon name or URLstring\'\'
dotWhether to show red dotbooleanfalse
badgeContent of the badgenumber | string\'\'
badge-propsProps of Badge, see Badge - propsBadgeProps-
colorIcon colorstringinherit
sizeIcon sizenumber | stringinherit
class-prefixClassName prefixstringvan-icon
tagHTML Tag of root elementstringi
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
clickEmitted when icon is clickedevent: MouseEvent
\n

Types

\n

The component exports the following type definitions:

\n
import type { IconProps } from 'vant';\n
\n

CSS Variables

\n

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-icon-font-family\'van-icon\'-
\n
'},null,8,e))}}}]);