vue3中引入、封装和使用svg矢量图的实现示例

已于 2024-09-01 16:16:53 修改
阅读量2.6k 收藏 84
点赞数 63
分类专栏： vue2/3 从基础到起飞 前端常见问题与避坑指南 HTML5与CSS3 文章标签： 前端 javascript vue.js php vue 图形渲染 图像处理
于 2024-07-18 09:02:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78542842/article/details/140494317
版权

🚀 个人简介：某大型国企资深软件开发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主、华为云云享专家，分享前端后端相关技术与工作常见问题~

💟 作    者：码喽的自我修养❣️
📝 专    栏：vue2/3 从基础到起飞

🌈 若有帮助，还请 关注➕点赞➕收藏  ，不行的话我再努努力💪💪💪

🌈🌈文章目录

一、SVG简介

1.  什么是SVG矢量图

2.  SVG矢量图的优缺点

二、引入和封装svg矢量图

1、安装SVG依赖插件

2、在vite.config.ts 中配置插件

3、main.ts入口文件导入

4、使用svg

4.1 在src/assets/icons文件夹下引入svg矢量图

4.2 在src/components目录下创建一个SvgIcon组件

4.3 封装成全局组件，在src文件夹下创建plugin/index.ts

4.4 在main.ts中引入plugin/index.ts文件

4.5 在页面使用

