低代码高性能原生UI框架

Appearance

本页导读

Icon 字体图标 ​

组件类型：UxIconComponentPublicInstance

基于字体的图标集，包含了大多数常见场景的图标

平台兼容性 ​

AndroidiOSweb鸿蒙 Next小程序
√√√xx

图标集 ​

happy

wink

wink2

unhappy

sleep

devil

surprised

tongue

coffee

sunglasses

displeased

grin

angry

saint

cry

shoot

squint

laugh

triangledown

trianglerup

triangleleft

triangleright

arrowleft

arrowright

arrowup

arrowdown

arrow2left

arrow2right

arrow2up

arrow2down

reply

forward

pencil

code

share

backintime

paperplane

brush

megaphone

refresh

thumbsup

thumbsdown

useradd

users

user

select

cancel

plus

minus

link

info

help

camera

picture

basket

trash

flag

tag

search

music

cloudthunder

chartbar

chartpie

bug

chartarea

paste

mic

mute

volumeup

volumedown

signal

wifi

more

morevert

heart

heartempty

star

starempty

starhalf

down

left

right

up

phone

chat

bell

belloff

location

wechat

eye

eyeoff

setting

toggleon

toggleoff

home

layout

crop

female

male

checkempty

check

scan

Props ​

属性名类型默认值说明
typeString-字体类型
colorString'#333333'字体颜色
darkColorString-深色
sizeNumber14字体大小
customFontString-网络字体路径 或 自定义字体路径
customFamilyString-自定义字体family

darkColor ​

值说明
none不显示
auto自动适配深色模式
color其他颜色

Events ​

事件名说明参数
click点击事件event: MouseEvent

通过 fontFamily 自定义图标 ​

html
<ux-icon customFont="/static/icons.ttf" fontFamily="myFont" :size="26">{{'\uebc6'}}</ux-icon>
<ux-icon customFont="/static/icons.ttf" fontFamily="myFont" :size="26">{{'\uebc6'}}</ux-icon>

示例代码 ​

html
<template>
	<ux-page>
		<ux-navbar :title="title" :border="false"></ux-navbar>
		
		<ux-scroll ref="uxScrollRef" :backtop="true" :loadmore-enabled="true" :lastPage="iconList.length == data.length" @loadmore="load">
			<ux-card direction="column" icon="flag" title="图标" :bold="true">
				<ux-text text="常用字体图标集，包含了大多数常见场景的图标"></ux-text>
				<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
					<ux-text text="详细文档："></ux-text>
					<ux-text style="flex: 1" name="图标" text="https://www.uxframe.cn/component/basic/icon.html" mode="link"></ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="100+图标" :bold="true">
				<view class="grid">
					<view class="icon" v-for="(icon, i) in iconList" :key="i">
						<ux-icon :type="icon.icon" :size="18"></ux-icon>
						<ux-text :text="icon.name" :mt="5"></ux-text>
					</view>
				</view>
			</ux-card>
			
		</ux-scroll>
	</ux-page>
</template>
<template>
	<ux-page>
		<ux-navbar :title="title" :border="false"></ux-navbar>
		
		<ux-scroll ref="uxScrollRef" :backtop="true" :loadmore-enabled="true" :lastPage="iconList.length == data.length" @loadmore="load">
			<ux-card direction="column" icon="flag" title="图标" :bold="true">
				<ux-text text="常用字体图标集，包含了大多数常见场景的图标"></ux-text>
				<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
					<ux-text text="详细文档："></ux-text>
					<ux-text style="flex: 1" name="图标" text="https://www.uxframe.cn/component/basic/icon.html" mode="link"></ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="100+图标" :bold="true">
				<view class="grid">
					<view class="icon" v-for="(icon, i) in iconList" :key="i">
						<ux-icon :type="icon.icon" :size="18"></ux-icon>
						<ux-text :text="icon.name" :mt="5"></ux-text>
					</view>
				</view>
			</ux-card>
			
		</ux-scroll>
	</ux-page>
</template>
ts
<script setup>
	import { iconfont } from "@/uni_modules/ux-frame/components/ux-icon/iconfont.uts"

	type Icon = {
		name : string,
		icon : string
	}
	
	let title = ''
	let data = [] as Icon[]
	let iconList = ref<Icon[]>([] as Icon[])
	let pageNum = 1
	let pageSize = 30
	
	const uxScrollRef = ref<UxScrollComponentPublicInstance | null>(null)
	
	function getList() : Icon[] {
		const startIndex = (pageNum - 1) * pageSize;
		const endIndex = startIndex + pageSize;
		return data.slice(startIndex, endIndex);
	}
	
	function load() {
		pageNum++
		iconList.value = iconList.value.concat(getList())
		uxScrollRef.value!.loadSuccess(data.length == iconList.value.length)
	}
	
	onLoad((e: OnLoadOptions) => {
		title = e['title'] ?? ''
		
		let icons = iconfont as UTSJSONObject
		icons.toMap().forEach((v : any | null, k : string) => {
			data.push({
				name: k,
				icon: v! as string,
			} as Icon)
		})
		
		setTimeout(() => {
			iconList.value = getList()
		}, 300);
	})
</script>
<script setup>
	import { iconfont } from "@/uni_modules/ux-frame/components/ux-icon/iconfont.uts"

	type Icon = {
		name : string,
		icon : string
	}
	
	let title = ''
	let data = [] as Icon[]
	let iconList = ref<Icon[]>([] as Icon[])
	let pageNum = 1
	let pageSize = 30
	
	const uxScrollRef = ref<UxScrollComponentPublicInstance | null>(null)
	
	function getList() : Icon[] {
		const startIndex = (pageNum - 1) * pageSize;
		const endIndex = startIndex + pageSize;
		return data.slice(startIndex, endIndex);
	}
	
	function load() {
		pageNum++
		iconList.value = iconList.value.concat(getList())
		uxScrollRef.value!.loadSuccess(data.length == iconList.value.length)
	}
	
	onLoad((e: OnLoadOptions) => {
		title = e['title'] ?? ''
		
		let icons = iconfont as UTSJSONObject
		icons.toMap().forEach((v : any | null, k : string) => {
			data.push({
				name: k,
				icon: v! as string,
			} as Icon)
		})
		
		setTimeout(() => {
			iconList.value = getList()
		}, 300);
	})
</script>
css
<style lang="scss">
	.grid {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.icon {
			width: 33.3%;
			height: 70px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border: 1rpx solid #f0f0f0;
		}
	}
</style>
<style lang="scss">
	.grid {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.icon {
			width: 33.3%;
			height: 70px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border: 1rpx solid #f0f0f0;
		}
	}
</style>