大家在使用Vue-Cli的时候,想要使用SVG,svg-sprite-loader绝对是个火热的插件,它用相对优雅的方式帮我们解决了引入 SVG 文件的问题。 到了Vite上,由于不再使用webpack进行打包,svg-sprite-loader不再可用,svg的插件又回到了百花齐放的阶段,其中最火的vite-sprite-loader,但是他不支持 Sprite 技术(这里要提一下,关于...
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 2. 封装svg组件 2. 创建 icons 文件夹,存在svg图片 3. 创建 svg-builder.js 文件 4. v...
步骤如下：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 下我并未找到合适的解决方案,只有雪碧图没有动态导入。于是乎我就想自己做一个。
Vue + Ts + Vite中使用svg 在项目目录的src下新建icons文件夹,svg目录下存放svg图片 编写index.ts文件 // 2.1 首先安装用到的插件npm install svg-sprite-loader --save-dev npm install fs// 2.2 index.ts文件如下import{ readFileSync, readdirSync }from"fs";letidPerfix ="";constsvgTitle =/<svg([^...
在webpack 中加载 svg 资源可以使用svg-sprite-loader,而 vite 中可以使用插件vite-plugin-svg-icons。 3.1 安装开发依赖 首先安装vite-plugin-svg-icons为开发依赖: yarn add vite-plugin-svg-icons -D 3.2 配置 vite 在vite.config.ts中配置该插件: ...
1. svg-sprite-loader 先安装svg-sprite-loader 代码语言:shell 复制 npmi svg-sprite-loader-D 在vue.config.js中添加loader配置,以前webpack配置都写在webpack.config.js中,后来改了。 这里的include中指定svg的目录,test是目标svg的正则表达式,symbolId是加载的svg图标的新命名,在原本svg的name之前,加了一个...
npm install svg-sprite-loader -D # via yarn yarn add svg-sprite-loader -D stept3: 创建svgIcon.vue文件 <template> <svg :class="svgClass" v-bind="$attrs" :style="{color: color}"> <use :xlink:href="iconName"/> </svg> </template> ...