vue3中svg图标的封装与使用

news2024/11/20 7:07:10

组件封装：

<template>
  <svg :class="svgClass" :style="{ width: size + 'px', height: size + 'px', color: color, verticalAlign:deviation+'em'}" aria-hidden="true">
    <use :xlink:href="`#icon-${name}`" />
  </svg>
</template>

<script>
export default {
  name: 'svg-icon',
  props: {
    name: { type: String, required: true },     // svg 图标名称
    className: { type: String, default: '' },   // 指定的类样式
    size: { type: Number, default: 28 },        // 图标尺寸
    color: { type: String, default: "#000" }, // 图标颜色
    deviation:{type:Number,default:-0.2} //图标上下偏移量
  },
  computed: {  // 计算属性
    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.2em;
  fill: currentColor;
  overflow: hidden;
  padding:0  0.15em;
}
</style>

svg图标存放目录：
在这里插入图片描述
index.js获取svg文件

// 获取当前目录所有为.svg的文件
const req = require.context('./svg', false, /\.svg$/)

// 解析获取的.svg文件的文件名称并返回
const requireAll = (requireContext) =>{
  return requireContext.keys().map(requireContext)
}
requireAll(req)

vue.config中定义svg图标目录

const {defineConfig} = require('@vue/cli-service')
const path = require('path')
const resolve = (dir) => path.join(__dirname, dir)
module.exports = defineConfig({
    transpileDependencies: true,
    chainWebpack(config) {
        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()
    },
    ......
    }