Icon 图标
基于 iconfont.cn 的图标组件,内置常用图标,支持自定义扩展。
基础用法
通过 name 属性引用内置图标:
图标大小
通过 size 属性设置图标大小,支持数字(px)和字符串:
旋转与动画
通过 rotate 设置旋转角度,通过 spin 开启旋转动画:
图标颜色
通过 color 属性自定义图标颜色:
自定义 SVG
通过默认插槽传入自定义 SVG 路径内容:
自定义图标
用户可通过配置额外加载自己的 iconfont 图标:
1. 在 iconfont.cn 创建项目,添加图标
2. 选择「Symbol」模式,复制 JS 链接
3. 在 nuxt.config.ts 中配置 iconfontUrl
4. 使用 <NIcon name="your-icon" /> 引用自定义图标
内置图标一览
点击图标可复制名称,共 120 个内置图标。
aixin
bianji
Dyanjing
caidan
anquan
bangzhu
buganxingqu
bofangjilu
chuangzuo
chenggong
ceshi
dianhua
dianzan
dingwei
diantong_guan
dianying
ditu
diantong_kai
dianyingpiao
dingdan
gengduo
faxian
ertongpiao
gongyi
hongbao
fuzhi
fenxiang
huatifuhao
huiyuan
jiju
jianshao
kabao
huati
guanzhu
maiyizengyi
mima
nan
nv
lihe
paihangbang
lipinka
pengyouquan
mingxinghuodong
qupiao
saoyisao
rili
pinglun
qinghuiyuan
riqian
shandian
shaixuan
shanchu
shezhi
shangchuan
shequ
shibai
shijian
shoucang
shouji
shouye
shuju
shuaxin
sousuo
tanhao
taolunqu
tishi
tupian
weibo
wenjuan
wode
weixin
wodeguanzhu
xiangkan
xiangji
xiaoxi
xiazai
xiaojuchang
xiaoxizhongxin
yinhangka
yanjing
yixiangkan
zengjia
WIFI
zhiwen
aixin1
chenggong1
dianzan1
dianhua1
bangzhu1
dianyingpiao1
faxian1
dingwei1
gonggao
huati1
jianshao1
huiyuan1
pinglun1
shequ1
shibai1
shijian1
shandian1
wode1
shouye1
shouji1
tanhao1
shoucang1
shuju1
wenda
yanjing1
yingchengka
xiangji1
yingyuan
yinhangyouhui
xiaoshi
yanchu
zengjia1
dianying1
youhuiquan
remen
chuangzuo1
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
name | string | - | 图标名称,对应 iconfont 中的 font_class |
size | number | string | '1em' | 图标大小,数字为 px,字符串如 "24px"、"1.5em" |
rotate | number | 0 | 旋转角度 |
spin | boolean | false | 是否旋转动画 |
color | string | inherit | 图标颜色 |