Vue3+vite 中使用 svg-icon

最新推荐文章于 2024-08-08 08:24:22 发布
最新推荐文章于 2024-08-08 08:24:22 发布
阅读量3.1k 收藏 3
点赞数
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zic_liu/article/details/121924557
版权
本文介绍了在Vue3项目中结合vite如何使用svg-icon，包括全局引入svg图标的方法，以及遇到的文件路径问题的解决过程。在解决过程中，参考了特定的解决方案，并对相关配置文件进行了调整，最终成功实现svg-icon的正常使用。
摘要由CSDN通过智能技术生成

Start

在 Vue3+vite 项目中想要通过全局引入的方式，使用 svg-icon 时，发现不兼容 Vue2 的使用方法，故有了以下的探索：

Solve

一、使用 svg-icon ，并以全局引入，可以参考 vue-element-admin 中的方案，见 Link 1
二、想要在 Vue3 中使用，需要修改：详见 Link 3 中的参考博客；svg-sprite-loader 原修改文件，需查看 Link 2。

Trouble

当使用修改后的 svg-sprite-loader 时，可能会有报错，如下：

ERROR: no such file or directory, open './src/icons/svgstar.svg'
at ...

提示打开文件失败，需要修改下~

  • 当前的问题：node.js 文件读取路径有问题
  • 我的预期是：修改后的 svg-sprite-loader，需要读取到 ./src/icons/svg 目录中的 star.svg 文件

所以我需要修改

