mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-05 19:41:57 +08:00
7 lines
4.0 KiB
JavaScript
7 lines
4.0 KiB
JavaScript
import{_ as s,o as a,c as t,V as e}from"./chunks/framework.b31a4d00.js";const h=JSON.parse('{"title":"@fesjs/plugin-icon","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/icon.md"}'),n={name:"reference/plugin/plugins/icon.md"},l=e(`<h1 id="fesjs-plugin-icon" tabindex="-1">@fesjs/plugin-icon <a class="header-anchor" href="#fesjs-plugin-icon" aria-label="Permalink to "@fesjs/plugin-icon""></a></h1><h2 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></a></h2><p>提供以 <code>component</code> 的方式，直接使用 svg icon 的能力。</p><h2 id="启用方式" tabindex="-1">启用方式 <a class="header-anchor" href="#启用方式" aria-label="Permalink to "启用方式""></a></h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-icon</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="使用" tabindex="-1">使用 <a class="header-anchor" href="#使用" aria-label="Permalink to "使用""></a></h2><p>新建 <code>src/icons</code> 目录，将 svg 文件放入其中，在 <code>component</code> 中引用：</p><div class="language-jsx"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">fes-icon</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">iconName</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span></code></pre></div><h3 id="属性" tabindex="-1">属性 <a class="header-anchor" href="#属性" aria-label="Permalink to "属性""></a></h3><table><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">说明</th><th style="text-align:left;">类型</th></tr></thead><tbody><tr><td style="text-align:left;">type</td><td style="text-align:left;">svg 文件名</td><td style="text-align:left;"><code>string</code></td></tr><tr><td style="text-align:left;">spin</td><td style="text-align:left;">是否无限旋转</td><td style="text-align:left;"><code>boolean</code></td></tr><tr><td style="text-align:left;">rotate</td><td style="text-align:left;">旋转角度</td><td style="text-align:left;"><code>number</code></td></tr></tbody></table>`,11),o=[l];function p(c,r,i,d,D,y){return a(),t("div",null,o)}const u=s(n,[["render",p]]);export{h as __pageData,u as default};
|