Icon 图标

DHdesign 内置了来自 @szhn/dh-design-pc/icons 的 SVG 图标，配合 el-icon 容器可统一控制尺寸与颜色。

import { createApp } from 'vue'
import { Icon as ElIcon } from '@szhn/dh-design-pc'
import { Edit } from '@szhn/dh-design-pc/icons'

const app = createApp()
app.use(ElIcon)

基础用法

使用 el-icon 包裹图标组件，即可继承容器的字体大小与颜色。

<template>
  <div class="demo-icon">
    <el-icon :size="24"><Edit /></el-icon>
    <el-icon :size="24"><Delete /></el-icon>
    <el-icon :size="24"><Search /></el-icon>
    <el-icon :size="24"><Star /></el-icon>
    <el-icon :size="24"><User /></el-icon>
  </div>
</template>

<script lang="ts" setup>
import { Icon as ElIcon } from '@szhn/dh-design-pc'
import { Edit, Delete, Search, Star, User } from '@szhn/dh-design-pc/icons'

</script>

<style scoped>
.demo-icon {
  display: flex;
  gap: 16px;
  align-items: center;
}
</style>

尺寸

通过 size 属性快速控制图标大小，单位为像素。

<template>
  <div class="demo-icon">
    <el-icon :size="16"><Edit /></el-icon>
    <el-icon :size="20"><Edit /></el-icon>
    <el-icon :size="24"><Edit /></el-icon>
    <el-icon :size="32"><Edit /></el-icon>
    <el-icon :size="40"><Edit /></el-icon>
  </div>
</template>

<script lang="ts" setup>
import { Icon as ElIcon } from '@szhn/dh-design-pc'
import { Edit } from '@szhn/dh-design-pc/icons'

</script>

<style scoped>
.demo-icon {
  display: flex;
  gap: 16px;
  align-items: center;
  color: var(--el-text-color-primary);
}
</style>

颜色

color 属性可以接收 CSS 变量或具体色值，覆盖继承颜色。

<template>
  <div class="demo-icon">
    <el-icon :size="24" color="var(--el-color-primary)"><Edit /></el-icon>
    <el-icon :size="24" color="var(--el-color-success)"><Check /></el-icon>
    <el-icon :size="24" color="var(--el-color-warning)"><Warning /></el-icon>
    <el-icon :size="24" color="var(--el-color-danger)"><Delete /></el-icon>
    <el-icon :size="24" color="var(--el-color-info)"><InfoFilled /></el-icon>
  </div>
</template>

<script lang="ts" setup>
import { Icon as ElIcon } from '@szhn/dh-design-pc'
import { Edit, Check, Warning, Delete, InfoFilled } from '@szhn/dh-design-pc/icons'

</script>

<style scoped>
.demo-icon {
  display: flex;
  gap: 16px;
  align-items: center;
}
</style>

加载动画

为图标添加 is-loading 类即可获得 2 秒一圈的旋转动画，常用于加载状态。

<template>
  <div class="demo-icon">
    <el-icon :size="24" class="is-loading"><Loading /></el-icon>
    <el-icon :size="32" class="is-loading" color="var(--el-color-primary)"><Refresh /></el-icon>
  </div>
</template>

<script lang="ts" setup>
import { Icon as ElIcon } from '@szhn/dh-design-pc'
import { Loading, Refresh } from '@szhn/dh-design-pc/icons'

</script>

<style scoped>
.demo-icon {
  display: flex;
  gap: 24px;
  align-items: center;
}
</style>

直接使用 SVG

图标组件本身就是 SVG，可在不使用 el-icon 时直接渲染，但需要自行提供宽高。

<template>
  <div class="demo-icon">
    <Edit style="width: 1em; height: 1em;" />
    <Share style="width: 1em; height: 1em;" />
    <Delete style="width: 1em; height: 1em;" />
    <Search style="width: 1em; height: 1em;" />
  </div>
</template>

<script lang="ts" setup>
import { Edit, Share, Delete, Search } from '@szhn/dh-design-pc/icons'
</script>

<style scoped>
.demo-icon {
  display: flex;
  gap: 16px;
  font-size: 24px;
  color: var(--el-text-color-primary);
  align-items: center;
}
</style>

图标集合

以下是部分常用图标，点击复制即可使用；完整图标集合请参考官方地址。

<template>
  <div class="demo-icon-grid">
    <div v-for="item in icons" :key="item.name" class="demo-icon-card">
      <el-icon :size="24"><component :is="item.comp" /></el-icon>
      <span class="demo-icon-name">{{ item.name }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { markRaw } from 'vue'
import { Icon as ElIcon } from '@szhn/dh-design-pc'
import {
  Edit, Delete, Search, Star, User, Setting, Share, Message,
  Bell, Calendar, Location, Document,
} from '@szhn/dh-design-pc/icons'


const icons = [
  { name: 'Edit', comp: markRaw(Edit) },
  { name: 'Delete', comp: markRaw(Delete) },
  { name: 'Search', comp: markRaw(Search) },
  { name: 'Star', comp: markRaw(Star) },
  { name: 'User', comp: markRaw(User) },
  { name: 'Setting', comp: markRaw(Setting) },
  { name: 'Share', comp: markRaw(Share) },
  { name: 'Message', comp: markRaw(Message) },
  { name: 'Bell', comp: markRaw(Bell) },
  { name: 'Calendar', comp: markRaw(Calendar) },
  { name: 'Location', comp: markRaw(Location) },
  { name: 'Document', comp: markRaw(Document) },
]
</script>

<style scoped>
.demo-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.demo-icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: var(--el-border-radius-base);
  color: var(--el-text-color-regular);
  transition: all .2s;
}
.demo-icon-card:hover {
  color: var(--el-color-primary);
  border-color: var(--el-color-primary);
}
.demo-icon-name {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
</style>

API

Attributes

属性名	说明	类型	默认值
color	SVG 的 fill 颜色	string	继承颜色
size	图标大小（px）	number / string	继承字体大小

Slots

名称	说明
default	自定义默认内容

更多图标与用法详见 Element Plus Icon。

Icon 图标 ​

基础用法 ​

尺寸 ​

颜色 ​

加载动画 ​

直接使用 SVG ​

图标集合 ​

API ​

Attributes ​

Slots ​