vue-element-plus-admin-doc/assets/components_icon-picker.md.9daeea16.js

import{o as n,c as a,a as s}from"./app.c38d1953.js";const t='{"title":"IconPicker 图标选择器组件","description":"","frontmatter":{},"headers":[{"level":2,"title":"用法","slug":"用法"},{"level":2,"title":"如何添加其他开源项目的图标","slug":"如何添加其他开源项目的图标"},{"level":2,"title":"Icon 属性","slug":"icon-属性"}],"relativePath":"components/icon-picker.md","lastUpdated":1721206001124}',e={},p=s('<h1 id="iconpicker-图标选择器组件"><a class="header-anchor" href="#iconpicker-图标选择器组件" aria-hidden="true">#</a> IconPicker 图标选择器组件</h1><p>用于快速选择 Iconify 图标。</p><p>IconPicker 组件位于 <a href="https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/components/IconPicker" target="_blank" rel="noopener noreferrer">src/components/IconPicker</a> 内</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>目前只集成了 Ant Design Icons 、Element Plus、TDesign Icons 三个开源项目图标</p></div><h2 id="用法"><a class="header-anchor" href="#用法" aria-hidden="true">#</a> 用法</h2><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">import</span> <span class="token punctuation">{</span> IconPicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@/components/IconPicker&#39;</span>\n\n<span class="token keyword">const</span> currentIcon <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">&#39;tdesign:book-open&#39;</span><span class="token punctuation">)</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>IconPicker</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>currentIcon<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>\n\n</code></pre></div><h2 id="如何添加其他开源项目的图标"><a class="header-anchor" href="#如何添加其他开源项目的图标" aria-hidden="true">#</a> 如何添加其他开源项目的图标</h2><p>可以执行 <code>pnpm run icon</code> 然后选择你想要的图标集</p><p>之后，在 <a href="https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/components/IconPicker/src/IconPicker.vue" target="_blank" rel="noopener noreferrer">IconPicker.vue</a> 导入，并添加到 <code>icons</code> 中即可。</p><h2 id="icon-属性"><a class="header-anchor" href="#icon-属性" aria-hidden="true">#</a> Icon 属性<span id="Icon"></span></h2><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>modelValue</td><td>选中项绑定值，支持v-model</td><td><code>string</code></td><td>-</td><td>-</td></tr></tbody></table>',11);e.render=function(s,t,e,o,c,l){return n(),a("div",null,[p])};export default e;export{t as __pageData};