vue中配置SVG图片

vue中配置SVG图片

1. 安装依赖包

npm install svg-sprite-loader 

2. 在src下新建文件夹

在src下新建src/icon/svg

3. 配置vue.config.js

这里是使用wepack处理svg文件

const {defineConfig} = require('@vue/cli-service')
const path = require('path')

function resolve(dir) {
    return path.join(__dirname, dir)
}

module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,
    chainWebpack(config) {
        config.module
            .rule('svg')
            .exclude.add(resolve('src/icons'))       //注意svg的存储地址
            .end()
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/icons'))        //注意svg的存储地址
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .end()
    }
})

4. 导入svg文件

在icons文件夹下新建index.js文件

也可以在这里设置挂载全局组件

// import Vue from 'vue'
// import svgIcon from '../components/svgIcon' // 组件引入
//
// Vue.component('svg-icon', svgIcon) //挂载全局组件

//下面这个是导入svgIcon/svg下的所有svg文件
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
/*
   第一个参数是:'./svg' => 需要检索的目录，
   第二个参数是：false => 是否检索子目录,
   第三个参数是: /\.svg$/ => 匹配文件的正则
  */
requireAll(req)

在main.js中引入

import '@/icons'

5. 编写svgIcon组件

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

<script>
export default {
  name: 'svg-icon',
  props: {
    icon: {
      type: String,
      require: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    getIconName() {
      // console.log("icon",this.icon)
      return `#icon-${this.icon}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>
<style scoped>
.svg-icon {
  /* 默认样式设置 默认宽高1em*/
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  /* 当前颜色 */
  fill: currentColor;
  overflow: hidden;
}
</style>

6. 使用

<div class="music-icon">
      <svg-icon icon="erji" class-name="erji-icon"></svg-icon>
</div>