[svg-icon]引入vue项目后，use标签为0，已解决

最新推荐文章于 2024-05-13 09:01:10 发布

春晓_春眠花落

最新推荐文章于 2024-05-13 09:01:10 发布

阅读量1.9k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_49668076/article/details/130542064

版权

vue 专栏收录该内容

46 篇文章 7 订阅

订阅专栏

文章讲述了在Vue项目中处理SVG图标时遇到的问题及解决方案，包括安装svg-sprite-loader依赖，修改vue.config.js配置，以及在组件和全局注册中如何使用SVG图标。通过这些步骤，可以避免重新排查bug并优化项目构建时间。

摘要由CSDN通过智能技术生成

这个bug我之前遇到过一次，解决了也就没记录

但是好记性不如烂笔头，这次重新遇到，又重新排查bug花了1个多小时

svg引入vue项目，需要依赖svg-sprite-loader

npm install  svg-sprite-loader

在vue.config.js中

chainWebpack(config) {
    config.plugins.delete("preload"); // TODO: need test
    config.plugins.delete("prefetch"); // TODO: need test

    // set svg-sprite-loader
    config.module
      .rule("svg")
      .exclude.add(resolve("src/assets/icons"))
      // .add(resolve("src/assets/icons"))//如果还有其他文件夹下有，就add增加
      .end();
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/assets/icons"))
      // .add(resolve("src/assets/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({ symbolId: "icon-[name]" })
      .end();

  },

在assets下新建icons文件夹
在这里插入图片描述
对应的index.js

import Vue from "vue";
import SvgIcon from "@/components/SvgIcon"; // svg component

// register globally
Vue.component("svg-icon", SvgIcon);

const req = require.context("./svg", true, /\.svg$/);
const requireAll = (requireContext) =>
  requireContext.keys().map(requireContext);
requireAll(req);

在components文件夹下新建SvgIcon文件夹
在这里插入图片描述
对应的index.vue

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

<script>
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: "",
    },
  },
  computed: {

    iconName() {
      return `#icon-${this.iconClass}`;
    },
    svgClass() {
      if (this.className) {
        return "svg-icon " + this.className;
      } else {
        return "svg-icon";
      }
    },
    styleExternalIcon() {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
        "-webkit-mask": `url(${this.iconClass}) no-repeat 50% 50%`,
      };
    },
  },
};
</script>

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

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
</style>

在main.js中全局挂载

import "@/assets/icons"; // icon
import "@/components/SvgIcon"; // 自定义组件引入

具体页面中使用

            <svg-icon icon-class="logo" />

use标签为0的主要原因是vue.config.js中没有配置对应的svg-sprite-loader

备注：svg标签一般都是ui直接给，如果需要自己定义，新建text文档，将内容复制后，更改尾缀为.svg即可