【无标题】

vue 3 svg 使用

1. npm install svg-sprite-loader --save-dev 下载依赖
   2.src/components下新建文件夹及文件SvgIcon/index.vue

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :href="iconName" />
  </svg>
</template>

<script>
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      require: true,
    },
    className: {
      type: String,
      default: "",
    },
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
    svgClass() {
      if (this.className) {
        return "svg-icon " + this.className;
      } else {
        return `svg-icon`;
      }
    },
  },
};
</script>

<style scoped>
</style>

3.在src/icons下新建index.js文件

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

Vue.component('svg-icon', SvgIcon)

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

4.main.js全局引

5.vue.config.js 配置

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, './', dir)
}
module.exports = {
  publicPath: "./", // 公共路径(必须有的)
  outputDir: "dist", // 输出文件目录
  assetsDir: "static", //静态资源文件名称
  productionSourceMap: false, //去除打包后js的map文件
  devServer: {
    open: true,
    port: 8080,
    proxy: null
  },
  chainWebpack: config => {
    // 配置svg
    const svgRule = config.module.rule('svg') // 找到svg-loader
    svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
    svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
    svgRule // 添加svg新的loader处理
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
    const imagesRule = config.module.rule('images')
    imagesRule.exclude.add(resolve('src/icons'))
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
    // 移除 prefetch(预先加载模块)
    config.plugins.delete("prefetch")
  }

};

6.使用

<svg class="icon" aria-hidden="true">
      <svg-icon iconClass="logo2"></svg-icon>
</svg>