vue项目封装svg组件

使用阿里巴巴 iconfont 官网提供的图标
下载图片格式的，宽高变化的时候，图片会失真。最好使用svg格式的，自适应还保真。但是每次使用一个图片，下载并导入文件中使用实在是太麻烦。下面配合使用svg-sprite-loader 包 ，封装svg组件：

npm i -D svg-sprite-loader

在components文件下 新建 IconSvg文件夹，新建index.vue

,<template>
    <svg aria-hidden="true" class="svg-icon" >
        <use :xlink:href="icon"></use>
    </svg>
</template>

<script>
    export default {
        name: 'icon-svg',
        props: {
            name: {
                type: String,
                //required: true
            }
        },
        computed: {
            icon () {
                return `#icon-${this.name}`
            }
        }
    }
</script>

<style scoped>
.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    /* 通过给svg 图形元素设置fill= currentColor 图形元素的颜色会自动继承父级color的颜色 */
    overflow: hidden;

}
</style>

在src文件夹下新建 icons文件夹,icons 新建子文件夹svg。里面是从iconfont下载的.svg文件，svg文件夹同级新建index,js文件
index.js文件：

import Vue from 'vue'
import IconSvg from '@/components/IconSvg'// svg组件

// register globally
Vue.component('icon-svg', IconSvg)

//全局引入所有.svg文件
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

全局main.js引入 index.js文件

import '@/icons'

vue.config.js中配置：

const path = require('path')
module.exports = {
    chainWebpack: config => {
        const svgRule = config.module.rule('svg')
        svgRule.uses.clear()
        svgRule
            .test(/\.svg$/)
            .include.add(path.resolve(__dirname, './src/icons')).end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
        const fileRule = config.module.rule('file')
        fileRule.uses.clear()
        fileRule
            .test(/\.svg$/)
            .exclude.add(path.resolve(__dirname, './src/icons'))
            .end()
            .use('file-loader')
            .loader('file-loader')
    }
}

项目中使用：

<icon-svg
	name="dengguang-close"
></icon-svg>
//dengguang-close是 dengguang-close.svg文件的名字

svg-sprite-loader 将 svg 文件内容放到了 body 下面,将加载的 svg 图片拼接成 雪碧图，其它地方通过 复用

浏览器F12打开Element，查看body 下面：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0" aria-hidden="true" id="__SVG_SPRITE_NODE__">
    <symbol xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024" id="icon-dengguang-close"><path d="M512 149.333333c200.298667 0 362.666667 162.368 362.666667 362.666667s-162.368 362.666667-362.666667 362.666667S149.333333 712.298667 149.333333 512 311.701333 149.333333 512 149.333333z m0 64c-164.949333 0-298.666667 133.717333-298.666667 298.666667s133.717333 298.666667 298.666667 298.666667 298.666667-133.717333 298.666667-298.666667-133.717333-298.666667-298.666667-298.666667z m32 106.666667v160H704v64h-160V704h-64v-160.021333L320 544v-64l160-0.021333V320h64z" p-id="6398"></path></symbol>
    .........
</svg>

SVG中有四个主要的元素用于在文档中定义、结构化和引用SVG代码：<g>, <defs>, <use> 和 <symbol>。

<g>元素（“group”的简写），用于给逻辑上相联系的图形元素分组。
<defs>元素用来定义你之后要重用的元素。
<symbol>元素结合了<defs>和<g>元素的优点，将定义模板的元素组合在一起，以便之后在文档中的其他位置引用。比其它两个元素有一个非常重要的优点：它接受一个viewBox属性，可以让它在任何视窗中自适应大小缩放渲染。
<use>元素用于引用文档中其它位置定义的元素。你可以重用已有的元素，类似于图形编辑器中的复制粘贴功能。它可以重用单个元素，也可以重用一组用<g>、<defs>或<symbol>定义的元素。
要使用一个元素，你需要通过一个标识对该元素进行引用——一个ID，即use中的xlink:href属性，以及用来给该元素定位的x和y属性。你可以给use元素应用样式，这些样式也会级联应用到use元素的内容中去。

参考链接：https://blog.csdn.net/weixin_45172119/article/details/121321192