svg在vue项目中的使用

最新推荐文章于 2024-08-08 08:28:38 发布
最新推荐文章于 2024-08-08 08:28:38 发布
阅读量408 收藏
点赞数
分类专栏： 不定期Bug随手记 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52043522/article/details/125378351
版权
本文详细介绍了如何在Vue项目中通过npm引入svg-sprite-loader，配置vue.config.js，创建SVG图标文件夹并导入，然后在main.js中管理和使用这些SVG文件。一步步教你实现全局组件注册，便于在页面中轻松引用SVG图标。
摘要由CSDN通过智能技术生成

分享下在项目中使用svg文件的过程。

1.下载依赖包

npm i svg-sprite-loader@4.1.3

2.配置vue.config.js

在这里插入图片描述

3.创建src/icons文件夹，将svg文件都存在这里，并在里面的index.js中导入所有svg文件，并注册全局组件。

在这里插入图片描述

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

4.在main.js中直接导入svg配置

在这里插入图片描述

5.在页面中使用svg文件

<svg-icon icon-class="button"/>
ym-13140912
关注
专栏目录
vue-webtopo-svgeditor:纯vue3实现的svg可视化web布局编辑器。主要用于物联网mqtt实时系统图
03-21
vue-webtopo-svgeditor 纯vue3实现的svg可视化web布局编辑器。主要用于物联网mqtt实时系统图 预览地址 如何使用 # 克隆项目 git clone https://github.com/yaolunmao/vue-webtopo-svgeditor.git # 进入项目目录 cd vue-webtopo-svgeditor # 安装依赖 yarn install # 启动服务 yarn serve 操作 点击加载模板进入预览页点击模拟硬件等待两秒钟即可看到动态效果 鼠标左键缩小组件可以可扩展至画布 鼠标双击画布取消替代组件 右侧工具栏调整预设组件样式 键盘↑↓←→可移动引入组件 ctrl + c复制当前替代组件 已删除删除当前出价组件 鼠标滚轮放大缩小最小组件 去做 鼠标框选批量计量 画布绑定mqtt平台 组件旋转 画布比例 编辑器撤销，重做 截图 执照
如何在新项目使用svg-icon组件
weixin_60601708的博客
08-11 177
1.安装依赖 npm i svg-sprite-loader@4.1.3 2.配置 vue.config.js (补充) chainWebpack(config) { config.module .rule('svg') .exclude.add(resolve('src/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .includ...
Vue-WebTopo-SVGEditor 使用教程
最新发布
gitblog_00805的博客
08-08 557
Vue-WebTopo-SVGEditor 使用教程 项目地址:https://gitcode.com/gh_mirrors/vu/vue-webtopo-svgeditor 项目介绍 Vue-WebTopo-SVGEditor 是一个基于 Vue.js 框架开发的 Web 端 SVG 图形编辑器。它提供了丰富的图形绘制和编辑功能，旨在为开发者提供一个易于集成、高度可定制化的 SVG 图形设计解决...
vue项目引入并使用svg格式图标文件
weixin_45966674的博客
03-07 1396
如果您没有SVG的材料 可以去阿里的 iconfont官网中弄 或者 可以直接下载我的资源 地址如下。然后 将vue项目的vue.config.js 在 module.exports中添加如下配置。然后来测试使用 引入这就是一个实验的项目 我就直接将代码写在 src下的App.vue跟组件里啦。在src下的 components 目录下创建组件 svgIcon.vue。在src下的 assets 目录中创建一个目录 叫 icons。App.vue参考代码如下。
vue引入svg
ran_L的博客
07-29 1912
在assets文件夹下创建index.js，用于注册组件。在components下创建SvgIcon.vue。在svg文件夹下存放svg图片。
vue中引用svg，vue引入svg不显示，vue引用svg配置，vue3.0+ts如何配置svg
qq1114565087的博客
06-22 4446
注意： 如果按照下面配置正确发现svg依然无法显示可能s'v'g-sprite-loader的版本过高，重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev, 就可能正确显示svg。(vue3.0应该是没有这个问题的) 还有就是可能是创建的icons不在src根目录（2.x最开始我尝试在assets中创建文件来装svg图标，但是并没有显示，换到根目录就正常了,具体应该是那里还是有点问题，3.0正常，按道理讲应该是放到assets中也是可以的以后空了研究暂时这样
在vue项目中优雅的使用SVG的方法实例详解
10-17
在`main.js`文件中执行`import '@/utils/svgConfig'`之后，就可以在项目中直接使用如下语法来调用SVG图标了： ```html <svg-icon icon-class="users"/> ``` 最后，为了提高SVG图标的可管理性和易用性，可以创建一...
vue项目中使用Svg的方法
10-17
本文介绍了在Vue项目中使用SVG图标的方法，并通过在vue-cli3环境下创建一个`SvgIcon`组件来实现SVG的可复用性。同时，我们通过动态引入SVG文件和修改webpack loader规则来简化SVG文件的管理和使用流程。这种方法不仅...
在 React、Vue项目中使用SVG的方法
08-28
在 React 和 Vue 项目中使用 SVG 的方法是非常重要的，特别是在现代的扁平化设计网站中，经常会包含许多简单而清晰的小图标。这些小图标可以通过 SVG 使用代码来画出来，并且可以修改这些图标的颜色、形状、大小等。...
在 Vue 中使用 svg
热门推荐
MFWSCQ的博客
03-08 2万+
在vue中使用 svg 有两种方式： 1、使用本地的svg 2、把本地的 svg 上传到 iconfont中，统一去色生成 symbol 格式的文件引入 一、要使用 svg 先安装对应的 loader npm install svg-sprite-loader 然后在 vue.config.js 里面对 .svg 结尾的文件使用对应的 loader module.exports = { /* svg 相关配置 */ chainWebpack: config => {
如何在VUE项目中使用svg图标
m0_57524265的博客
07-01 1万+
本文手把手带你一起体验SVG图标的使用，解决大家使用图标的苦恼！
svgedit, 在你的浏览器上，功能强大的SVG编辑器.zip
10-10
svgedit, 在你的浏览器上，功能强大的SVG编辑器 svg编辑SVG编辑是一个快速。基于web的javascript驱动的SVG绘图编辑器，可以在任何现代浏览器中工作。 尝试在这里编辑 svg( 也可以作为一个下载插件，在发布 ) 。最新消息2017-07添加到 Packa
svgedit：适用于您的浏览器的强大SVG-Editor
02-03
SVG编辑 （另请参见 ） （注意： /editor/images的许可来源可能并不十分清楚，即使其中某些图像的来源来自 。如果您无法确定这些图片的来源或发现它们受保护性许可，我们希望替换这些图片。如果您知道原始条款，或者可以帮助创建SVG替换图片，请在： 。） SVG-edit是一种快速的，基于Web的，由JavaScript驱动的SVG绘图编辑器，可在任何现代浏览器中使用。 把招工广告 虽然我们已为SVG-edit发布了一些最新版本，以进行错误修复，重构和文档制作，以使代码库更易于维护，但负责大部分绘图功能的核心开发人员已不再参与该项目，因此我们希望其他熟悉的人与SVG一起加入该项目。 演示版 我们还在构建了systemJS版本 您还可以获取特定URL。 感谢netlify，您可以测试以下版本： 最新的主版本（V6）： : V7预览版（正在开发中）： : 安装 快速安装 克隆或复制存储库内容（至少是editor目录）。 请注意，您不应进行递归的Git克隆（即，使用--recursive或--recurse-submodules标志），因为您将获得各种过去的版本
svg edit 编辑器
10-19
svg edit 是javascript开发的，简单的图形操作已经开发完成了，还有部分功能未完善，希望大家多提提宝贵意见。
vue-svg-editor
05-13
SCADA编辑器 外观图可视化编辑器 构建设置 # install dependencies npm install # serve with hot reload at localhost:8087 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report
vue项目使用svg文件
qq_30167299的博客
06-08 1万+
vue项目使用svg文件，本地svg文件导入
vue中使用svg图像
PleaseBeStrong的博客
06-01 3369
SVG（可缩放矢量图形）是一种图像格式，它以XML文档的形式存在，用以描述图像中的形状、线条、文本和颜色等元素。大设网（原AI大作）是基于Stable Diffusion的免费ai绘画网站，为ai作画爱好者提供一键生成高清精绘大图、sdxl模型保姆级教程、AI提示词工具。在开发过程中，可以考虑先生成图片（png或者jpg等格式）然后再将其转换为svg，这里推荐个我最近使用的转换网站，对于新用户有免费的转换点可以转换至少10次，当然有更好的网站可以分享到评论区。大设- AI智能绘画平台|设计师创意绘画工具。
vue中如何使用svg
weixin_47909202的博客
02-19 1万+
1.安装svg使用依赖包 npm install svg-sprite-loader 2.配置vue.config.js chainWebpack(config) { config.module .rule('svg') .exclude.add(resolve('src/icons')) //注意svg的存储地址 .end() config.module .rule('icons') .test(/\.svg$
Vue-WebTopo-SVGEditor：下一代SVG图形编辑器的创新实践
gitblog_00043的博客
03-27 1249
Vue-WebTopo-SVGEditor：下一代SVG图形编辑器的创新实践 项目地址:https://gitcode.com/gh_mirrors/vu/vue-webtopo-svgeditor 项目简介 是一个基于 Vue.js 框架开发的Web端SVG图形编辑器，它提供了丰富的图形绘制和编辑功能，旨在为开发者提供一个易于集成、高度可定制化的SVG图形设计解决方案。无论是网络拓扑图、流程图还...
Vue项目中的SVG图标使用策略
通过这种方式，项目中的SVG图标管理变得简洁且高效，使得在vue-cli3构建的Vue项目中使用SVG图标变得更为便捷。开发者只需要将SVG文件放入`icons/svg`目录，然后在需要的地方使用全局注册的`SvgIcon`组件即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值