# 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="$theme-6" size="42"></n-icon>
<!-- 或者 -->
<n-icon name="discover" color="#1890ff" size="42"></n-icon>

# API

# Attribute 参数

参数 说明 类型 可选值 默认值
name 内置图标名称 String - -
name-custom 自定义图标名称 String - -
size 图标字号 String / Number 30 -
color 图标颜色 String - $gray-13
weight 加粗 Boolean true false
margin 外边距,空格分割字符串形式简写,默认单位rpx。例如:"12" 、 "12 24"。 String - -
style-custom 自定义组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法示例::style-custom="{backgroundColor:red}" Object - -

# Event 事件

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