这段配置做了以下几件事: 清除了默认的SVG处理规则。 添加了svg-sprite-loader来处理SVG文件。 设置了SVG图标的ID格式为icon-[name]。 添加了SvgSpriteLoaderPlugin来生成SVG精灵图。 3. 在vue3组件中引入SVG图标 现在你可以在Vue组件中引入SVG图标了。假设你有一个名为icon.svg的图标文件,你可以在组件中这样引...
在src文件夹里面的main.js文件加入如下代码: import SvgIcon from "./components/svgIcon/Index.vue"const app=createApp(App) app .component("svg-icon", SvgIcon) .mount("#app"); 5.配置svg-sprite-loader插件 在vue.config.js文件的chainWebpack对象进行如下配置和解析 5.1.当vue/cli的版本号为 5.0的...
2、安装 svg-sprite-loader npmisvg-sprite-loader 3、配置 vue.config.js module.exports= {// 配置使用stylus全局变量chainWebpack: config => {constsvgRule=config.module.rule("svg"); svgRule.uses.clear(); svgRule .use("svg-sprite-loader") .loader("svg-sprite-loader") .options({ symbolId:...
所以在vue.config.js里扩展webpack的配置,首先要排除file-loader对我们icons文件夹的处理,然后利用svg-sprite-loader对icons文件夹的进行专门的处理 constpath=require('path')// resolve定义一个绝对路径获取函数functionresolve(dir){returnpath.join(__dirname,dir)}module.exports={chainWebpack(config){//排除icon...
VUE-cli3使用 svg-sprite-loader svg-sprite-loader 的插件,用来根据导入的 svg 文件自动生成 symbol 标签并插入 html 1.安装依赖 npm install svg-sprite-loader \--save-dev 2.配置vue.config.js文件 webpack 配置,在Vue.config.js加入处理 svg 的 loader ...
vue.config.js 中配置chainWebpack constpath=require('path')constresolve=dir=>path.join(__dirname,dir)module.exports={chainWebpack:config=>{// set svg-sprite-loaderconfig.module.rule('svg').exclude.add(resolve('src/svgIcon/svg')).end();config.module.rule('icons').test(/\.svg$/).inclu...
npm install svg-sprite-loader--save-dev AI代码助手复制代码 webpack 配置,在Vue.config.js加入处理 svg 的 loader: constpath =require('path')functionresolve(dir) {returnpath.join(__dirname,'.', dir) }module.exports= {chainWebpack:config=>{ ...
1、安装svg-sprite-loader npm 1. 2、配置vue.config.js const { defineConfig } = require('@vue/cli-service') const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = defineConfig({ ...
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) ...
项目中使用SVG有两个场景 1、Iconfont字体图标 2、SVG图标svg-sprite 问题背景: 由于vue cli默认已经对svg做了处理,所以在使用svg-sprite-loader时有冲突导致图标不能正常显示。 //默认`vue-cli` 对svg做的处理,正则匹配后缀名为.svg的文件,匹配成功之后使用 url-loader