Icon 图标请使用手机扫码体验

基本用法

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

自定义尺寸

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

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

自定义颜色

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

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

自定义svg图标

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

  1. html
    <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