vant/static/js/async/1817.d3fa9e0c.js

/*! 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:'<h1>Icon</h1>\n<div class="van-doc-card"><h3 id="intro" tabindex="-1">Intro</h3>\n<p>The font-based icon set that can be used via the Icon component or referenced in other components via the <code>icon</code> attribute.</p>\n</div><div class="van-doc-card"><h3 id="install" tabindex="-1">Install</h3>\n<p>Register component globally via <code>app.use</code>, refer to <a href="#/en-US/advanced-usage#zu-jian-zhu-ce" target="_blank">Component Registration</a> for more registration ways.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>;\n<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Icon</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vant&#x27;</span>;\n\n<span class="hljs-keyword">const</span> app = <span class="hljs-title function_">createApp</span>();\napp.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">Icon</span>);\n</code></pre>\n</div><h2 id="usage" tabindex="-1">Usage</h2>\n<div class="van-doc-card"><h3 id="basic-usage" tabindex="-1">Basic Usage</h3>\n<p>Use <code>name</code> prop to set icon name or icon URL.</p>\n<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;chat-o&quot;</span> /&gt;</span>\n</code></pre>\n</div><div class="van-doc-card"><h3 id="using-url" tabindex="-1">Using URL</h3>\n<p>You can directly passing an image URL to the <code>name</code> props.</p>\n<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png&quot;</span> /&gt;</span>\n</code></pre>\n</div><div class="van-doc-card"><h3 id="show-badge" tabindex="-1">Show Badge</h3>\n<p>Use <code>dot</code> prop, a small red dot will be displayed in the upper right corner of the icon.</p>\n<p>Use <code>badge</code> prop, the badge will be displayed in the upper right corner of the icon.</p>\n<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;chat-o&quot;</span> <span class="hljs-attr">dot</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;chat-o&quot;</span> <span class="hljs-attr">badge</span>=<span class="hljs-string">&quot;9&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;chat-o&quot;</span> <span class="hljs-attr">badge</span>=<span class="hljs-string">&quot;99+&quot;</span> /&gt;</span>\n</code></pre>\n</div><div class="van-doc-card"><h3 id="icon-color" tabindex="-1">Icon Color</h3>\n<p>Use <code>color</code> prop to set icon color.</p>\n<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;cart-o&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#1989fa&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;fire-o&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span> /&gt;</span>\n</code></pre>\n</div><div class="van-doc-card"><h3 id="icon-size" tabindex="-1">Icon Size</h3>\n<p>Use <code>size</code> prop to set icon size.</p>\n<pre><code class="language-html"><span class="hljs-comment">&lt;!-- Using px unit by default --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;chat-o&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;40&quot;</span> /&gt;</span>\n<span class="hljs-comment">&lt;!-- Using rem unit --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;chat-o&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;3rem&quot;</span> /&gt;</span>\n</code></pre>\n</div><div class="van-doc-card"><h3 id="add-custom-iconfont" tabindex="-1">Add custom iconfont</h3>\n<pre><code class="language-css"><span class="hljs-keyword">@font-face</span> {\n  <span class="hljs-attribute">font-family</span>: <span class="hljs-string">&#x27;my-icon&#x27;</span>;\n  <span class="hljs-attribute">src</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">&#x27;./my-icon.ttf&#x27;</span>) <span class="hljs-built_in">format</span>(<span class="hljs-string">&#x27;truetype&#x27;</span>);\n}\n\n<span class="hljs-selector-class">.my-icon</span> {\n  <span class="hljs-attribute">font-family</span>: <span class="hljs-string">&#x27;my-icon&#x27;</span>;\n}\n\n<span class="hljs-selector-class">.my-icon-extra</span><span class="hljs-selector-pseudo">::before</span> {\n  <span class="hljs-attribute">content</span>: <span class="hljs-string">&#x27;\\e626&#x27;</span>;\n}\n</code></pre>\n<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">class-prefix</span>=<span class="hljs-string">&quot;my-icon&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;extra&quot;</span> /&gt;</span>\n</code></pre>\n</div><h2 id="api" tabindex="-1">API</h2>\n<div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3>\n<table>\n<thead>\n<tr>\n<th>Attribute</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>Icon name or URL</td>\n<td><em>string</em></td>\n<td><code>\'\'</code></td>\n</tr>\n<tr>\n<td>dot</td>\n<td>Whether to show red dot</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>badge</td>\n<td>Content of the badge</td>\n<td><em>number | string</em></td>\n<td><code>\'\'</code></td>\n</tr>\n<tr>\n<td>badge-props</td>\n<td>Props of Badge, see <a href="#/en-US/badge#props" target="_blank">Badge - props</a></td>\n<td><em>BadgeProps</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>color</td>\n<td>Icon color</td>\n<td><em>string</em></td>\n<td><code>inherit</code></td>\n</tr>\n<tr>\n<td>size</td>\n<td>Icon size</td>\n<td><em>number | string</em></td>\n<td><code>inherit</code></td>\n</tr>\n<tr>\n<td>class-prefix</td>\n<td>ClassName prefix</td>\n<td><em>string</em></td>\n<td><code>van-icon</code></td>\n</tr>\n<tr>\n<td>tag</td>\n<td>HTML Tag of root element</td>\n<td><em>string</em></td>\n<td><code>i</code></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3>\n<table>\n<thead>\n<tr>\n<th>Event</th>\n<th>Description</th>\n<th>Arguments</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>click</td>\n<td>Emitted when icon is clicked</td>\n<td><em>event: MouseEvent</em></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="types" tabindex="-1">Types</h3>\n<p>The component exports the following type definitions:</p>\n<pre><code class="language-ts"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">IconProps</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vant&#x27;</span>;\n</code></pre>\n</div><div class="van-doc-card"><h3 id="css-variables" tabindex="-1">CSS Variables</h3>\n<p>The component provides the following CSS variables, which can be used to customize styles. Please refer to <a href="#/en-US/config-provider" target="_blank">ConfigProvider component</a>.</p>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Default Value</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>--van-icon-font-family</td>\n<td><em>\'van-icon\'</em></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div>'},null,8,e))}}}]);