1. Use of SVG in common pages

SVG refers to images defined in XML format that can be embedded into a web page as HTML tags to render an effect.

Example of using SVG in a Web page:

< SVG width = "100" height = "100" version = "1.1" XMLNS = "http://www.w3.org/2000/svg" > < the rect width = "100%" height = "100%" style="fill:blue; stroke-width:2; Stroke: RGB (0, 0) "/ > < / SVG >Copy the code

2. Use SVG in Vue

The introduction of SVG in a Vue project, while it is possible to copy large chunks of code into a web page, is cumbersome for modular development, so SVG provides the use tag, which allows the SVG source code to be placed in a static directory and referenced via the Use tag.

Take a look at the SVG code first

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0" id="__SVG_SPRITE_NODE__"> <symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon" viewBox="0 0 1024 1024" id="one"> <defs><style type="text/css"></style></defs> <rect width="100%" height="100%" style="fill:rgb(153, 238, 172); stroke-width:2; Stroke: RGB (0, 0) "> < / the rect > < / symbol > < / SVG >Copy the code

Usage:

<svg><use xlink:href="#one"></use></svg>
Copy the code
  • Note:symbolIn theidanduseIn thehrefIt has to correspond.

When we do project development, we generally need to use WebPack for packaging processing. While processing non-JS files, is the need to use a variety of loaders to load processing. The one currently used to process SVG is svG-Sprite-loader.

High note: If the VUE project is written using TS, add the following code to shims-vue.d.ts:

declare module '*.svg'
{
  const content:string;
  export default content;
}
Copy the code

First we need to install svG-sprite-loader; yarn add svg-sprite-loader -D

Then configure it in vue.config.js:

const path = require('path');

module.exports = {
	chainWebpack:(config)=>{
    const dir=path.resolve(__dirname,'存放.svg的文件夹路径')；
    config.module.rule('svg-sprite').test(/\.svg$/).include.add(dir).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()
    
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}])
    config.module.rule('svg').exclude.add(dir) 
    }
}
Copy the code

At this point we can introduce the icon directly into the project using the Use tag;

<svg><use xlink:href="#one"></use></svg>
Copy the code

3. Wrap an Icon component

If you need to reference an SVG Icon multiple times in your project, you can wrap an Icon component that can be called every time you use it, passing in an attribute to get the SVG.

---Icon.vue--- <template> <svg> <use :xlink:href="'#'+name"></use> </svg> </template> <script lang="ts"> const importAll  = (requireContext:__WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext); try{importAll(require.context('.. /assets/icons',true,/\.svg$/)); }catch(error){console.log(error); } export default { props:['name'], name:'Icon' }; </script>Copy the code

To make it easier to use the Icon component globally, we can introduce it in main.ts.

import Icon from '@/components/Icon.vue';
Vue.component('Icon',Icon)
Copy the code

This way you can use the Icon component in other components.

<Icon name='down'/>
Copy the code

4. Solution to SVG’s inability to modify colors.

Sometimes we accidentally download an SVG file with a color, so we can change the color of SVG directly by opening the SVG file and modifying the fill property inside. But what if there are many images, and the same SVG file is used in many places, and the color requirements are different?

At this point we can use svGo-Loader for processing.

Download the svGo-loader yarn add SvGo-loader

Vue. Config. js:

chainWebpack:(config)=>{ const dir=path.resolve(__dirname,'src/assets/icons') config.module .rule('svg-sprite') The.test (. / \ $/ SVG). Include. Add (dir). The end () / / directory contains the ICONS .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end() .use('svgo-loader').loader('svgo-loader') .tap(options=>({... options,plugins:[{removeAttrs:{attrs:'fill'}}]})).end() config.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

This way we can use the same SVG file for different components with different colors. We can specify the color of SVG directly in the style by using color.

The resources

How is SVG introduced in Vue?