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

已于 2024-02-23 15:43:33 修改
阅读量1.7k 收藏 5
点赞数 3
分类专栏： Vue.js 文章标签： nuxt3 svg变色 svg
于 2024-02-23 15:09:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IAIPython/article/details/136256514
版权

效果展示

在这里插入图片描述

nuxt-icons 安装

自己去看官网文档就行
nuxt-icons
在这里插入图片描述

配置

在这里插入图片描述在这里插入图片描述

把 svg 放到 icons 目录下

在这里插入图片描述

使用

要想实现变色效果，需要我们把 svg 内部的需要动态变色的地方修改为 fill="currentColor" 才能实现动态修改颜色的效果
在这里插入图片描述
然后在代码中使用，使用组件传参就行，改颜色需要用到深度选择器，vue3 就是 :deep
在这里插入图片描述

完整demo代码

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

<
最低0.47元/天 解锁文章
利用自定义组件实现svg自由——vite-plugin-svg-icons
weixin_43714543的博客
06-20 3012
利用自定义组件实现svg自由——vite-plugin-svg-icons
icons:一些适合nuxt项目的SVG图标
04-12
将@blokwise/icons依赖项添加到您的项目中： yarn add @blokwise/icons npm install @blokwise/icons 然后，添加@blokwise/icons到modules的部分nuxt.config.js ： { modules: [ [ &#39;@blokwise/icons&#39;, { ...
Nuxt使用iconfont矢量图标
weixin_30778805的博客
09-20 476
　　Nuxt可以使用各种前端UI框架，这些框架一般都自带的有一些icon图标可供用户使用，但是一般项目开发的时候，UI框架自带的icon是不能满足实际项目需求的，这个时候我们可以自己找一些图片放到本地项目里，然后引用这个图片，但是总感觉这样不太好。 这个时候我们可以使用Iconfont-阿里巴巴矢量图标库 下面就讲一讲怎么在nuxt中使用iconfont 一、普通...
nuxt-svg-sprite-loader:用于svg-sprite-loader的Nuxt.js模块
03-17
nuxt-svg-sprite-loader 用于svg-sprite-loader的Nuxt.js模块。 安装 # npm $ npm install nuxt-svg-sprite-loader # Yarn $ yarn add nuxt-svg-sprite-loader 用法 该模块添加到您Nuxt.js模块列表nuxt.config.js ： export default { ... modules : [ &#39;nuxt-svg-sprite-loader&#39; ] } 在页面中使用SVG： < template> < svg >< use xss=removed></ use></ svg > </ template> < script > import Logo from &#39; @/
Nuxt：Nuxt3框架中如何使用SVG图片【超详细！】
最新发布
qq_44776454的博客
03-05 772
Nuxt：Nuxt3框架中如何使用SVG图片【超详细！】
关于Nuxt3使用svg
qq_37225650的博客
05-13 650
3、plugin引入 virtual:svg-icons-register，然后nuxt plugin配一下就行。自定义不管是大小颜色都比官方module那个好用太多。安装vite-plugin-svg-icons。官方的不好用，还是用vite自己自定义的好用。1、自定义svg组件。
Nuxt3中怎么使用SVG
weixin_47948509的博客
05-14 1506
Nuxt3项目中SVG图标的用法
在 Nuxt3 中使用 Font Awesome 图标
ice breaker's blog
07-11 1042
Font Awesome 是世界上最流行和最易用的图标库，让我们在 Nuxt3 中使用它吧。首先我们安装 Font Awesome 图标库核心： 图标库 接着我们安装所有的免费的图标： 当然，如果你使用的是 版本的 ，想使用完整的图标库，可以见此处。由于 Nuxt3 是 vue3 版本语法，所以我们安装时必须使用: 到此所有的 Font Awesome 包都安装完成了，接下来我们开始在 Nuxt3 中使用。在 应用的项目的 目录内，添加一个文件 写入内容: 保存后重新启动，这样这个 会被自动的注册到
【nuxt3】项目中使用svg 7步带你了解
枫ゞ的博客
12-22 3234
【nuxt3】项目中使用svg 7步带你了解 全文详细讲解nuxt3使用svg的各种步骤
nuxt-svg-sprite-module:在Nuxt应用程序中内嵌svg精灵的快速而肮脏的方法
05-14
nuxt-svg-sprite-module 在Nuxt应用程序中内嵌svg精灵的一种快速而肮脏的方法。 安装 $ yarn add nuxt-svg-sprite-module $ npm install nuxt-svg-sprite-module --save 配置 在nuxt.config.js modules: [ [ ...
nuxt vue中可以使用 vite-plugin-svg-icons插件吗
06-30
Vite-Plugin-Svg-Icons是一个用于Vite（一个现代的前端构建工具）的插件，它帮助你在Vue应用中轻松地管理和使用SVG图标。Nuxt.js和Vue都是构建可扩展单页应用程序的框架，虽然Nuxt有自己的模块系统和构建流程，但...
nuxt-svg-loader:SVG作为组件，也在服务器端！
05-13
Nuxt SVG加载程序-SVG作为组件，也在服务器端！ 特征 完全支持SVG作为组件。 像Vue SFC一样导入它们 使用Vue绑定，就像处理普通组件一样 建立在之上 Nuxt 2（仅Nuxt 2）支持 经过全面测试！ 演示版 可以通过获得现场演示。 设置 使用yarn或npm将nuxt-svg-loader添加为依赖项到您的项目 添加nuxt-svg-loader到modules的部分nuxt.config.js { modules : [ &#39;nuxt-svg-loader&#39; , ] } 现在，您可以像常规Vue组件一样使用svg文件 您还可以通过在文件路径末尾添加?inline来使用内联svg <template> <nav> <a> <VueLogo>
探索 Nuxt Icon：赋予你的 Nuxt 应用无限图标可能
gitblog_00084的博客
06-20 747
探索 Nuxt Icon：赋予你的 Nuxt 应用无限图标可能 去发现同类优质开源项目:https://gitcode.com/ 在构建现代化的前端应用时，图标库是必不可少的一部分，它为界面提供视觉吸引力和易用性。今天，我们向您推荐一个强大的 Nuxt.js 模块——Nuxt Icon，它基于 Iconify，提供了超过 200,000 个预处理的矢量图标供您直接使用。 项目介绍 Nuxt Ico...
Nuxt Icon 模块使用教程
gitblog_00075的博客
08-19 968
Nuxt Icon 模块使用教程 项目地址:https://gitcode.com/gh_mirrors/ico/icon 项目介绍 Nuxt Icon 是一个为 Nuxt 3 设计的模块，旨在简化在项目中使用图标的过程。它支持从多种图标库中导入图标，并提供了便捷的方式在项目中使用这些图标。该模块充分利用了 Nuxt 3 的特性，使得图标的管理和使用变得更加高效和灵活。 项目快速启动 安装 首先，...
探索图标新境界：Nuxt Icon——你的图标解决方案
gitblog_00070的博客
08-19 851
探索图标新境界：Nuxt Icon——你的图标解决方案 iconThe component, supporting Iconify, Emojis and custom components.项目地址:https://gitcode.com/gh_mirrors/ico/icon 在数字化产品的世界中，图标扮演着至关重要的角色。它们不仅美化界面，还能高效传达复杂信息。而今，随着【Nuxt Ic...
nuxt3+vue3 SVG组件封装
Andydahua的博客
07-14 771
在这里插入图片描述](https://img-blog.csdnimg.cn/68e0343808924b94afa9af274f793e9d.png。
Nuxt 项目引入 iconfont 小图标详解
青颜的天空的博客
08-06 3257
Nuxt.js 项目引入 iconfont 小图标详细步骤
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值