fs-uni-template/components/fs-icon/fs-icon.vue

<template>
	<view
		:class="[type, colorType, source === 'inner' ? 'fsfont' : 'iconfont']"
		:style="style"
		@click="handleClick"
	></view>
</template>

<script>
/**
 * 图标组件
 * @description 图标组件
 * @property {String} type 图标类型
 * @property {String} size 图标大小
 * @property {String} source = [inner | outer] 来源
 * @property {String} rotate 旋转
 * @property {String} color 图标颜色
 * @property {String} colorType = [primary | danger | warning | info | success | gray] 图标颜色类型
 * @property {String} link 跳转地址
 * @property {String} linkType 跳转类型
 */
export default {
	name: 'fs-icon'
}
</script>

<script setup>
import { computed } from 'vue'

const props = defineProps({
	type: String,
	size: {
		type: String,
		default: '36rpx'
	},
	color: String,
	colorType: {
		type: String,
		validator(value) {
			return ['primary', 'success', 'info', 'warning', 'danger', 'gray'].includes(value)
		}
	},
	source: {
		type: String,
		default: 'inner'
	},
	link: String,
	linkType: {
		type: String,
		default: 'navigateTo'
	},
	rotate: String
})

const emits = defineEmits(['click'])

const style = computed(() => {
	let style = `font-size: ${props.size};`

	if (props.color) {
		style += `color: ${props.color};`
	}
	if (props.rotate) {
		style += `transform: rotate(${props.rotate}deg);`
	}
	return style
})

const handleClick = () => {
	if (props.link) {
		uni[props.linkType]({
			url: props.link
		})
	}
	emits('click')
}
</script>

<style lang="scss" scoped>
@import '../../common/iconfont.css';
@import './icon.css';

.fsfont,
.iconfont {
	display: inline-block;
	vertical-align: middle;
}
</style>