vue中封装svg图片组件

在vue项目中，图标是必不可少的元素，可以使用第三方UI库中的图标，如果需要自定义引用自己设计的svg图片，或者在其他地方找的svg图片怎么能优雅的引用到项目中呢，下面我介绍下我开发过程中使用的方法：

第一步：在项目静态资源assets文件夹中新建svgIcon文件夹，svgIcon文件夹中新建svg文件夹，在此存放我们要使用的.svg文件。

第二步：在src>compontens文件夹下新建svgIcon文件夹，在svgIcon文件夹中新建index.vue文件，作为我们封装svg组件的主文件。内容如下：

<template>
    <svg
        :class="svgClass"
        aria-hidden="true"
    >
        <use :href="iconName" />
    </svg>
</template>

<script>

export default {
    name: 'SvgIcon',
    props: {
        iconClass: {   //  传入svg的文件名，不加后缀
            type: String,
            default: ''
        },
        className: { //  传入要设置的class类名
            type: String,
            default: ''
        }
    },
    computed: {
        iconName() {
            return `#icon-${this.iconClass}`;
        },
        svgClass() {
            if (this.className) {
                return 'svg-icon ' + this.className;
            } else {
                return 'svg-icon';
            }
        },
    }
};
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  overflow: hidden;
  fill: currentColor;
}
</style>

第三步：在存放svg图片文件夹svgIcon中新建index.js文件全局注册svg组件。

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg component

// 全局注册
Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

第四歩：在需要使用svg图片的页面中引入封装好的svg组件

//引入封装好的svg组件
import SvgIcon from '@/components/svgIcon'

//注册svg组件
components: { SvgIcon },

// 使用封装好的svg组件   class-name属性定义class类名  icon-class属性定义svg文件名称
<SvgIcon icon-class="svg文件名"  class-name='类名' /> 

最后也是最重要的，要下载插件svg-sprite-loader

npm install svg-sprite-loader --save-dev

然后更改配置文件，如果用的vue-cli2，更改build/webpack.base.conf.js。

      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/assets/icons')],//1、添加这句代码，后边路径是你放置svg图片的父级文件夹
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {//2、把地下这个对象添加进去
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/assets/icons')], //后边路径是你放置svg图片的父级文件夹
        options: {
          symbolId: 'icon-[name]'
        }
      },

如果用的vue-cli3，更改vue.config.js。module.exports={}中添加以下代码：

const defaultSettings = require('./src/settings.js');
module.exports = {
    //.....................
    chainWebpack(config) {
        // svg 配置
        config.module
            .rule('svg')
            .exclude.add(resolve('src/assets/icons')) //后边路径是你放置svg图片的父级文件夹
            .end();
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/assets/icons')) //后边路径是你放置svg图片的父级文件夹
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .end();
    }
    //..............
};

以上内容是我开发过程中封装的svg图片组件，如果有用可以给作者点个赞。