Ued-Plus

Appearance

Icon 图标 ​

常用的icon图标

基础用法 ​

两种方法引入Icon

  • 通过图标name，传入到name属性中
  • 通过图标组件，包裹在<ued-icon>中

通过 size 可以设置图标大小， color 可以设置图标颜色

Plus
Minus
CirclePlus
CircleMinus
Loading
Message
Star
Search
Delete
Check
Close
显示代码
vue
<template>
	<div class="icon-content icon-basic">
		<div class="icon-basic-first">
			<div v-for="item in iconName" :key="item" class="icon-basic-item">
				<div>
					<ued-icon :name="item" :size="20" />
					<span class="icon-name">{{ item }}</span>
				</div>
			</div>
		</div>
		<div class="icon-basic-second">
			<div>
				<ued-icon :size="20" color="#409efc"><Plus /></ued-icon>
			</div>
			<div>
				<ued-icon :size="20"><Minus /></ued-icon>
			</div>
			<div>
				<ued-icon :size="20"><CirclePlus /></ued-icon>
			</div>
			<div>
				<ued-icon :size="20"><CircleMinus /></ued-icon>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Plus, Minus, CirclePlus, CircleMinus } from '@ued-plus/components'
const iconName = ref(['Plus', 'Minus', 'CirclePlus', 'CircleMinus'])
</script>

直接使用 SVG 图标 ​

由于SVG图标默认不携带任何属性, 你需要直接提供它们

显示代码
vue
<template>
	<div class="icon-content icon-svg">
		<!-- 由于SVG图标默认不携带任何属性, 你需要直接提供它们 -->
		<div class="icon-svg-show">
			<Plus style="width: 1em; height: 1em; margin-right: 8px" />
			<Minus style="width: 1em; height: 1em; margin-right: 8px" />
			<CirclePlus style="width: 1em; height: 1em; margin-right: 8px" />
			<CircleMinus style="width: 1em; height: 1em; margin-right: 8px" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { Plus, Minus, CirclePlus, CircleMinus } from '@ued-plus/components'
</script>

dot 和 badge 的使用 ​

使用 dot 可以配置红点的展示 同时使用 dot 和 badge 可以将红点展示转换为数字展示

TIP

dot和badge只在ued-icon包裹图标组件的情况下生效，name的情况下无效

1
99
99+
99+
显示代码
vue
<template>
	<div class="icon-content icon-dot">
		<div class="icon-dot-show">
			<ued-icon :size="20" dot><Plus /></ued-icon>
			<ued-icon :size="20" dot><Minus /></ued-icon>
			<ued-icon :size="20" dot><CirclePlus /></ued-icon>
			<ued-icon :size="20" dot><CircleMinus /></ued-icon>
			<ued-icon :size="20" dot :badge="1"><Plus /></ued-icon>
			<ued-icon :size="20" dot :badge="99"><Minus /></ued-icon>
			<ued-icon :size="20" dot :badge="100"><CirclePlus /></ued-icon>
			<ued-icon :size="20" dot :badge="999"><CircleMinus /></ued-icon>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { Plus, Minus, CirclePlus, CircleMinus } from '@ued-plus/components'
</script>

API ​

属性名说明类型默认值
sizeSVG 图标的大小,size x sizenumber/string继承字体大小
colorsvg 的 fill 颜色string继承颜色
dot红点角标booleanfalse
badge角标数字,大于100时显示99+numberundefined