同名自定义tm-vuetify 2.0.1

tm-icons 图标

🎉目录导航

👉使用方法,跟数1,2,3一样简单

基本示例

<tm-icons :size="48" name="icon-filter-fill"></tm-icons>
1

图片图标

<tm-icons :size="100" name="https://cdn.roundicons.com/wp-content/uploads/2017/09/Lego-freebie-icon.png"></tm-icons>
1

👉完整的示例

可以复制到页面直接运行

<template>
	<view>
		<tm-menubars title="图标" color="bg-gradient-blue-accent"  :showback="true"></tm-menubars>
		<tm-sheet>
			<view class="text-size-s text-weight-b mb-24">基本示例</view>
			<tm-icons :size="48" name="icon-filter-fill"></tm-icons>
			<tm-icons color="red" :size="48" name="icon-paperplane-fill"></tm-icons>
			<tm-icons color="blue" :size="48" name="icon-position-fill"></tm-icons>
			<tm-icons color="pink" :size="48" name="icon-layergroup-fill"></tm-icons>
			<tm-icons  color="green" :size="48" name="icon-unlock-fill"></tm-icons>
			
		</tm-sheet>
		<tm-sheet>
			<view class="text-size-s text-weight-b mb-24">图片图标</view>
		
			<tm-icons :size="100" name="https://cdn.roundicons.com/wp-content/uploads/2017/09/Lego-freebie-icon.png"></tm-icons>
			<tm-icons :size="100" name="https://cdn.roundicons.com/wp-content/uploads/2017/09/Candles-freebie-icon.png"></tm-icons>
			<tm-icons :size="100" name="https://cdn.roundicons.com/wp-content/uploads/2017/09/Box-freebie-icon-1.png"></tm-icons>
			<tm-icons :size="100" name="https://cdn.roundicons.com/wp-content/uploads/2017/09/Present-freebie-icon.png"></tm-icons>
			<tm-icons :size="100" name="https://cdn.roundicons.com/wp-content/uploads/2017/09/Flag-freebie-icon.png"></tm-icons>
		</tm-sheet>
		<tm-sheet>
			<view class="text-size-s text-weight-b mb-24">其它组件上应用图标</view>
			<tm-listitem :margin="[0,32]"  title="应用图标" :show-left-icon="true" left-icon="https://cdn.roundicons.com/wp-content/uploads/2017/09/Lego-freebie-icon.png"></tm-listitem>
			<view class="flex-between">
				<tm-button  icon="icon-paperplane-fill" theme="bg-gradient-blue-accent">飞信</tm-button>
				<tm-button  :icon-size="60" icon="https://cdn.roundicons.com/wp-content/uploads/2017/09/Candles-freebie-icon.png" theme="white">飞信</tm-button>
			</view>
		</tm-sheet>
	</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script>
	export default {
		data() {
			return {
			}
		},
		methods: {

		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

👉props属性表

属性名称类型可选值默认值说明
colorString任意主题色名称primary图标主题颜色名
nameString图标名称''图标名称，注意不带前缀。也可是网格或者本地图片地址
prefxStringiconfonticonfont图标的前缀
sizeNumber任意整数28图标大小 单位是upx
denseBooleantrue/falsefalse是否去除边距

👉事件

事件名称返回参数返参类型说明
@click--图标点击事件。

👉更新日志

2021年8月20日14:8:5 初始版本。

tmzdy 于 2022/12/7 编辑 报错？ | 评论？