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)="([^>+].*?)"/g const ...
url&preserve-line-width&set-current-color";// explicitly disable any parameter by setting it to false. This takes precedence over config.importinitialLineWidthImageUrlfrom"./path/to/image.svg?url&preserve-line-width=false"; Optional, but highly recommended. Configure loader, so you can import ...
stept2: 安装 svg-sprite-loader 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> import { define...
vite-svg-loader的出现正是为了解决这些问题。 vite-svg-loader可以将SVG图片转换为base64编码的字符串,并且自动将SVG图片的引入路径进行处理,从而使得代码更加简洁易读。通过该插件,我们可以将SVG图片的引入方式类似于CSS中的引入方式,直接在代码中使用类似于url('./image.svg')的语法即可,而无需担心路径的问题。
vite vue3.0 单个使用svg图标 vite-svg-loader 最近在捣鼓vite+vue3.0+tsx+less,图标库用的是iconfont,但这是批量使用svg的图标,因为我自己封装了一些组件,为了复用方便,所以需要将单个svg图标放到组件的相对目录使用,正好看到github有人做了包,拿来试了试,踩了坑,给大家分享一下~...
.icon{color: cornflowerblue;font-size:30px; } 在浏览器中访问about页面,可以看到在线 SVG 图标可以成功显示: 3 本地 SVG 图标 在webpack 中加载 svg 资源可以使用svg-sprite-loader,而 vite 中可以使用插件vite-plugin-svg-icons。 3.1 安装开发依赖 ...
简介:vue3+vite+ts项目中使用svg图标 项目结构 网络异常,图片无法展示 | 1. 首先引入svg插件 yarn add svg-sprite-loader -D// 或者npm install svg-sprite-loader -D复制代码 网络异常,图片无法展示 | 2. 创建文件 在@/src里面创建icons文件夹,里面创建index.vue(svgicon的模板文件),index.ts(svgicon的js...
.icon{color:cornflowerblue;font-size:30px;} 在浏览器中访问about页面,可以看到在线 SVG 图标可以成功显示: 3 本地 SVG 图标 在webpack 中加载 svg 资源可以使用svg-sprite-loader,而 vite 中可以使用插件vite-plugin-svg-icons。 3.1 安装开发依赖
createSvgIconsPlugin({ // 指定需要缓存的图标文件夹 iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], // 指定生成的 SVG sprite 文件的存放位置 symbolId: 'icon-[dir]-[name]' // 指定symbolId格式 }), svgLoader(), ]
大家在使用Vue-Cli的时候,想要使用SVG,svg-sprite-loader绝对是个火热的插件,它用相对优雅的方式帮我们解决了引入 SVG 文件的问题。 到了Vite上,由于不再使用webpack进行打包,svg-sprite-loader不再可用,svg的插件又回到了百花齐放的阶段,其中最火的vite-sprite-loader,但是他不支持 Sprite 技术(这里要提一下,关于...