# Icon 图标

收集 360+ 阿里字体图标,图标统一风格,满足大部分场景需求

提示

如果内置图标中不符合小伙伴的项目需求或者数量不够,别担心,我们只需在项目中进行简单的配置自定义的图标即可
我们还准备了一份简易的扩展自定义图标库教程

# 基本使用

通过 <n-icon> 形式调用,设置 name 参数为图标名称即可

<n-icon name="discover"></n-icon>

# 自定义图标

通过小伙伴配置好的自定义图标,设置 name-custom 参数为图标名称即可。
注意:这里的 name-custom 仅演示,真实情况请根据小伙伴自定义配置的图标名称为准

<n-icon name-custom="d"></n-icon>

# 修改图标样式

  • color 参数修改图标颜色,颜色值说明
  • size 参数修改图标的大小
<n-icon name="discover" color="blue-6" size="56"></n-icon>

# API

# Attribute 属性

属性 说明 类型 可选值 默认值
name 内置图标名称 String - -
name-custom 自定义图标名称 String - -
size 图标字号 String / Number 30 -
color 图标颜色,颜色值说明 String - -
weight 加粗 Boolean true false
margin 参数详解外边距,数组形式,写法:[全边距],[上下,左右],[上,左右,下],[上,下,左,右] Array [1]、[1,2]、[1,2,3]、[1,2,3,4] -
padding 参数详解内边距,数组形式,写法:[全边距],[上下,左右],[上,左右,下],[上,下,左,右] Array [1]、[1,2]、[1,2,3]、[1,2,3,4] -
style-custom 参数详解自定义组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法示例::style-custom="{backgroundColor:red}" Object - -

# Event 事件

事件名 说明 回调参数
@click 点击事件 -