【Nuxt】在 Nuxt3 中使用 nuxt-icons 实现 icon svg 的动态变色效果

效果展示

nuxt-icons 安装

自己去看官网文档就行
nuxt-icons

配置

把 svg 放到 icons 目录下

使用

要想实现变色效果，需要我们把 svg 内部的需要动态变色的地方修改为 fill="currentColor" 才能实现动态修改颜色的效果

然后在代码中使用，使用组件传参就行，改颜色需要用到深度选择器，vue3 就是 :deep

完整demo代码

<script setup lang="ts"></script>

<template