Install svG-sprite-loader and configure vue.config.js

const path = require('path'); Exports = {lintOnSave: // imports path module module.exports = {lintOnSave: false, // Add chainWebpack chainWebpack:config=>{const dir = path.resolve(__dirname,' SRC /assets/ ICONS ' Rule (' SVG - Sprite) test (/ \. $/ SVG) / / rules include. Add (dir). The end () / / only contains the ICONS folder .use(' svG-sprite-loader ').loader('svg-sprite-loader').options({extract:false}).end() //{extract:false} do not parse into files .use('svgo-loader').loader('svgo-loader') .tap(option=>({... option,plugins:[{removeAttrs:{attrs:'fill'}}]})).end(); Plugin (' svG-sprite '). Use (require(' svG-sprite-loader /plugin'),[{plainSprite: True}]) config.module.rule(' SVG ').exclude. Add (dir) // Other SVG loaders exclude ICONS directory}}Copy the code

Introduced in the project

// Reference all SVG files in the directory let importAll = (requireContext:__WebpackModuleApi.RequireContext)=>requireContext.keys().forEach(requireContext); try { importAll(require.context('.. /assets/icons',true,/\.svg$/)); // Folder path}catch (error) {console.log(error); }Copy the code

And then inside the body there will be an SVG tag and inside the tag there will be a bunch of symbols and each symbol will have an ID attribute that we can use once we’ve introduced it

< SVG > <use xlink:href="#id" />Copy the code

Install SvGo-Loader to remove the fill attribute (the default color) from SVG files, or you can manually remove the fill attribute