了解本专栏 订阅专栏 解锁全文 超级会员免费看
码喽的自我修养
关注
专栏目录
订阅专栏
vue3自动引入 svg
ranshakalove的博客
03-06 916
vue3 自动引入svg
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
10-15
Vue CLI 3 是一款强大的 Vue.js 项目脚手架工具，它简化了项目的初始化和配置。在开发过程中，为了优化项目资源，有时我们会选择将 SVG ...希望这篇文章能帮助你更好地理解和应用 Vue CLI 3 中的 SVG 图标封装技术。
vue3项目引入svg-基于vuecli-webpack
flying_chick的博客
06-18 1987
vue项目引入svg图片
vue3+vite 引用svg图标
最新发布
foreverhui的博客
10-11 308
首先通过npm安装所需依赖，然后在vite.config.ts中配置插件。接着封装svg-icon组件，并在main.ts中全局注册。最后，在.vue文件中使用该组件。注意解决svg-icon颜色无法修改的问题，需确保SVG图片中移除fill属性。1、安装依赖插件vite-plugin-svg-icons和fast-glob。2、在vite.config.ts文件修改配置。4、在main.ts文件全局注册。3、创建SvgIcon.vue。
Vue3中使用svg
weixin_44442366的博客
01-17 5364
Vue3中使用svg 1）安装插件 npm install svg-sprite-loader --save-dev 2）封装svgIcon组件 在componemts里新建svgIcon文件夹，新建index.vue，封装成组件 3）在src下新建icons文件夹，此文件夹下新建svg文件夹。其中svg文件夹存放所有的svg文件 4）在icons下新建index.js，由于配置svg import Vue from ‘vue’ import SvgIcon
vue3使用svg（无废话版）
m0_56104994的博客
08-02 761
vue3使用svg
vue3中使用svg图标
weixin_62216253的博客
04-22 1554
vue3中使用svg
小白详解Vue3项目中怎么引入 SVG 图标
qq_29701691的博客
09-01 5364
既然是页面，肯定离不开一些图标 icon ，所以肯定要去最全的 阿里图标库 来寻找。创建好项目后，我们进入到 阿里的 素材库 里面找一些后续需要的图标，进行解压，删除不必要的东西，只留下 iconfont.js 文件即可。那我们只能将项目里的图标，选择 Symbol 并 下载至本地。这里讲解下如何将 阿里图标库 里面的东西，放到我们的页面上。进入页面，找到 资源管理 下面的 我的项目，并创建项目。引入 阿里的 SVG 图标到项目中。将 购物车 里面的图标添加到项目中。并添加到 购物车 中，...
vue中使用gojs/jointjs的示例代码
10-18
从给定的文件信息来看，我们需要了解的知识点包括如何在Vue项目中使用GoJS和jointjs两种JavaScript库，以及如何实现交互式的流程图绘制。接下来我将详细介绍这些内容。 ### Vue中使用GoJS GoJS是一个功能强大的...
在 React、Vue项目中使用SVG的方法
11-30
在现代Web开发中，SVG（Scalable Vector Graphics）已经成为创建可缩放矢量图形的首选方式，尤其在React和Vue等JavaScript框架中。SVG的优势在于它的代码结构使得图标能够轻松地进行样式调整，比如改变颜色、形状和...
>Vue组件化，封装SVG图标 支持uniapp等vue版本 # 前言 # 设计思路 **创建SVG组件：** 首先创建一
07-18
### Vue组件化，封装SVG图标 支持uniapp等vue版本 #### 前言与设计思路 在现代Web开发中，图标是非常重要的视觉元素之一。传统的图标使用方法包括使用图像文件（如PNG或JPEG）或者字体图标。然而，这些方法都有...
Vue3项目使用SVG图标
seapackk的博客
04-11 890
注意： symbolId 的值需要与 vite.config.ts中配置的保持一致。： 在项目运行时就生成所有图标,只需操作一次 dom。vite-plugin-svg-icons 的优点。创建一个SPIcon组件，封装svg。： 内置缓存,仅当文件被修改时才会重新生成。在vite.config.ts中进行配置。最终symbolId的值格式为。在main.ts文件中引入。
vue3使用SVG图标
qq_52377225的博客
02-02 685
vue svg图标使用
vue3使用svg图标 多种方式
一步一个脚印，踏实努力，向着目标前进
08-15 6489
在Vue 3中，可以使用多种方式来使用SVG图标。
vue3使用svg图标多种方式
热门推荐
weixin_45441173的博客
01-16 1万+
vue3使用svg图标多种方式
vue3项目svg使用
qq_44278386的博客
03-24 1455
在使用该图片的地方使用如下代码，name属性为保存的svg图片的名字。在icon font官网选择想要得图片下载。文件夹下，如fanhui.svg。，下载成SVG格式。
在Vue3项目中使用svg-sprite-loader
qq_52569656的博客
10-18 9476
本文基于Vue3项目介绍svg-sprite-loader在项目中的使用方式,手把手教你封装一个SvgIcon全局组件，提高svg图标复用性的同时让你的代码看起来更加优雅。
vue3使用svg图标
weixin_56204435的博客
06-26 773
创建svg目录 index.js main.js vue.config.js 使用
vue3 导入svg
吕小小布的博客
10-09 6038
添加依赖 npm install svg-sprite-loader -D # 或 yarn add svg-sprite-loader -D 打开vue.config.js module.exports = { chainWebpack: config => { //svg const svgRule = config.module.rule("svg"); svgRule.uses.clear(); svgRule .test(/\.s.
vue3封装使用svg
05-22
在Vue3中，我们可以使用`<svg>`标签直接嵌入SVG代码。如果需要在多处使用相同的SVG图标，可以将其封装为组件，方便复用。 以下是一个简单的SVG图标组件封装示例： ```vue <template> <svg :width="size" :height="size" viewBox="0 0 24 24"> <path :d="iconPath" /> </svg> </template> <script> export default { props: { iconPath: { type: String, required: true }, size: { type: Number, default: 24 } } } </script> ``` 在父组件中使用该组件时，只需要传入相应的SVG路径即可： ```vue <template> <div> <svg-icon iconPath="/path/to/my/icon.svg" /> </div> </template> <script> import SvgIcon from '@/components/SvgIcon.vue' export default { components: { SvgIcon } } </script> ``` 需要注意的是，SVG图标可能存在路径问题，需要根据实际情况进行调整。同时，在使用SVG图标时，也需要注意SVG文件的大小和性能问题。
评论 95
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码喽的自我修养

您的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值