Icon 图标

何时使用

需要状态图标、操作图标，或自定义 SVG 时使用。

基础用法

<script setup lang="ts">
import { DanIcon } from '@dandan-ui/ui'
</script>

<template>
  <div style="display: flex; gap: 16px; align-items: center; font-size: 22px">
    <DanIcon name="search" />
    <DanIcon name="edit" />
    <DanIcon name="delete" color="var(--dan-color-danger)" />
    <DanIcon name="success" color="var(--dan-color-success)" />
    <DanIcon name="loading" spin />
  </div>
</template>

全部图标

点击复制名称：name="search"。

loading

close

check

plus

minus

search

edit

delete

download

upload

arrow-left

arrow-right

arrow-up

arrow-down

chevron-left

chevron-right

chevron-up

chevron-down

info

warning

success

error

user

setting

home

menu

more

copy

link

eye

eye-off

star

heart

calendar

mail

refresh

filter

send

stop

attach

<script setup lang="ts">
import { DanIcon, iconNames } from '@dandan-ui/ui'
</script>

<template>
  <div
    style="
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
      gap: 12px;
    "
  >
    <div
      v-for="name in iconNames"
      :key="name"
      style="
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 14px 8px;
        border: 1px solid var(--dan-color-border);
        border-radius: 8px;
        background: var(--dan-color-bg);
        font-size: 22px;
      "
    >
      <DanIcon :name="name" />
      <span style="font-size: 12px; color: var(--dan-color-text-secondary)">
        {{ name }}
      </span>
    </div>
  </div>
</template>

API

Props

属性	说明	类型	默认值	必填
name	内置具名图标，见上方「全部图标」	IconName	—	否
size	图标尺寸；数字按 px，也可传 '1.2em'	number | string	继承当前字体大小	否
color	图标颜色，任意合法 CSS 颜色值	string	继承 currentColor	否
spin	是否持续旋转（适合 loading）	boolean	false	否

Events

无组件级自定义事件；点击等请绑在外层元素，或直接监听根节点原生事件。

Slots

插槽名	说明	作用域参数
default	自定义 SVG / 内容；仅在未传 name 时渲染	—

导出

导出	说明
iconMap	名称到图标组件的映射
iconNames	全部图标名称数组

Token

图标本身使用 currentColor；旋转动画时长受 --dan-duration-slow 影响。