在vue3.x中使用svg ,在vue-cli4.5.x以上Vue项目中使用svg

╰半橙微兮° 2022-10-15 10:57 235阅读 0赞

在Vue2 vue-cli4.5以下的Vue脚手架中使用svg大家已经很常见了，那么如何在Vue3.x  中使用svg呢

1. 首先 在src文件下创建 svgIcon 文件夹 文件夹下创建svg存放svg文件，创建index.js  index.vue

结构如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70][]

index.js

//下面这个是导入svgIcon/svg下的所有svg文件
    const requireAll = requireContext => requireContext.keys().map(requireContext);
    const req = require.context("./svg", false, /\.svg$/);
    /*
     第一个参数是:'./svg' => 需要检索的目录，
     第二个参数是：false => 是否检索子目录,
     第三个参数是: /\.svg$/ => 匹配文件的正则
    */
    requireAll(req);

index.vue  使用语法糖格式

<template>
      <svg :class="svgClass" v-bind="$attrs" :style="{color: color}">
        <use :xlink:href="iconName"/>
      </svg>
    </template>
    
    <script setup>
    
    
    import { defineProps, computed } from "vue";
    
    const props = defineProps({
      name: {
          type: String,
          required: true
        },
        color: {
          type: String,
          default: ''
        }
    })
    
    const iconName = computed(()=>`#icon-${props.name}`);
    const svgClass = computed(()=> {
      console.log(props.name, 'props.name');
      if (props.name) {
            return `svg-icon icon-${props.name}`
          }
          return 'svg-icon'
    });
    
    
    
    
    
    </script>
    
    <style lang='scss'>
    .svg-icon {
      width: 1em;
      height: 1em;
      fill: currentColor;
      vertical-align: middle;
    }
    </style>

或者

<template>
      <svg :class="svgClass" v-bind="$attrs" :style="{ color: color }">
        <use :xlink:href="iconName" />
      </svg>
    </template>
    
    <script>
    import { computed } from "@vue/runtime-core";
    export default {
      props: {
        name: {
          type: String,
          required: true,
        },
        color: {
          type: String,
          default: "",
        },
      },
      setup(props) {
        let iconName = computed(() => `#icon-${props.name}`);
        let svgClass = computed(() => {
          console.log(props.name, "props.name");
          if (props.name) {
            return `svg-icon icon-${props.name}`;
          } else {
            return "svg-icon";
          }
        });
        return { iconName, svgClass };
      },
    };
    </script>
    
    <style lang="scss">
    .svg-icon {
      width: 1em;
      height: 1em;
      fill: currentColor;
      vertical-align: middle;
    }
    </style>

main.js全局引用

import {
        createApp
    } from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import ElementPlus from 'element-plus';
    import 'element-plus/lib/theme-chalk/index.css';
    
    import "@/svgIcon/index"
    import svgIcon from "@/svgIcon/index.vue";
    
    
    
    createApp(App).use(store).use(router).use(ElementPlus, {
        size: 'small',
        zIndex: 3000
    }).component('svg-icon',svgIcon).mount('#app')

vue.config.js 中配置chainWebpack

module.exports = {
        chainWebpack: config => {
            const svgRule = config.module.rule("svg");
            svgRule.uses.clear();
            svgRule
              .use("svg-sprite-loader")
              .loader("svg-sprite-loader")
              .options({
                symbolId: "icon-[name]"
              });
          }
      }

在组件中使用

//login_name 是svg目录下的svg文件名 
    <svg-icon name="login_name" />

现在可以正常使用了，使用效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70]: /images/20221014/2da82c7a27954be1a89175e0e09c1d2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1]: /images/20221014/9a4d9bc93989447fa31266b57d0082fe.png