mirror of
https://github.com/element-plus/element-plus.git
synced 2025-02-17 11:49:41 +08:00
53 lines
21 KiB
JavaScript
53 lines
21 KiB
JavaScript
import{c as m,a as n,w as t,e as c,b as a,d as l,r as e,o as _,u as s,y as o,s as i,C as k,a3 as v,x as r}from"./app.fbbef7af.js";const f=c(`<h1 id="icon-\u56FE\u6807" tabindex="-1">Icon \u56FE\u6807 <a class="header-anchor" href="#icon-\u56FE\u6807" aria-hidden="true">#</a></h1><p>Element Plus \u63D0\u4F9B\u4E86\u4E00\u5957\u5E38\u7528\u7684\u56FE\u6807\u96C6\u5408\u3002</p><h2 id="\u4F7F\u7528\u56FE\u6807" tabindex="-1">\u4F7F\u7528\u56FE\u6807 <a class="header-anchor" href="#\u4F7F\u7528\u56FE\u6807" aria-hidden="true">#</a></h2><ul><li><p>\u5982\u679C\u4F60\u60F3\u50CF\u7528\u4F8B\u4E00\u6837<strong>\u76F4\u63A5\u4F7F\u7528</strong>\uFF0C\u4F60\u9700\u8981<a href="https://v3.vuejs.org/guide/component-registration.html#global-registration" target="_blank" rel="noopener noreferrer">\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6</a>\uFF0C\u624D\u80FD\u591F\u76F4\u63A5\u5728\u9879\u76EE\u91CC\u4F7F\u7528\u3002</p></li><li><p>\u5982\u82E5\u60F3\u67E5\u770B\u6240\u6709\u53EF\u7528\u7684 SVG \u56FE\u6807\u8BF7\u67E5\u9605 <a href="https://unpkg.com/browse/@element-plus/icons-vue@latest/dist/es/" target="_blank" rel="noopener noreferrer">@element-plus/icons-vue</a> \u548C <a href="https://github.com/element-plus/element-plus-icons" target="_blank" rel="noopener noreferrer">element-plus-icons</a> \u7684\u6E90\u4EE3\u7801\u6216\u5F53\u524D\u9875\u7684 <a href="#icons-collection">Icon Collection</a></p></li><li><p>CDN \u5BFC\u5165\u548C <a href="https://github.com/antfu/unplugin-icons" target="_blank" rel="noopener noreferrer">\u81EA\u52A8\u5BFC\u5165</a> \u6B63\u5728\u5F00\u53D1\u4E2D\u3002</p></li></ul><h2 id="\u5B89\u88C5" tabindex="-1">\u5B89\u88C5 <a class="header-anchor" href="#\u5B89\u88C5" aria-hidden="true">#</a></h2><h3 id="\u4F7F\u7528\u5305\u7BA1\u7406\u5668" tabindex="-1">\u4F7F\u7528\u5305\u7BA1\u7406\u5668 <a class="header-anchor" href="#\u4F7F\u7528\u5305\u7BA1\u7406\u5668" aria-hidden="true">#</a></h3><div class="language-shell"><pre><code><span class="token comment"># \u9009\u62E9\u4E00\u4E2A\u4F60\u559C\u6B22\u7684\u5305\u7BA1\u7406\u5668</span>
|
|
|
|
<span class="token comment"># NPM</span>
|
|
$ <span class="token function">npm</span> <span class="token function">install</span> @element-plus/icons-vue
|
|
<span class="token comment"># Yarn</span>
|
|
$ <span class="token function">yarn</span> <span class="token function">add</span> @element-plus/icons-vue
|
|
<span class="token comment"># pnpm</span>
|
|
$ <span class="token function">pnpm</span> <span class="token function">install</span> @element-plus/icons-vue
|
|
</code></pre></div><h2 id="\u57FA\u7840\u7528\u6CD5" tabindex="-1">\u57FA\u7840\u7528\u6CD5 <a class="header-anchor" href="#\u57FA\u7840\u7528\u6CD5" aria-hidden="true">#</a></h2><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>\u7531\u4E8E HTML \u6807\u51C6\u5DF2\u7ECF\u5B9A\u4E49\u4E86\u4E00\u4E2A\u540D\u4E3A <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu" target="_blank" rel="noopener noreferrer">menu</a> \u7684\u6807\u7B7E\uFF0C\u5982\u679C\u4F60\u6CE8\u518C\u7684 <code>Menu</code> \u65E0\u6CD5\u6B63\u5E38\u5DE5\u4F5C\uFF0C\u5219\u9700\u8981\u4F7F\u7528\u522B\u540D\u6765\u6E32\u67D3\u56FE\u6807\u3002</p></div><div class="language-vue"><pre><code><span class="token comment"><!-- \u4F7F\u7528 el-icon \u6807\u7B7E\u6765\u5305\u88F9 SVG \u56FE\u6807 --></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-icon</span> <span class="token attr-name">:size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>size<span class="token punctuation">"</span></span> <span class="token attr-name">:color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>edit</span> <span class="token punctuation">/></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-icon</span><span class="token punctuation">></span></span>
|
|
<span class="token comment"><!-- \u4E5F\u53EF\u4EE5\u76F4\u63A5\u4F7F\u7528\u56FE\u6807\u6807\u7B7E\uFF0C\u65E0\u9700\u7236\u6807\u7B7E\u5305\u88F9 --></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>edit</span> <span class="token punctuation">/></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
|
</code></pre></div>`,10),b=c(`<h2 id="\u7ED3\u5408-el-icon-\u4F7F\u7528" tabindex="-1">\u7ED3\u5408 el-icon \u4F7F\u7528 <a class="header-anchor" href="#\u7ED3\u5408-el-icon-\u4F7F\u7528" aria-hidden="true">#</a></h2><p><code>el-icon</code> \u4E3A\u539F\u59CB\u7684 SVG \u56FE\u6807\u63D0\u4F9B\u989D\u5916\u7684\u5C5E\u6027\uFF0C\u7EC6\u8282\u5982\u4E0B\u3002</p><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
|
|
\u5F53\u589E\u52A0\u4E86 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span>is-loading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span> \u7C7B\u65F6\uFF0C\u56FE\u6807\u53EF\u4EE5\u6BCF\u4E24\u79D2\u5B8C\u6574\u8F6C 360 \u5EA6\uFF0C\u4F60\u4E5F\u53EF\u4EE5\u8986\u5199\u8BE5\u5C5E\u6027
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-icon</span> <span class="token attr-name">:size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>edit</span> <span class="token punctuation">/></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-icon</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-icon</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#409EFC<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>no-inherit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>share</span> <span class="token punctuation">/></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-icon</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-icon</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>delete</span> <span class="token punctuation">/></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-icon</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-icon</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>is-loading<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>loading</span> <span class="token punctuation">/></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-icon</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-icon</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>search</span> <span class="token punctuation">/></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-icon</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> \u641C\u7D22 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
|
</code></pre></div>`,3),q=a("p",null,[l(" \u901A\u8FC7\u6DFB\u52A0\u989D\u5916\u7684\u7C7B\u540D "),a("b",null,"is-loading"),l("\uFF0C\u4F60\u7684\u56FE\u6807\u5C31\u53EF\u4EE5\u5728 2 \u79D2\u5185\u65CB\u8F6C 360 \u5EA6\uFF0C\u4F46\u8BA9\u4F60\u4E5F\u53EF\u4EE5\u81EA\u5DF1\u6539\u5199\u60F3\u8981\u7684\u52A8\u753B\u3002 ")],-1),y={style:{display:"flex","align-items":"center","justify-content":"space-between",width:"100%"}},x=a("span",{style:{"vertical-align":"middle"}},"\u641C\u7D22",-1),T=c(`<h2 id="\u76F4\u63A5\u4F7F\u7528-svg-\u56FE\u6807" tabindex="-1">\u76F4\u63A5\u4F7F\u7528 SVG \u56FE\u6807 <a class="header-anchor" href="#\u76F4\u63A5\u4F7F\u7528-svg-\u56FE\u6807" aria-hidden="true">#</a></h2><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 20px</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
|
<span class="token comment"><!-- SVG \u56FE\u6807\u9ED8\u8BA4\u4E0D\u643A\u5E26\u4EFB\u4F55\u5C5E\u6027 --></span>
|
|
<span class="token comment"><!-- \u4F60\u9700\u8981\u76F4\u63A5\u63D0\u4F9B\u5B83\u4EEC --></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>edit</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span> 8px</span><span class="token punctuation">"</span></span></span> <span class="token punctuation">/></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>share</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span> 8px</span><span class="token punctuation">"</span></span></span> <span class="token punctuation">/></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>delete</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span> 8px</span><span class="token punctuation">"</span></span></span> <span class="token punctuation">/></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>search</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span> 8px</span><span class="token punctuation">"</span></span></span> <span class="token punctuation">/></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
|
</code></pre></div>`,2),S={style:{"font-size":"20px"}},I=a("h2",{id:"\u56FE\u6807\u96C6\u5408",tabindex:"-1"},[l("\u56FE\u6807\u96C6\u5408 "),a("a",{class:"header-anchor",href:"#\u56FE\u6807\u96C6\u5408","aria-hidden":"true"},"#")],-1),C=a("div",{class:"tip custom-block"},[a("p",{class:"custom-block-title"},"TIP"),a("p",null,[l("\u53EA\u8981\u4F60\u5B89\u88C5\u4E86\u56FE\u6807\u7EC4\u4EF6\u5E93\uFF0C"),a("strong",null,"\u5373\u53EF\u5728\u4EFB\u610F\u7248\u672C\u4E2D\u4F7F\u7528 SVG \u56FE\u6807")]),a("p",null,[a("strong",null,"\u60A8\u53EF\u4EE5\u70B9\u51FB\u56FE\u6807\u590D\u5236\u4EE3\u7801\u3002")])],-1),V=c('<h2 id="icon-\u5C5E\u6027" tabindex="-1">Icon \u5C5E\u6027 <a class="header-anchor" href="#icon-\u5C5E\u6027" aria-hidden="true">#</a></h2><table><thead><tr><th>\u5C5E\u6027</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u53EF\u9009\u503C</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>color</td><td>svg \u7684 fill \u989C\u8272</td><td>Pick<CSSProperties, 'color'></td><td>-</td><td>inherit</td></tr><tr><td>size</td><td>SVG \u56FE\u6807\u7684\u5927\u5C0F\uFF0Csize x size</td><td>number/</td><td>string</td><td>-</td></tr></tbody></table><h2 id="icon-\u63D2\u69FD" tabindex="-1">Icon \u63D2\u69FD <a class="header-anchor" href="#icon-\u63D2\u69FD" aria-hidden="true">#</a></h2><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>\u2014</td><td>\u81EA\u5B9A\u4E49\u9ED8\u8BA4\u5185\u5BB9</td></tr></tbody></table><h2 id="\u6E90\u4EE3\u7801" tabindex="-1">\u6E90\u4EE3\u7801 <a class="header-anchor" href="#\u6E90\u4EE3\u7801" aria-hidden="true">#</a></h2><p><a href="https://github.com/element-plus/element-plus/tree/dev/packages/components/icon" target="_blank" rel="noopener noreferrer">\u7EC4\u4EF6</a> \u2022 <a href="https://github.com/element-plus/element-plus/blob/dev/docs/en-US/component/icon.md" target="_blank" rel="noopener noreferrer">\u6587\u6863</a></p><h2 id="\u8D21\u732E\u8005" tabindex="-1">\u8D21\u732E\u8005 <a class="header-anchor" href="#\u8D21\u732E\u8005" aria-hidden="true">#</a></h2>',7),A='{"title":"Icon \u56FE\u6807","description":"","frontmatter":{"title":"Icon \u56FE\u6807","lang":"zh-CN"},"headers":[{"level":2,"title":"\u4F7F\u7528\u56FE\u6807","slug":"\u4F7F\u7528\u56FE\u6807"},{"level":2,"title":"\u5B89\u88C5","slug":"\u5B89\u88C5"},{"level":3,"title":"\u4F7F\u7528\u5305\u7BA1\u7406\u5668","slug":"\u4F7F\u7528\u5305\u7BA1\u7406\u5668"},{"level":2,"title":"\u57FA\u7840\u7528\u6CD5","slug":"\u57FA\u7840\u7528\u6CD5"},{"level":2,"title":"\u7ED3\u5408 el-icon \u4F7F\u7528","slug":"\u7ED3\u5408-el-icon-\u4F7F\u7528"},{"level":2,"title":"\u76F4\u63A5\u4F7F\u7528 SVG \u56FE\u6807","slug":"\u76F4\u63A5\u4F7F\u7528-svg-\u56FE\u6807"},{"level":2,"title":"\u56FE\u6807\u96C6\u5408","slug":"\u56FE\u6807\u96C6\u5408"},{"level":2,"title":"Icon \u5C5E\u6027","slug":"icon-\u5C5E\u6027"},{"level":2,"title":"Icon \u63D2\u69FD","slug":"icon-\u63D2\u69FD"},{"level":2,"title":"\u6E90\u4EE3\u7801","slug":"\u6E90\u4EE3\u7801"},{"level":2,"title":"\u8D21\u732E\u8005","slug":"\u8D21\u732E\u8005"}],"relativePath":"zh-CN/component/icon.md","lastUpdated":null}',w={},G=Object.assign(w,{setup(E){return(N,P)=>{const p=e("ElIcon"),u=e("ElRow"),g=e("ElButton"),d=e("IconList"),h=e("Contributors");return _(),m("div",null,[f,n(u,null,{default:t(()=>[a("div",null,[n(p,{size:30},{default:t(()=>[n(s(o))]),_:1}),n(s(o))])]),_:1}),b,n(u,null,{default:t(()=>[q,a("div",y,[n(p,{size:20},{default:t(()=>[n(s(o))]),_:1}),n(p,{color:"#409EFC",class:"no-inherit"},{default:t(()=>[n(s(i))]),_:1}),n(p,null,{default:t(()=>[n(s(k))]),_:1}),n(p,{class:"is-loading"},{default:t(()=>[n(s(v))]),_:1}),n(g,{type:"primary"},{default:t(()=>[n(p,{style:{"vertical-align":"middle",color:"#fff"}},{default:t(()=>[n(s(r))]),_:1}),x]),_:1})])]),_:1}),T,n(u,null,{default:t(()=>[a("div",S,[n(s(o),{style:{width:"1em",height:"1em","margin-right":"8px"}}),n(s(i),{style:{width:"1em",height:"1em","margin-right":"8px"}}),n(s(k),{style:{width:"1em",height:"1em","margin-right":"8px"}}),n(s(r),{style:{width:"1em",height:"1em","margin-right":"8px"}})])]),_:1}),I,C,n(d),V,n(h,{id:"icon"})])}}});export{A as __pageData,G as default};
|