Webpack plug-in Svg-sprite-loader

Recently began to look at Vue, first use the official template to quickly build up the project:

Vue.js provides an official command-line tool that can be used to quickly build large single-page applications. The tool provides an out-of-the-box build tool configuration that brings a modern front-end development process. Create and launch a project with hot reload, static check on save, and build configuration that can be used in a production environment in just a few minutes.

Now the project Webpack almost standard, a variety of plug-in easy to explode. Now we're going to touch a plugin called Svg-sprite-loader , which automatically generates symbol tags and inserts HTML based on the imported SVG file, and then makes it easy to use the Svg-sprite technology in the template. benefits of using Svg-sprite

If you do not know what svg-sprite is, you can refer to the great god Zhang Xin Xu's article: The future will be hot: SVG Sprite introduction page code refreshing can use the ID everywhere repeatedly call each SVG icon can change the size color installation plug-in

1	NPM Install Svg-sprite-loader--save-dev

webpack Configuration

After the plugin is installed, configure Webpack to join the loader that handles SVG:

1 2 3 4 5 6 7

{test:/\.svg$/, loader: ' Svg-sprite? ' + json.stringify ({name: ' [name] ', Prefixize:true,}),}

At this time found still not ah, body did not see the symbol tag.

A closer look reveals that an SVG file was also processed in a loader:

Then get rid of that SVG, or the following svg-sprite-loader can not be effective ... OK, and the error:

Since I used element.js as the UI framework, it has an SVG file in the package that needs just the loader processing, we have all the SVG files are referred to svg-sprite-loader processing, so here reported the wrong.

That is, only our own introduction of SVG files need to go through Svg-sprite-loader, then the SVG unified into a directory, I put in the src/assets/svg/, and then modify the loader configuration.

The above loader matching regular SVG does not have to be removed, add exclude to it, do not handle the SVG file under the src/assets/svg/path:

1 2 3 4 5 6 7 8 9 10 11

{test:/\. (png|jpe?g|gif) (\?. *) $/, exclude: [Path.resolve (__dirname, '. /src/assets '),], loader: ' URL ', query: {limit:10000, Name:utils.assetsPath (' img/[name].[ Hash:7]. [ext] '),}}

The following Svg-sprite-loader configuration adds an include, processing only the SVG file under the src/assets/svg/path:

1 2 3 4 5 6 7 8 9 10

{test:/\.svg$/, include: [Path.resolve (__dirname, '. /src/assets '),], loader: ' Svg-sprite? ' + json.stringify ({name: ' [name] ', Prefixize:true,}),}

Restart the project and finally see the symbol tag in the HTML. How to use

The configuration is ready, it can be used. The use of the method is simple, compared to the original method of inserting the SVG icon (IMG src or the entire SVG to write HTML), with Svg-sprite simpler and more refreshing:

1	import './assets/svg/target.svg ';

1	<svg> <use xlink:href= "#target"/> </svg>

Well, just a short line. Xlink:href in the SVG ID is good, because in the above configuration file we directly use the file name as the symbol ID, so the incoming ID is the icon you want to display the SVG file name, remember to add #. Auto Import

You will find that in order to insert an icon here, you have to import, each with one to repeat this process, too troublesome, then we let src/assets/svg/under the SVG file automatically import it.

Webpack can help us do this:

1 2 3 4 5 6

Requires and returns all modules that match const Requireall = Requirecontext = Requirecontext.keys (). Map (Requireco ntext); Import all svg const REQ = Require.context ('./assets/svg ', true,/\.svg$/); Requireall (req);

For detailed usage of Require.context, refer to Webpack Documentation: dynamic requires

In this way, whenever we modify or add new SVG, as long as the file to this directory to throw, the plugin will automatically help us generate the corresponding symbol tag, then just use it ~♪ (´ε ')

Article transfer from: https://cisy.me/webpack-svg-sprite/