最低0.47元/天 解锁文章
许小波啊
关注
Vue3 + Vite 中使用 vite-plugin-svg-icons 插件显示本地 SVG 图标
King Saj
08-21 748
这样配置后，你就可以在 Vue 3 项目中显示本地的 SVG 图标了。请根据具体情况将代码中的路径和图标 id 替换为实际使用的内容。
vue3+vite+ts封装svg组件
Zhang_wang_yun的博客
07-21 636
在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后，页面上加载的不再是图片资源。这对页面性能来说是个很大的提升，而且我们SVG文件比img要小的很多，放在项目中几乎不占用资源。
Vue3+ts+vite项目中使用vite-plugin-svg-icons插件处理svg，vue3项目vite中使用svg
weixin_52465240的博客
04-06 1099
在vite脚手架中配置对svg的处理
vite-plugin-svg-icons:Vite插件可快速创建SVG精灵
03-06
vite-plugin-svg-icons English | 用于生成svg精灵图。 特征 预加载项目运行时会生成所有图标，并且只需要操作一次dom。 高性能的内置缓存，只有在修改文件后才会重新生成。 安装（纱线或npm） 节点版本： > = 12.0.0 版本号： > = 2.0.0 yarn add vite-plugin-svg-icons -D 或者 npm i vite-plugin-svg-icons -D 用法 vite.config.ts中的配置插件 import viteSvgIcons from 'vite-plugin-svg-icons' ; import path from 'path' ; export default ( ) => { return { plugins : [ viteSvgIcons ( {
vite-plugin-svg-icons 教程
最新发布
gitblog_00332的博客
08-08 800
vite-plugin-svg-icons 教程 vite-plugin-svg-iconsVite Plugin for fast creating SVG sprites.项目地址:https://gitcode.com/gh_mirrors/vi/vite-plugin-svg-icons 1. 项目介绍 vite-plugin-svg-icons 是一个适用于 Vite 的插件，用于快速...
vue3 + vite 使用svg-icon
weixin_48519850的博客
03-25 1191
vite-plugin-svg-icons 的使用
【Vue3】Vue3+Vite前端在组件中直接使用svg图标icon(实现设计稿的icon解决方案)
毛毛的博客
11-23 824
看到很多朋友，写的都是vue+webpack，缺少vue3+vite的图标解决方案，此处是一个简单的在vue3+vite的环境下，前端在组件中直接使用svg图标icon，实现设计稿的还原，欢迎来讨论！
vite+vue3.0使用svg图标
JHLIN的博客
04-13 508
vite+vue3.0使用svg详细步骤
【vue3+vite】SvgIcon组件(vite-plugin-svg-icons插件)
MM_520131400的博客
09-13 1477
vite + vue3 + typeScript , 进行封装svgicon组件，所用到插件fast-glob、vite-plugin-svg-icon、unplugin-vue-components 、vite-plugin-vue-setup-extend
vite-svg-loader:Vite 2.x插件可将SVG文件作为Vue组件加载
05-13
Vite SVG装载机 Vite 2.x插件可将SVG文件作为Vue组件加载。 < script setup >...如果在Typescript项目中使用加载程序，则可能会收到类似Type 'string' is not assignable to type 'Compo
Vue3 + Vite+ Element-Plus + TypeScript 搭建系统
weixin_45044818的博客
12-04 1371
一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。创建 variables.scss 变量文件，注意规范变量以 $ 开头 @styles/variables.scss。上面导出的scss全局变量在ts不生效的，需要创建一个以.module.scss 结尾的文件。添加scss @styles/normalize.scss。vite导入variables.scss。
vite-plugin-svg-icon:svg icon 转为组件
04-09
vite-plugin-svg-icon 将 svg icon 转化为 vue 组件 安装 yarn add vite-plugin-svg-icon #or npm install vite-plugin-svg-icon 使用 在 vite 配置加入插件 vite.config.ts import { defineConfig } from 'vite'; import { VueSvgIcon } from 'vite-plugin-svg-icon'; defineConfig({ plugins[VueSvgIcon()] // or plugins[VueSvgIcon({ // 生成组件的类名 className: 'my-icon-class' // default "svg-icon" /**
vue3 + vite 中使用 svg-icon 的图标
文木博客
06-07 735
在 vue 中 使用 svg icon 的不同的方式
vite项目配置svg图标(vite-plugin-svg-icons)
qq_45797421的博客
07-04 378
改颜色的话,打开svg代码找到 fill字段,一般是用来设置颜色的,删除掉即可。(不懂svg代码, 如果说的不对,请指正)3.注意事项:如果你想修改颜色,最好找那种颜色单一的svg图标, 颜色太多的svg改起来麻烦。2.使用, 如果你安装的有element-plus ,可以使用这样的方式来修改大小和颜色。, 可以去里面查看中文文档,里面有详情的教程。
Vue3+vite中使用svg图标
weixin_43506403的博客
10-18 1298
Vue3+vite中使用svg图标
vue3+vite svg图标的使用
a1831511974的博客
11-25 2043
这个基本纯属靠大佬，毕竟不会写插件这边就写写过程。 首先安装svg相应的开发插件 npm install svg-sprite-loader -D 然后我们使用svg按照vue的开发文档上说都是先封装一个svg组件 <script setup lang="ts"> import { computed } from '@vue/reactivity'; const props=defineProps({ name:{ type: String, .
vue3 + vite SvgIcon组件封装
TangAcrab的博客
07-18 698
vue3 + vite 封装SvgIcon组件
Vue3+vite搭建基础架构（9）--- 使用vite-plugin-svg-icons
weixin_48040732的博客
02-19 4767
这里记录下自己在Vue3+vite的项目使用vite-plugin-svg-icons来全局使用svg雪碧图，不使用ts语法，方便以后直接使用。
Vite项目封装SvgIcon组件——vite-plugin-svg-icons
z止于至善的博客
04-12 1144
Preloading All icons are generated when the project is running, and you only need to operate dom once. High performance Built-in cache, it will be regenerated only when the file is modified.
nuxt vue中可以使用 vite-plugin-svg-icons插件吗
06-30
Vite-Plugin-Svg-Icons是一个用于Vite（一个现代的前端构建工具）的插件，它帮助你在Vue应用中轻松地管理和使用SVG图标。Nuxt.js和Vue都是构建可扩展单页应用程序的框架，虽然Nuxt有自己的模块系统和构建流程，但...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值