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

Icon \u56FE\u6807

\n

\u4ECB\u7ECD

\n

\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

\n

\u5F15\u5165

\n

\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

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

\u4EE3\u7801\u6F14\u793A

\n

\u57FA\u7840\u7528\u6CD5

\n

\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

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

\u4F7F\u7528\u56FE\u7247 URL

\n

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

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

\u5FBD\u6807\u63D0\u793A

\n

\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

\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

\u56FE\u6807\u989C\u8272

\n

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

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

\u56FE\u6807\u5927\u5C0F

\n

\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

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

\u81EA\u5B9A\u4E49\u56FE\u6807

\n

\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

\n
/* \u5F15\u5165\u7B2C\u4E09\u65B9\u6216\u81EA\u5B9A\u4E49\u7684\u5B57\u4F53\u56FE\u6807\u6837\u5F0F */\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
<!-- \u901A\u8FC7 class-prefix \u6307\u5B9A\u7C7B\u540D\u4E3A my-icon -->\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
\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\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
\n

Events

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

\u7C7B\u578B\u5B9A\u4E49

\n

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

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

\u4E3B\u9898\u5B9A\u5236

\n

\u6837\u5F0F\u53D8\u91CF

\n

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-icon-font-family\'van-icon\'-
\n
'},null,8,l))}}}]);