Vue DevUI
主题

Icon 图标

用于显示图标。

何时使用

需要显示图标时。

所有内置的图标可在 DevUI 官网进行查看：https://devui.design/icon/ruleResource

基本用法

logo.svg
通过name属性，指定需要显示的图标，支持 DevUI 图标库图标和 URL 形式的图标。
<template>
  <div class="demo-spacing">
    <d-icon name="like"></d-icon>
    <d-icon name="https://devui.design/components/assets/logo.svg" size="16px"></d-icon>
  </div>
</template>

附带描述信息

设置


设置


logo.svgLogo


运行中


编辑


无权编辑
利用prefix和suffix可分别设置图标的前置和后置内容，operable设置可交互图标，disabled设置禁用态，rotate设置图标旋转角度或自动旋转。
<template>
  <d-icon name="setting" operable>
    <template #prefix>
      <span>设置</span>
    </template>
  </d-icon>
  <br />
  <br />
  <d-icon name="setting" operable>
    <template #suffix>
      <span>设置</span>
    </template>
  </d-icon>
  <br />
  <br />
  <d-icon name="https://devui.design/components/assets/logo.svg" size="16px" operable>
    <template #suffix>
      <span>Logo</span>
    </template>
  </d-icon>
  <br />
  <br />
  <d-icon name="refresh" rotate="infinite" operable>
    <template #suffix>
      <span>运行中</span>
    </template>
  </d-icon>
  <br />
  <br />
  <d-icon name="edit" :rotate="180">
    <template #suffix>
      <span>编辑</span>
    </template>
  </d-icon>
  <br />
  <br />
  <d-icon name="edit" disabled>
    <template #suffix>
      <span>无权编辑</span>
    </template>
  </d-icon>
</template>

颜色

通过color属性指定图标的颜色。
<template>
  <div class="demo-spacing">
    <d-icon name="right-o" color="#3DCCA6"></d-icon>
    <d-icon name="error-o" color="#F66F6A"></d-icon>
  </div>
</template>

尺寸

通过size属性，设置图标尺寸。
<template>
  <div class="demo-spacing">
    <d-icon name="insert-image"></d-icon>
    <d-icon name="insert-image" size="32px"></d-icon>
  </div>
</template>

图标组

可操作图标
静态图标
常用图标组使用场景
<template>
  <h5>可操作图标</h5>
  <d-icon-group>
    <d-icon name="add" operable disabled size="16px"></d-icon>
    <d-icon name="edit" operable size="16px"></d-icon>
    <d-icon name="delete" operable size="16px"></d-icon>
  </d-icon-group>
  <h5>静态图标</h5>
  <d-icon-group>
    <d-icon name="add" disabled size="16px"></d-icon>
    <d-icon name="edit" size="16px"></d-icon>
    <d-icon name="delete" size="16px"></d-icon>
  </d-icon-group>
</template>

自定义字体图标

Icon 组件默认引用 DevUI 图标库的图标，如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。

@font-face {
  font-family: 'my-icon';
  src: url('./my-icon.ttf') format('truetype');
}

.my-icon {
  font-family: 'my-icon';
}

.my-icon-right::before {
  content: '\E03F';
}

引入字体图标的 css

@import 'my-icon.css';

使用

<d-icon class-prefix="my-icon" name="right"></d-icon>

自定义 svg

可以借助 vite-plugin-vue-svg，将 svg component 传入，实现自定义 svg。

<template>
  <d-icon :component="MySvgIcon"></d-icon>
</template>
<script>
import { defineComponent } from 'vue';
import MySvgIcon from '../../assets/logo.svg';

export default defineComponent({
  setup() {
    return {
      MySvgIcon,
    };
  },
});
</script>

Icon 参数

参数名类型默认值说明跳转 Demo
namestring--必选，图标名称基本用法
sizestring'16px'可选，图标尺寸尺寸
colorstring'#252b3a'可选，图标颜色颜色
class-prefixstring'icon'可选，自定义字体图标前缀自定义字体图标
componentVueComponentnull可选，自定义 svg 图标自定义 svg
operablebooleanfalse可选，图标是否可操作附带描述信息
disabledbooleanfalse可选，图标是否禁用附带描述信息
rotatenumber | 'infinite'--可选，infinite表示设置图标自动旋转，数字值表示图标旋转角度附带描述信息

Icon 插槽

插槽名说明
prefix图标前置内容
suffix图标后置内容
Contributors
粤A2-20044005号