npm i --save-dev svg-sprite-loader@6.0.9 vue.config.js中配置svg--loader // vue.config.js // ele-p 按需加载 constAutoImport=require('unplugin-auto-import/webpack') constComponents=require('unplugin-vue-components/webpack') const{ElementPlusResolver} =require('unplugin-vue-components/resolv...
将图标放在特定文件夹下,这里以 @/assets/svg 中导入的 svg 为例 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-spr...
在Vue 3项目中使用svg-sprite-loader可以方便地管理和使用SVG图标。以下是详细的步骤: 1. 安装svg-sprite-loader及其依赖 首先,你需要在项目中安装svg-sprite-loader和相关的依赖。打开终端,运行以下命令: bash npm install svg-sprite-loader svg-sprite-loader-plugin --save-dev 或者,如果你使用yarn作为包管理...
项目中使用SVG有两个场景 1、Iconfont字体图标 2、SVG图标svg-sprite 问题背景: 由于vue cli默认已经对svg做了处理,所以在使用svg-sprite-loader时有冲突导致图标不能正常显示。 //默认`vue-cli` 对svg做的处理,正则匹配后缀名为.svg的文件,匹配成功之后使用 url-loader
参考文章vue-cli3中webpack 相关配置 // vue.config.js const path = require('path') module.exports = { chainWebpack: config => { const svgRule = config.module.rule('svg') // 清除已有的所有 loader。 // 如果你不这样做,接下来的 loader 会附加在该规则现有的 loader 之后。
以下是一个简单的示例,展示如何在 Vue 3 中使用vue-svg-loader: 代码语言:txt 复制 // main.js import { createApp } from 'vue'; import App from './App.vue'; import './assets/icons'; // 确保你的 SVG 文件被导入 createApp(App).mount('#app'); ...
按照现有的网上方案会报错: Syntax Error: Error: Plugin name should be specified 意思就是:需要配置一个插件名字,想看官网的去这里:https://github.com/svg/svgo 上个图: 不多说了上代码: chainWebpack:config=>{config.resolve.alias.set('@$',resolve('src'))config.module.rules.delete('svg')//重...
如图所示:感觉svg 文件资源没有加载上。vue.config.js 文件代码如下:module.exports = { devServer: { port: 8106, }, chainWebpack: (config) => { config.module.rules.delete("svg"); config.module .rule('svg') .exclude.add(resolve('src/icons')) .end() config.module .rule('svg-sprite')...
Vue 3projects created viaVue CLIaren't built on top ofWebpack, they use Vite (which is build on top ofRollup) instead. In this case, this loader won't work. Please take a look atvue-svg-inline-plugin, which works similar to this loader. ...
参考文章vue-cli3中webpack 相关配置 // vue.config.jsconstpath=require('path')module.exports={chainWebpack:config=>{constsvgRule=config.module.rule('svg')// 清除已有的所有 loader。// 如果你不这样做,接下来的 loader 会附加在该规则现有的 loader 之后。svgRule.uses.clear()svgRule.test(/\.svg...