import{o as a,a as n,y as t}from"./vue-libs.b44bc779.js";const l={class:"van-doc-markdown-body"},c=t(`

Icon \u56FE\u6807

\u4ECB\u7ECD

\u57FA\u4E8E\u5B57\u4F53\u7684\u56FE\u6807\u96C6\uFF0C\u53EF\u4EE5\u901A\u8FC7 Icon \u7EC4\u4EF6\u4F7F\u7528\uFF0C\u4E5F\u53EF\u4EE5\u5728\u5176\u4ED6\u7EC4\u4EF6\u4E2D\u901A\u8FC7 icon \u5C5E\u6027\u5F15\u7528\u3002

\u5F15\u5165

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

import { createApp } from 'vue';
import { Icon } from 'vant';

const app = createApp();
app.use(Icon);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u901A\u8FC7 name \u5C5E\u6027\u6765\u6307\u5B9A\u9700\u8981\u4F7F\u7528\u7684\u56FE\u6807\uFF0CVant \u5185\u7F6E\u4E86\u4E00\u5957\u56FE\u6807\u5E93\uFF08\u89C1\u53F3\u4FA7\u793A\u4F8B\uFF09\uFF0C\u53EF\u4EE5\u76F4\u63A5\u4F20\u5165\u5BF9\u5E94\u7684\u540D\u79F0\u6765\u4F7F\u7528\u3002

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

\u4F7F\u7528\u56FE\u7247 URL

\u4F60\u4E5F\u53EF\u4EE5\u76F4\u63A5\u5728 name \u5C5E\u6027\u4E2D\u4F20\u5165\u4E00\u4E2A\u56FE\u7247 URL \u6765\u4F5C\u4E3A\u56FE\u6807\u3002

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

\u5FBD\u6807\u63D0\u793A

\u8BBE\u7F6E dot \u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\uFF1B\u8BBE\u7F6E badge \u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002

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

\u56FE\u6807\u989C\u8272

\u901A\u8FC7 color \u5C5E\u6027\u6765\u8BBE\u7F6E\u56FE\u6807\u7684\u989C\u8272\u3002

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

\u56FE\u6807\u5927\u5C0F

\u901A\u8FC7 size \u5C5E\u6027\u6765\u8BBE\u7F6E\u56FE\u6807\u7684\u5C3A\u5BF8\u5927\u5C0F\uFF0C\u53EF\u4EE5\u6307\u5B9A\u4EFB\u610F CSS \u5355\u4F4D\u3002

<!-- \u4E0D\u6307\u5B9A\u5355\u4F4D\uFF0C\u9ED8\u8BA4\u4F7F\u7528 px -->
<van-icon name="chat-o" size="40" />
<!-- \u6307\u5B9A\u4F7F\u7528 rem \u5355\u4F4D -->
<van-icon name="chat-o" size="3rem" />

\u81EA\u5B9A\u4E49\u56FE\u6807

\u5982\u679C\u9700\u8981\u5728\u73B0\u6709 Icon \u7684\u57FA\u7840\u4E0A\u4F7F\u7528\u66F4\u591A\u56FE\u6807\uFF0C\u53EF\u4EE5\u5F15\u5165\u7B2C\u4E09\u65B9 iconfont \u5BF9\u5E94\u7684\u5B57\u4F53\u6587\u4EF6\u548C CSS \u6587\u4EF6\uFF0C\u4E4B\u540E\u5C31\u53EF\u4EE5\u5728 Icon \u7EC4\u4EF6\u4E2D\u76F4\u63A5\u4F7F\u7528\u3002

/* \u5F15\u5165\u7B2C\u4E09\u65B9\u6216\u81EA\u5B9A\u4E49\u7684\u5B57\u4F53\u56FE\u6807\u6837\u5F0F */
@font-face {
  font-family: 'my-icon';
  src: url('./my-icon.ttf') format('truetype');
}

.my-icon {
  font-family: 'my-icon';
}

.my-icon-extra::before {
  content: '\\e626';
}

<!-- \u901A\u8FC7 class-prefix \u6307\u5B9A\u7C7B\u540D\u4E3A my-icon -->
<van-icon class-prefix="my-icon" name="extra" />

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
name\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5string-
dot\u662F\u5426\u663E\u793A\u56FE\u6807\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9booleanfalse
badge\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9number | string-
badge-props v3.2.8\u81EA\u5B9A\u4E49\u5FBD\u6807\u7684\u5C5E\u6027\uFF0C\u4F20\u5165\u7684\u5BF9\u8C61\u4F1A\u88AB\u900F\u4F20\u7ED9 Badge \u7EC4\u4EF6\u7684 propsBadgeProps-
color\u56FE\u6807\u989C\u8272stringinherit
size\u56FE\u6807\u5927\u5C0F\uFF0C\u5982 20px 2em\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A pxnumber | stringinherit
class-prefix\u7C7B\u540D\u524D\u7F00\uFF0C\u7528\u4E8E\u4F7F\u7528\u81EA\u5B9A\u4E49\u56FE\u6807stringvan-icon
tag\u6839\u8282\u70B9\u5BF9\u5E94\u7684 HTML \u6807\u7B7E\u540Dstringi

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
click\u70B9\u51FB\u56FE\u6807\u65F6\u89E6\u53D1event: MouseEvent

\u7C7B\u578B\u5B9A\u4E49

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

import type { IconProps } from 'vant';
`,14),p=[c],i={__name:"README.zh-CN",setup(e,{expose:s}){return s({frontmatter:{}}),(o,r)=>(a(),n("div",l,p))}};export{i as default};