vue中使用svg图标

一、下载对应loader

npm i svg-sprite-loader -D

二、在vue.config.js中配置loader

'use strict'
const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}

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

module.exports = defineConfig({
  transpileDependencies: true,
  // 关闭eslint校验
  lintOnSave: false,
  // 设置svg-sprite-loader。匹配svg文件进行打包
  chainWebpack(config) {
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
})

三、执行index，读取svg文件

 在index文件中编写代码读取svg文件。并在main中引入执行该文件

import './assets/icons'

/* require.context： 是webpack 的 api，通过该函数可以获取一个上下文，
从而实现工程自动化（遍历文件夹的文件，从中获取指定文件，自动导入模块）。
在前端工程中，如果一个文件夹中的模块需要频繁引用时可以使用该方式一次性引入。 
(被读取文的所在目录, 是否遍历子目录(布尔值), 匹配规则) */

const req = require.context('./svg', false, /\.svg$/)
// 即可在map中打印所有svg文件的路径
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

四、使用svg图标

// 因为上面在main.js中导入了，即可在全局使用

<svg>
      <use xlink:href="#icon-404"></use>
</svg>

 

五、封装svg组件

1、封装组件

<template>
  <svg class="svg-icon">
    <use :xlink:href="'#icon-'+iconName"></use>
    <!-- <use xlink:href="#icon-404"></use> -->
  </svg>
</template>

<script>
export default {
  name:'svglcon_',
  props: {
    iconName: {
      type: String,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  overflow: hidden;
  vertical-align: -0.15em;
  border: 1px solid red;

  // fill: currentColor; 表示填充的颜色 为当前的颜色。跟着字体颜色变化而变化
  fill: currentColor;
}
</style>

2、全局注册

在之前读取svg图片的index.js文件中注册

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

// 把SvgIcon组件定义为一个全局组件
Vue.component('svg-icon', SvgIcon)


// 加载./svg目录下面的所有的 svg文件
const req = require.context('./svg', false, /\.svg$/)
// console.log('key',req.keys().map(req)); // 可以打印把所有的打印
console.log('key',req.keys().map(req));
// 即可在map中打印所有的svg文件路径
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

3、使用方式：

<svg-icon iconName="404"></svg-icon>