md/vue/vue下使用SVG.md

在vue项目中使用SVG

本文包含了在vue项目中使用SVG的方法, 包含vue2.x和vue3.x

vue2.x使用

#c 依赖组件介绍 我们主要使用 svg-sprite-loader 来引入组件
使用webpack中的require.context来批量引入svg文件

#d 新旧vue cli 差异

新版本vue cli项目无法生效参考文章

在新版本的vue cli项目中更改了svg文件的加载方式
所以我们需要将新版本的svg加载项进行更改, 删除新增的内容

#e 配置svg文件的加载 vue.config.js 配置如下

const path = require('path')
function resolve(dir) {
    // console.log(dir);
    return path.join(__dirname, dir);
}


module.exports = defineConfig({
    ...outherConfig,
    chainWebpack: config => {
        config.plugin('define').tap(args=>{
            const argv = process.argv
            const icourt = argv[argv.indexOf('--icourt-mode') + 1]
            args[0]['process.env'].MODE = `"${icourt}"`
            return args
        })
        const svgRule = config.module.rule('svg')
        svgRule.uses.clear()
        // 清除已有的svg loader https://juejin.cn/post/7133523073680015396
        svgRule.delete('type');
        svgRule.delete('generator');
        svgRule.exclude.add(/noe_modules/)
        svgRule
            .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/assets/svg'))
        // console.log('imagesRule',imagesRule)
        config.module
            .rule('images')
            .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)

    }
})

#c 注册并引用svg组件 使用 webpack 中的require.context来批量引入svg文件,
并将svg组件注册为vue组件, 这样我们就可以在项目中使用svg了
为了能够同时使用网络上的svg图标, 设置组件参数svgHref属性,
用于直接引入网络上的svg图标

#e 注册与组件 这里我们将svg文件统一放置于src/assets/svg目录中, @为src的别名(alias) iconIndex.js

import Vue from 'vue'
import SvgIcon from './iconSvg' // svg组件

// 注册到全局
Vue.component('svg-icon', SvgIcon)

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

svg-icon.vue

<template>
  <svg class="svg-icon" aria-hidden="true">
    <image v-if="svgHref" :xlink:href="svgHref" />

    <use v-else :xlink:href="_iconName"/>
<!--    使用 链接 加载 svg-->
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      default: '',
    },
    svgHref: {
      type: String,
      default: '',
    },
  },
  computed: {
    _iconName () {
      return `#icon-${this.iconClass}`
    },
  },
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.svg-icon image {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
</style>

#e 使用组件 在对应的svg目录放置好svg文件后, 在需要使用的地方直接调用组件即可
例如放置 user.svg, 在使用的时候只需要使用如下代码即可,
icon-class属性填写svg文件的文件名即可

<template>
  <div class="div">
    <svg-icon icon-class="user" />
  </div>
</template>