IconButton 图标按钮

<template>
  <PreviewBlock title="最简例子">
    <DuIconButton size="large" text="文字" name="two-column" color="primary" textColor="secondary" />
    <DuIconButton size="large" name="label-related" color="#06b6d4" />
  </PreviewBlock>
  <PreviewBlock title="改变颜色/使用 CSS color 属性">
    <div class="text-blue text-sm">
    <DuIconButton  name="refresh" class="mr-4px" />

      <span>这是一个图标加文案，都是同一种颜色</span>
    </div>
  </PreviewBlock>
  <PreviewBlock title="改变颜色/直接使用 color 属性">
    <DuIconButton  name="refresh" color="primary" />

    <DuIconButton name="refresh" text="文字" color="secondary" />
    <DuIconButton name="refresh" text="文字" color="success" />
    <DuIconButton name="refresh" text="文字" color="warning" />
    <DuIconButton name="refresh" text="文字" color="error" />
    <DuIconButton name="refresh" text="文字" color="trade" />
    <DuIconButton name="wifi" text="文字" color="#06b6d4" />
  </PreviewBlock>
   <PreviewBlock title="改变文字以及颜色">
    <DuIconButton  name="refresh" color="warning" />
    <DuIconButton name="refresh" text="文字" color="warning" />
    <DuIconButton name="refresh" text="文字" color="warning" textColor="secondary" />
  </PreviewBlock>
  <PreviewBlock title="改变大小">
    <DuIconButton name="scanning" text="文字" size="mini" />
    <DuIconButton name="scanning" text="文字" size="small"  />
    <DuIconButton name="scanning" text="文字"  size="small" />
    <DuIconButton name="scanning" text="文字"  size="medium" />
    <DuIconButton name="scanning" text="文字" size="large"  />
    <DuIconButton name="scanning" size="large" :iconSize="20" />
    <DuIconButton name="copylink" size="large" :iconSize="20" />
  </PreviewBlock>
  <PreviewBlock title="使用图片链接">
    <DuIconButton name="https://cdn.qiandaoapp.com/interior/images/3ff45be24f8686698cf75886c5d235e0.svg" />
    <DuIconButton name="https://cdn.qiandaoapp.com/interior/images/3ff45be24f8686698cf75886c5d235e0.svg" :size="32" />
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuIconButton,DuIcon } from 'dangoui'
</script>