current position:Home>About vue3 0 failed to load SVG through SVG sprite loader

About vue3 0 failed to load SVG through SVG sprite loader

2022-05-15 04:44:04CSDN Q & A

As the title , Please consult What is the wrong configuration or the problem of code writing ? I've been troubled all day Unnecessary code has been removed , Is invalid , A reference case is ok Of

The phenomenon and background of the problem

svg The icon has not been loaded The following for F12 when Comparison of

Not loaded into svg

img

Normal loading to svg

img

The code structure

img


img

vue.config.js Configuration in

//  To configure Webpack    chainWebpack: (config) => {        const svgRule = config.module.rule('svg');                //  Clear all existing  loader.        //  If you don't , Next  loader  Will be attached to the existing... Of the rule  loader  after .        svgRule.uses.clear()        // svg-sprite-loader svgo-loader        svgRule            .test(/\.svg$/)            // .include.add(dir)            // .include.add(path.resolve('src/assets/icons'))            // .end()            .use('svg-sprite-loader')            .loader('svg-sprite-loader')            .end()        //  To configure svg        // svgConfig(config);    }

load svg Of index.ts

const svgFiles = require.context('./svg', false, /\.svg$/)console.log('1111', svgFiles, svgFiles.keys());// const a = svgFiles.keys().map(svgFiles)// console.log('1111', a)const requireAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().map(requireContext);const a = requireAll(svgFiles);console.log('1111', a)

main.js

require('@/icons');



Take the answer :

img


You can configure it here svg Of symbolId Have a try ,
such as :

      .use('svg-sprite-loader')      .loader('svg-sprite-loader')      .options({        symbolId: 'icon-[name]'      })

options Inside symbolId, If you're going to save svg File is icon-name Format ,symbolId The just "[name]", If svg The name of the file is name,symbolId The just "icon-[name]"

If help , Please accept it , thank you ~


copyright notice
author[CSDN Q & A],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/131/202205041837280846.html

Random recommended