uni-icons遍历循环所有内置可用图标

应用场景:用户自定义选择要展示什么图标,不用去官网找图标名字。
效果图:
在这里插入图片描述
代码:

<template>

	<view style="display: flex;flex-wrap: wrap;">
		
		<uni-icons v-for="(name, index) in UNI_ICONS_NAME_LIST" :key="index" :type="name" size="30"></uni-icons>
	</view>
	<view>
		
	</view>
</template>
<script>
	const UNI_ICONS_NAME_LIST = [
	  'arrow-down', 'arrow-left', 'arrow-right', 'arrow-up', 'down', 'left', 'right', 'up', 'auth', 'auth-filled', 'calendar', 'calendar-filled', 'camera', 'camera-filled', 'cart', 'cart-filled', 'chat', 'chat-filled', 'chatboxes', 'chatboxes-filled', 'chatbubble', 'chatbubble-filled', 'checkbox', 'checkbox-filled', 'circle', 'circle-filled', 'clear', 'close', 'checkmarkempty', 'closeempty', 'cloud-download', 'cloud-download-filled', 'cloud-upload', 'cloud-upload-filled', 'color', 'color-filled', 'contact', 'contact-filled', 'download', 'download-filled', 'email', 'email-filled', 'eye', 'eye-filled', 'eye-slash', 'eye-slash-filled', 'fire', 'fire-filled', 'flag', 'flag-filled', 'folder-add', 'folder-add-filled', 'gear', 'gear-filled', 'gift', 'gift-filled', 'hand-down', 'hand-down-filled', 'hand-up', 'hand-up-filled', 'heart', 'heart-filled', 'help', 'help-filled', 'home', 'home-filled', 'image', 'image-filled', 'images', 'images-filled', 'info', 'info-filled', 'location', 'location-filled', 'locked', 'locked-filled', 'mail-open', 'mail-open-filled', 'map', 'map-filled', 'map-pin', 'map-pin-ellipse', 'medal', 'medal-filled', 'mic', 'mic-filled', 'micoff', 'micoff-filled', 'minus', 'minus-filled', 'more', 'more-filled', 'navigate', 'navigate-filled', 'notification', 'notification-filled', 'paperplane', 'paperplane-filled', 'person', 'person-filled', 'personadd', 'personadd-filled', 'phone', 'phone-filled', 'plus', 'plus-filled', 'redo', 'redo-filled', 'refresh', 'refresh-filled', 'refreshempty', 'reload', 'settings', 'settings-filled', 'shop', 'shop-filled', 'smallcircle', 'smallcircle-filled', 'sound', 'sound-filled', 'staff', 'staff-filled', 'trash', 'trash-filled', 'tune', 'tune-filled', 'undo', 'undo-filled', 'upload', 'upload-filled', 'videocam', 'videocam-filled', 'vip', 'vip-filled', 'wallet', 'wallet-filled', 'back', 'forward', 'bars', 'compose', 'font', 'headphones', 'link', 'list', 'loop', 'paperclip', 'plusempty', 'pulldown', 'weixin', 'weibo', 'pyq', 'qq', 'scan', 'search', 'spinner-cycle', 'star', 'star-filled', 'starhalf'
	]
	export default {
		data() {
			return {
				UNI_ICONS_NAME_LIST
			}
		},
		mounted() {


			
		},
		methods: {
			open(){
			        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ,type 属性将失效 ,仅支持 ['top','left','bottom','right','center']
			        this.$refs.popup.open('top')
			      }
		},

	}
</script>
<style lang="scss" scoped>
	
</style>

图标名字列表数据是从官网扒下来的。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值