Home Explore Help
Sign In
githab
/
nutui
3
0
Fork 0
Files
Tree: a2016afb03
Branches Tags
nutui
/
3.1.6
/
doc.b6ad634e.js

doc.b6ad634e.js 8.3 KB
History Raw

1 
  1. import{e as s,o as a,G as n}from"./vendor.9cc7b6f2.js";const t={class:"markdown-body"},l=[n('<h1>Icon 图标</h1><h3>介绍</h3><p>基于 IconFont 字体的图标集，可以通过 Icon 组件使用。</p><h3>安装</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;\n<span class="hljs-comment">// vue</span>\n<span class="hljs-keyword">import</span> { Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;\n<span class="hljs-comment">// taro</span>\n<span class="hljs-keyword">import</span> { Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui-taro&#39;</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Icon);\n\n</code></pre><h2>代码演示</h2><h3>基础用法</h3><p><code>Icon</code> 的 <code>name</code> 属性支持传入图标名称或图片链接。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;dongdong&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-icon</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;JD&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-icon</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;40&quot;</span>  <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-icon</span>&gt;</span>\n</code></pre><h3>图标颜色</h3><p><code>Icon</code> 的 <code>color</code> 属性用来设置图标的颜色。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;dongdong&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#fa2c19&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-icon</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;dongdong&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#64b578&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-icon</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;JD&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#fa2c19&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-icon</span>&gt;</span>\n</code></pre><h3>图标大小</h3><p><code>Icon</code> 的 <code>size</code> 属性用来设置图标的尺寸大小，默认单位为 <code>px</code>。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;dongdong&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-icon</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;dongdong&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;24&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-icon</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;dongdong&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;16&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-icon</span>&gt;</span>\n</code></pre><h3>自定义图标</h3><p>如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。</p><blockquote><p>方案一 引入 <a href="https://www.iconfont.cn/">iconfont</a> 推荐此方案</p></blockquote><p>第一步：首先在 <a href="https://www.iconfont.cn/">iconfont</a> 生成你自定义的Icon文件下载存放至本地项目 <a href="https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&amp;helptype=code">详细使用说明</a></p><pre><code class="language-bash">/assets/font/demo.css\n/assets/font/demo_index.html\n/assets/font/iconfont.css\n/assets/font/iconfont.js\n/assets/font/iconfont.json\n/assets/font/iconfont.ttf\n/assets/font/iconfont.woff\n/assets/font/iconfont.woff2\n</code></pre><p>第二步：项目入口文件 main.js 引用 <code>iconfont.css</code></p><pre><code class="language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-string">&#39;./assets/font/iconfont.css&#39;</span>;\n</code></pre><p>第三步：</p><pre><code class="language-html"><span class="hljs-comment">&lt;!-- \n  font-class-name 指定类名为默认 iconfont\n  class-prefix 指定默认 icon\n  name 值根据 iconfont.css 中值对应填写 \n--&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> <span class="hljs-attr">font-class-name</span>=<span class="hljs-string">&quot;iconfont&quot;</span> <span class="hljs-attr">class-prefix</span>=<span class="hljs-string">&quot;icon&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;close&quot;</span> /&gt;</span>\n</code></pre><blockquote><p>方案二 第三方自定义字体库</p></blockquote><pre><code class="language-css"><span class="hljs-comment">/* 引入第三方或自定义的字体图标样式 */</span>\n<span class="hljs-keyword">@font-face</span> {\n  <span class="hljs-attribute">font-family</span>: <span class="hljs-string">&#39;my-icon&#39;</span>;\n  <span class="hljs-attribute">src</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">&#39;./my-icon.ttf&#39;</span>) <span class="hljs-built_in">format</span>(<span class="hljs-string">&#39;truetype&#39;</span>);\n}\n\n<span class="hljs-selector-class">.my-icon</span> {\n  <span class="hljs-attribute">font-family</span>: <span class="hljs-string">&#39;my-icon&#39;</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">&#39;\\e626&#39;</span>;\n}\n</code></pre><pre><code class="language-html"><span class="hljs-comment">&lt;!-- \n  font-class-name 指定类名为默认 my-icon\n  class-prefix 指定默认 my-icon\n--&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-icon</span> <span class="hljs-attr">font-class-name</span>=<span class="hljs-string">&quot;my-icon&quot;</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\n</code></pre><h2>API</h2><h3>Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>图标名称或图片链接</td><td>String</td><td>-</td></tr><tr><td>color</td><td>图标颜色</td><td>String</td><td>-</td></tr><tr><td>size</td><td>图标大小，如 <code>20px</code> <code>2em</code> <code>2rem</code></td><td>String or Number</td><td>-</td></tr><tr><td>font-class-name</td><td>字体基础类名</td><td>String</td><td><code>nutui-iconfont</code></td></tr><tr><td>class-prefix</td><td>类名前缀，用于使用自定义图标</td><td>String</td><td><code>nut-icon</code></td></tr><tr><td>tag</td><td>HTML 标签</td><td>String</td><td><code>i</code></td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>click</td><td>点击图标时触发</td><td>event: Event</td></tr></tbody></table>',32)],p={setup:(n,{expose:p})=>(p({frontmatter:{}}),(n,p)=>(a(),s("div",t,l)))};export{p as default};
    2.