前言

一个按钮里放了两个icon图标，点击按钮改变icon图标。
本次使用的Heroicons图标库
点击前效果图如下：

点击后效果图：

一、引入heroicons图标

import { HomeIcon, UserIcon, CubeIcon, MapIcon, OfficeBuildingIcon } from '@heroicons/vue/outline';//引入细线icon
import { HomeIcon as HomeIconB, UserIcon as UserIconB, OfficeBuildingIcon as OfficeBuildingIconB, MapIcon as MapIconB, CubeIcon as CubeIconB } from '@heroicons/vue/solid'//引入粗线icon，避免粗细icon冲突，对icon重命名

二、具体实现代码

<router-link @click="openButton('home')" to="/index">
	<HomeIcon v-if="icon != 'home'" class="w-6" />
	<HomeIconB v-if="icon == 'home'" class="iconM" />
	<div :class="{ activeFont: icon == 'home' }">社区</div>
</router-link>
<script lang="ts">
export default {
	data() {
		return {
			icon: 'home',
		};
	},
	methods: {
		openButton(iconV) {
			this.icon = iconV;
		},
	},
};
</script>