到了Vite上,由于不再使用webpack进行打包,svg-sprite-loader不再可用,svg的插件又回到了百花齐放的阶段,其中最火的vite-sprite-loader,但是他不支持 Sprite 技术(这里要提一下,关于 Sprite 可以看未来必热:SVG Sprite技术介绍),对于开发UI库或公用上不太友好。 现有我开发UI库的要全面去webpack,所以在 SVG 碰到...
1.安装svg-sprite-loader,这里使用的是6.0.11版本 npm install svg-sprite-loader 2.项目的svg图片存放在src/icons/svg下,我们在这里创建两个文件svgIcon.ts和svgIcon.vue(在哪创建和文件名字并没有任何要求) 3.在svgIcon.ts中加入下列代码(如果报错找不到fs模块请跳转到文章末尾 附录-导入@type/node) import...
一:需要引入的依赖和版本 npm install svg-sprite-loader npm install fs "svg-sprite-loader": "^6.0.9", 二:代码 1.创建svgBuilder.js import { readFileSync, readdirSync } from 'fs' let idPerfix = '' const svgTitle = /<svg([^>+].*?)>/ const clearHeightWidth = /(width|height)="([...
步骤如下：1. 安装svg-sprite-loader，版本为6.0.11。npm install svg-sprite-loader 2. 将svg图片存放在src/icons/svg目录下，在此处创建两个文件：svgIcon.ts和svgIcon.vue（创建位置和文件名无特殊要求）。3. 在svgIcon.ts中加入以下代码（如果出现fs模块找不到的错误，请参考文章末尾附录-导入...
我的 vue 项目一般都使用动态导入的 svg-sprite,意思是:既要是个雪碧图,用 <use> 标签复用;而且页面的 svg 应该是动态按需加载的。我觉得这样性能比较好,在 vue2 中实现比较简单,但是 vue3+vite 下我并未找到合适的解决方案,只有雪碧图没有动态导入。于是乎我就想自己做一个。
在项目目录的src下新建icons文件夹,svg目录下存放svg图片 编写index.ts文件 // 2.1 首先安装用到的插件 npm install svg-sprite-loader --save-dev npm install fs // 2.2 index.ts文件如下 import {
使用SVG Sprite:将多个SVG图标合并成一个SVG Sprite文件,然后通过<use>元素引用。这可以减少HTTP请求的数量,但可能需要额外的构建步骤。 使用第三方库:例如svg-sprite-loader或vue-svg-loader等,这些库可以帮助你更方便地管理和优化SVG图标的加载。不过,在使用这些库时,你可能需要调整Vite的配置以支持它们。
在需要使用svg的地方引入<SvgIcon />组件。3这种思路有点类似于vue2中的svg-sprite-loader,只是没有注册在全局。 完结。 同步更新到自己的语雀https://www.yuque.com/dirackeeko/blog/ebklt8wnof5ivs93前端typescriptreactsvg 赞收藏 分享 阅读5.7k发布于 2023-05-05 Dirac...
1. 安装 svg-sprite-loader 2. 封装svg组件 2. 创建 icons 文件夹,存在svg图片 3. 创建 svg-builder.js 文件 4. v...
1. 首先引入svg插件 1 2 3 yarn add svg-sprite-loader -D // 或者 npm install svg-sprite-loader -D 2. 创建文件 1、创建icons文件夹,里面创建index.ts(svgicon的js逻辑),svg文件夹(svg图标存放的地址) 》》index.ts 1 2 3 4 5 6 7