Icon 图标

基本用法

  1. <nut-icon 
  2.   type="top"
  3. >
  4. </nut-icon>

自定义尺寸

支持通过size设置图标大小，注意包含单位，如“40px”、“4rem”…

  1. <nut-icon 
  2.   type="action" 
  3.   size="40px"
  4. >
  5. </nut-icon>

自定义颜色

支持通过color设置图标颜色，支持十六进制/RGB/RGBA等写法。

  1. <nut-icon 
  2.   type="trolley" 
  3.   color="#f0250f"
  4. >
  5. </nut-icon>

自定义svg图标

支持通过url可以自定义添加额外的图片。

  1. <nut-icon type="self" :url="require('../../assets/svg/trolley.svg')"></nut-icon>

type可选值

nutui 自带图标库提供了下面的这些可选值。

  • top
  • down
  • right
  • action
  • more
  • trolley
  • search
  • tick
  • plus
  • minus
  • cross
  • circle-cross

Prop

字段说明类型默认值
type图标，可选值top/action/cross/down/right/more/plus/search/trolley/tick/minus/circle-crossString-
size尺寸，需要带单位String-
color颜色String-
url自定义图标路径，必须是svg格式,请用 require 方式引入String-

Icon 图标 - 图1