前言

一个按钮里放了两个icon图标，点击按钮改变icon图标。

本次使用的Heroicons图标库

点击前效果图如下：

点击后效果图：

一、引入heroicons图标

import {HomeIcon, UserIcon, CubeIcon, MapIcon, OfficeBuildingIcon } from '@heroicons/vue/outline';//引入细线iconimport {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>