记录[email protected] 项目，如何使用SvgIcon组件来显示svg图片？

前言：

我们这个项目是vue2的，但是没有使用vue-cli脚手架，使用的是webpack.config.js来设置打包文件的，但是有很多小白就会懵逼了，那我应该怎么配置svg的文件呢？之前学的都是在vue.config.js文件配置的（vue.config,js的配置就一大堆了我这里就不列出来了，只是配置不同，其他相同）,直接进入主题，不扯那么多别的

正题

1. 首先得安装插件 svg-sprite-loader

npm install svg-sprite-loader

说明 ：svg-sprite-loader实际上是把所有的svg打包成一张雪碧图，再通过来显示你所需的icon

2. webpack.base.conf.js 文件配置

（没有的话可以找找有没有webpack.config.js文件）

module.exports = {
    ...,
    module: {
        rules: [
            ...,
           {
            test: /\.svg$/,
            loader: "svg-sprite-loader",
            include: [resolve("src/icons")], //这个文件路径根据实际情况改变
            options: {
              symbolId: "icon-[name]" // 一定要加，要不然svg会无效
            }
          },
        ]
    }
}

这里有一个注意事项

如果存在file-loader的规则还需要更改路径,不然上面的配置会不生效，被这个加载器会改变svg文件的路径：

module: {
     rules: [
          ...
          {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            },
            exclude: [resolve("src/icons")] // 需要过滤掉这个文件夹下面的svg
          },
          ...
     ]
}

3.创建icons文件夹 src/icons

这个文件夹下存放svg矢量图和index.js

将需要使用到的svg文件放在src/icons/svg文件夹中

4.icons/index.js 全局注册svgIcon组件

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

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

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

console.log(requireAll(req))  //这里可以打印出来加载后的svg文件

如果不是这个解构，而是文件路径 那就是在webpack配置文件中的fileloader没有过滤

5.在main.js中引入icons/index.js文件

import './icons'

6.封装SvgIcon组件

在components下创建SvgIcon.vue文件

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

export default {
    name: 'SvgIcon',
    props: {
        name: {
            type: String,
            required: true
        },
        className: {
            type: String,
            default: ''
        }
    },
    computed: {
        iconName() {
            return `#icon-${this.name}`
        },
        svgClass() {
            if (this.className) {
                return 'svg-icon ' + this.className
            } else {
                return 'svg-icon'
            }
        },
    }
}
</script>
  
<style scoped>
.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>

7.使用SvgIcon组件

以后使用只需把svg矢量图放在src/icons/svg文件夹中即可，传name就可（不能使用中文）

<svg-icon name="logo" className="logo"></svg-icon>

控制台效果