vue 项目引入 svg

Vue2

1. 安装svg依赖
在vue中首先需要安装可以加载svg的依赖。
npm安装：npm install svg-sprite-loader --save-dev
2. 创建svg文件夹存放svg图标
创建icons文件夹，在icons文件夹下创建svg文件夹存放本地svg图标

3.在webpack.config.js文件中添加 loader 的配置代码

{
        test: /\.svg$/,
        include: [resolve('src/assets/icons/svg')], // 放svg的文件夹
        use: [
          {
            loader: 'svg-sprite-loader',
            options: {
              symbolId: 'icon-[name]'
            }
          }
        ]
      }

注意，如果url-loader配置的 test 中有 svg 类型时，需要配置 exclude忽略掉存放 svg图标的文件夹。
url-loader是一款由Webpack社区贡献的插件，它能够将小尺寸的文件转换为Base64编码的URIs直接内联到你的代码中，而大文件则会交给file-loader处理。这种策略既节省了HTTP请求，又优化了小型资源的加载速度

vue.config.js代码：

const path = require('path')

module.exports = {
  chainWebpack:config=>{
    // svg图标加载
    config.module
      .rule('svg')
      .exclude.add(path.join(__dirname, 'src/assets/icons/svg'))
      .end()

    config.module
      .rule('icons')// 定义一个名叫 icons 的规则
      .test(/\.svg$/)// 设置 icons 的匹配正则
      .include.add(path.join(__dirname,'src/assets/icons/svg'))// 设置当前规则的作用目录，只在当前目录下才执行当前规则
      .end()
      .use('svg-sprite')// 指定一个名叫 svg-sprite 的 loader 配置
      .loader('svg-sprite-loader')// 该配置使用 svg-sprite-loader 作为处理 loader
      .options({// 该 svg-sprite-loader 的配置
        symbolId:'icon-[name]'
      })
      .end()
  }
}

4.在 main.js中配置自动导入所有svg图标。
require.context参数介绍
require.context(directory, useSubdirectories, regExp)

directory:表示检索的目录
useSubdirectories：表示是否检索子文件夹
regExp:匹配文件的正则表达式,一般是文件名

代码：

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

5.创建 SvgIcon公用组件

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

<script>

export default {
  name: 'Icon',
  props: {
    className: String,
    iconClass: String
  },
  computed: {
    iconName () {
      return `#icon-${this.iconClass}`
    },
    svgClass () {
      return this.className ? `svg-icon ${this.className}` : 'svg-icon'
    }
  }
}
</script>

<style lang="scss" scoped>
  .svg-icon {
    width: 100%;
    height: 100%;
    fill: currentColor;
    overflow: hidden;
  }
</style>

6.在 main.js 中全局注册SvgIcon组件

import SvgIcon from '@/components/common/SvgIcon'
Vue.component('svg-icon', SvgIcon)

Vue3

1.安装SVG依赖插件

npm install vite-plugin-svg-icons

2. 创建svg文件夹存放svg图标
创建icons文件夹，在icons文件夹下创建svg文件夹存放本地svg图标
3.在vite.config.ts 中配置插件

// 注册所有的svg文件生成svg雪碧图
      createSvgIconsPlugin({
        iconDirs: [
          resolve(process.cwd(), "src/assets/icons"),
          resolve(process.cwd(), "src/assets/icons/**")
        ], // icon存放的目录
        symbolId: "icon-[name]", // symbol的id
        inject: "body-last", // 插入的位置
        customDomId: "__svg__icons__dom__" // svg的id
      })

4.创建 SvgIcon公用组件

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

<script setup lang='ts'>
import { computed } from 'vue'

interface IProps {
  iconClass: string
  className?: string
}
const props = withDefaults(defineProps<IProps>(), {
  className: ''
})

const iconName = computed(() => {
  return `#icon-${props.iconClass}`
})
const svgClass = computed(() => {
  return props.className ? `svg-icon ${props.className}` : 'svg-icon'
})
</script>

<style scoped lang="scss">
.svg-icon {
  width: 100%;
  height: 100%;
  fill: currentColor;
  &:focus,
  &:focus-visible {
    outline: none !important;
  }
}
</style>

5.在 main.ts 中全局注册SvgIcon组件

import SvgIcon from './components/common/SvgIcon.vue'
app.component('SvgIcon', SvgIcon)