import{e as n,o as a,G as t}from"./vendor.bd251973.js";const l={class:"markdown-body"},p=t(`

Icon \u56FE\u6807

\u4ECB\u7ECD

\u57FA\u4E8E IconFont \u5B57\u4F53\u7684\u56FE\u6807\u96C6\uFF0C\u53EF\u4EE5\u901A\u8FC7 Icon \u7EC4\u4EF6\u4F7F\u7528\u3002

\u5B89\u88C5

import { createApp } from 'vue';
// vue
import { Icon } from '@nutui/nutui';
// taro
import { Icon } from '@nutui/nutui-taro';

const app = createApp();
app.use(Icon);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

Icon \u7684 name \u5C5E\u6027\u652F\u6301\u4F20\u5165\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\u3002

<nut-icon name="dongdong"></nut-icon>
<nut-icon name="JD"></nut-icon>
<nut-icon size="40"  name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"></nut-icon>

\u56FE\u6807\u989C\u8272

Icon \u7684 color \u5C5E\u6027\u7528\u6765\u8BBE\u7F6E\u56FE\u6807\u7684\u989C\u8272\u3002

<nut-icon name="dongdong" color="#fa2c19"></nut-icon>
<nut-icon name="dongdong" color="#64b578"></nut-icon>
<nut-icon name="JD" color="#fa2c19"></nut-icon>

\u56FE\u6807\u5927\u5C0F

Icon \u7684 size \u5C5E\u6027\u7528\u6765\u8BBE\u7F6E\u56FE\u6807\u7684\u5C3A\u5BF8\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A px\u3002

<nut-icon name="dongdong"></nut-icon>
<nut-icon name="dongdong" size="24"></nut-icon>
<nut-icon name="dongdong" size="16"></nut-icon>

\u81EA\u5B9A\u4E49\u56FE\u6807

\u5982\u679C\u9700\u8981\u5728\u73B0\u6709 Icon \u7684\u57FA\u7840\u4E0A\u4F7F\u7528\u66F4\u591A\u56FE\u6807\uFF0C\u53EF\u4EE5\u5F15\u5165\u7B2C\u4E09\u65B9 iconfont \u5BF9\u5E94\u7684\u5B57\u4F53\u6587\u4EF6\u548C CSS \u6587\u4EF6\uFF0C\u4E4B\u540E\u5C31\u53EF\u4EE5\u5728 Icon \u7EC4\u4EF6\u4E2D\u76F4\u63A5\u4F7F\u7528\u3002

\u65B9\u6848\u4E00 \u5F15\u5165 iconfont \u63A8\u8350\u6B64\u65B9\u6848

\u7B2C\u4E00\u6B65\uFF1A\u9996\u5148\u5728 iconfont \u751F\u6210\u4F60\u81EA\u5B9A\u4E49\u7684Icon\u6587\u4EF6\u4E0B\u8F7D\u5B58\u653E\u81F3\u672C\u5730\u9879\u76EE \u8BE6\u7EC6\u4F7F\u7528\u8BF4\u660E

/assets/font/demo.css
/assets/font/demo_index.html
/assets/font/iconfont.css
/assets/font/iconfont.js
/assets/font/iconfont.json
/assets/font/iconfont.ttf
/assets/font/iconfont.woff
/assets/font/iconfont.woff2

\u7B2C\u4E8C\u6B65\uFF1A\u9879\u76EE\u5165\u53E3\u6587\u4EF6 main.js \u5F15\u7528 iconfont.css

import './assets/font/iconfont.css';

\u7B2C\u4E09\u6B65\uFF1A

<!-- 
  font-class-name \u6307\u5B9A\u7C7B\u540D\u4E3A\u9ED8\u8BA4 iconfont
  class-prefix \u6307\u5B9A\u9ED8\u8BA4 icon
  name \u503C\u6839\u636E iconfont.css \u4E2D\u503C\u5BF9\u5E94\u586B\u5199 
-->
<nut-icon font-class-name="iconfont" class-prefix="icon" name="close" />

\u65B9\u6848\u4E8C \u7B2C\u4E09\u65B9\u81EA\u5B9A\u4E49\u5B57\u4F53\u5E93

/* \u5F15\u5165\u7B2C\u4E09\u65B9\u6216\u81EA\u5B9A\u4E49\u7684\u5B57\u4F53\u56FE\u6807\u6837\u5F0F */
@font-face {
  font-family: 'my-icon';
  src: url('./my-icon.ttf') format('truetype');
}

.my-icon {
  font-family: 'my-icon';
}

.my-icon-extra::before {
  content: '\\e626';
}

<!-- 
  font-class-name \u6307\u5B9A\u7C7B\u540D\u4E3A\u9ED8\u8BA4 my-icon
  class-prefix \u6307\u5B9A\u9ED8\u8BA4 my-icon
-->
<nut-icon font-class-name="my-icon" class-prefix="my-icon" name="extra" />

API

Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
name	\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5	String	-
color	\u56FE\u6807\u989C\u8272	String	-
size	\u56FE\u6807\u5927\u5C0F\uFF0C\u5982 `20px` `2em` `2rem`	String or Number	-
font-class-name	\u5B57\u4F53\u57FA\u7840\u7C7B\u540D	String	`nutui-iconfont`
class-prefix	\u7C7B\u540D\u524D\u7F00\uFF0C\u7528\u4E8E\u4F7F\u7528\u81EA\u5B9A\u4E49\u56FE\u6807	String	`nut-icon`
tag	HTML \u6807\u7B7E	String	`i`

Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
click	\u70B9\u51FB\u56FE\u6807\u65F6\u89E6\u53D1	event: Event

`,32),c=[p],i={setup(o,{expose:s}){return s({frontmatter:{}}),(h,r)=>(a(),n("div",l,c))}};export{i as default};