vite+v3项目配置svg

已于 2023-10-26 11:33:24 修改
阅读量444 收藏 2
点赞数
分类专栏： vite插件 SVG图标 文章标签： 前端 前端框架
于 2023-10-26 11:31:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40098459/article/details/134050335
版权
本文详细介绍了如何在Vite项目中使用SVG图标，包括创建SVG文件夹、安装相关插件、配置vite.config.js、创建公共组件以及注意事项，着重强调了SVG相对于font图标的优势和使用过程中的技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最低0.47元/天 解锁文章
Vue3 - Vite 配置SVG
weixin_65251013的博客
03-21 689
中引入SvgIcon.vue组件，全局注册后在需要使用SvgIcon组件的地方将无需再引入。或想可以改变width与height进行配置。App.vue 示例。
从0搭建vite-vue3-ts项目框架：配置less+svg+pinia+vant+axios
on1yLX的博客
08-09 1180
postcss-px-to-viewport-8-plugin：postcss-px-to-viewport-8-plugin 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。创建一个types/index.d.ts，用于处理包括postcss-px-to-viewport-8-plugin一类的没有声明文件的依赖。然后就是test下随便创建一个路由，对应的，views下创建相应的vue文件，App.vue给上router-view。
vite项目配置svg图标(vite-plugin-svg-icons)
qq_45797421的博客
07-04 613
改颜色的话,打开svg代码找到 fill字段,一般是用来设置颜色的,删除掉即可。(不懂svg代码, 如果说的不对,请指正)3.注意事项:如果你想修改颜色,最好找那种颜色单一的svg图标, 颜色太多的svg改起来麻烦。2.使用, 如果你安装的有element-plus ,可以使用这样的方式来修改大小和颜色。, 可以去里面查看中文文档,里面有详情的教程。
Vue3+vite项目 引入svg图标并使用（封装svg组件）
最新发布
蓝胖子的博客
03-26 966
Vue3+vite项目 引入svg图标并使用（封装svg组件）
vite-svg-loader:Vite 2.x插件可将SVG文件作为Vue组件加载
05-13
Vite SVG装载机 Vite 2.x插件可将SVG文件作为Vue组件加载。 < template> < MyIcon> </ template> < script setup > import MyIcon from &#39; ./my-icon.svg &#39; </ script > 安装 npm install vite-svg-loader --save-dev 设置 vite.config.js import svgLoader from &#39;vite-svg-loader&#39; export default { plugins : [ vue ( ) , svgLoader ( ) ] } 与TypeScript一起使用 如果在Typescript项目中使用加载程序，则可能会收到类似Type &#39;string&#39; is not assignable to type &#39;Compo
vite中如何使用svg
qq_52373373的博客
06-03 406
vite中如何使用svg，以及指定某个目录下面的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 &#39;vite-plugin-svg-icons&#39; ; import path from &#39;path&#39; ; export default ( ) => { return { plugins : [ viteSvgIcons ( {
【从入门到提桶】vue3.2 + vite + vant + pinia + ts 移动端 h5 项目实践
xxxzzzqqq_的博客
03-15 2976
预览图片旋转就讲完了。不过，扩展名里加 .vue 的话会报错，一般来说 .vue 文件编译之后会是 js，但是 .vue 里面如果包含了样式，会单独提取出来作为一个虚拟的文件，通过查询参数 type=style 来读取，这里以 babel 来转译样式文件当然报错。别急，你以为就这样完事了吗，并没有。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（1）
TJ1532635942的博客
08-23 4877
本文编写的目的是为了基于vite、vue3、ts搭建开箱即用的前端应用框架模板，会实现axios、vue-router和pinia的封装和基本使用。
vue3+vite项目中使用svgIcon
coding...
10-15 717
如何在vue2+webpack项目中使用svgIcon？这篇文章主要介绍如何在vue3项目中优雅的使用图标1、通过插件封装SvgIcon组件2、配置3、配置如果你使用的Typescript, 可以在配置文件中添加。
九、vue3+vite项目中配置SVG图标
blue_121的博客
07-10 2169
在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后，页面上加载的不再是图片资源,这对页面性能来说是个很大的提升，而且我们SVG文件比img要小的很多，放在项目中几乎不占用资源。
如何使用vite-svg-loader
02-23
如何使用vite-svg-loader
【Vite】SVG 资源使用详解
lph159的博客
09-22 1739
可缩放：SVG 图像在不同屏幕尺寸和分辨率下都可以保持清晰，无论是移动设备还是高分辨率显示器。体积小：相比传统的 PNG、JPEG 等位图格式，SVG 文件通常更小，加载速度更快，且支持压缩。样式灵活：SVG 支持 CSS 和 JavaScript，可以动态更改其样式和交互行为，这使得 SVG 特别适用于图标、动画和数据可视化等场景。在 Vite 项目中，SVG 是一种极具优势的图像格式，其灵活的使用方式和广泛的应用场景，使得它在现代 Web 开发中占据重要地位。
vite中加载使用svg
qq_43548590的博客
12-27 8063
vite中加载使用svg使用vite-plugin-svg-icons插件安装 (yarn or npm)添加配置创建svg组件全局导入页面中使用 使用vite-plugin-svg-icons插件 安装 (yarn or npm) yarn add vite-plugin-svg-icons -D or npm i vite-plugin-svg-icons -D 添加配置 在vite.config.js中配置插件 在这里插入代码片import viteSvgIcons from 'vite-plugi
【Vite搭建Vue3项目】如何使用自定义的svg
qq_63691275的博客
07-15 2250
当用 vite 构建 vue3 项目的时候，咱可以使用 Element-plus 为我们提供的图标，但是它是一个个标签，当标签需要动态展示的话它就不是好的选择了（比如不同的管理对应不同的图标，这个图标是在后端数据库中定义了的，那根据数据库所存的图标名进行动态呈现此时的Element-plus是无法满足的）。这个时候就需要用到下面的自定义svg
通过vite-plugin-svg-icons 使用SVG图片
weixin_42393497的博客
10-28 419
五、新建svg封装组件，路径参考：src\components\svg-icon\index.vue。一、安装 vite-plugin-svg-icons。四、在vite.config.js中配置。二、在main.js引入。三、配置SVG图片文件夹。在main.js中加入。
vue3+vite：封装Svg组件
CYL_2021的博客
01-20 4673
vite-plugin-svg-icons 是一个 Vite 插件，用于在 Vite 2 项目中方便地使用 SVG 图标。它可以自动将 SVG 图标文件转换为 Vue 组件，并且提供了一些配置选项来自定义生成的组件。
详细讲一下在 Vite 项目中如何使用 SVG 图标(干货满满)
m0_73574455的博客
12-30 994
首先需要安装必要的依赖。1. 创建图标管理器。
vite学习教程05、vite+vue2构建本地 SVG 图标
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1614
本文详细介绍了在Vite项目中构建本地SVG图标的详细步骤。首先，通过安装`vite-plugin-svg-icons`插件来处理SVG资源。接着，在`vite.config.js`中配置插件，并创建了`.vite`目录下的插件封装脚本。文章还解决了安装过程中可能出现的`fast-glob`包缺失的问题，并在项目中演示了如何直接在Vue应用中使用SVG图标以及如何封装Vue组件来使用SVG图标。
Vue3 + Vite + TS 环境配置全攻略
以下是详细搭建vue3+vite+ts环境的步骤： 1. **创建项目目录**： 首先，你需要在计算机上选择一个合适的位置创建一个新的项目目录。通过命令行工具（如CMD或终端），进入这个目录。 2. **初始化Vite项目**： 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值