vue中使用svg-icon遇到的坑及解決

更新時間：2023年06月09日 08:51:22 作者：maxiaoxin1314

這篇文章主要介紹了vue中使用svg-icon遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

1.每次在項目中使用icon的圖標時

總是覺得引入很長的路徑很麻煩，最近發(fā)現(xiàn)一個插件挺好用的，svg-sprite-loader

svg-sprite-loader實際上是把所有的svg打包成一張雪碧圖，

再通過<use xlink:href="#xxx"/>來顯示你所需的icon，

但是在使用的過程總會出現(xiàn)問題；

2.安裝依賴

npm i svg-sprite-loader --save

3.vue中vue.config.js中的配置

 chainWebpack(config) {
    const svgRule = config.module.rule("svg");
    // 清除已有的所有 loader。
    svgRule.uses.clear();
    svgRule
      .test(/\.svg$/)
      .include.add(path.resolve(__dirname, "src/assets/icons")) // 文件目錄
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      });
    const fileRule = config.module.rule("file");
    fileRule.uses.clear();
    fileRule
      .test(/\.svg$/)
      .exclude.add(path.resolve(__dirname, "src/assets/icons"))
      .end()
      .use("file-loader")
      .loader("file-loader");
  },

或者只需要簡單的配置：

 chainWebpack(config) {
    config.module
      .rule("svg")
      .exclude.add(resolve("src/icons"))
      .end();
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      })
      .end();
  },

以上的兩種試過都是可以的。

4.在src文件目錄下

新建一個icons文件，icons里面的svg文件是需要用到的svg矢量圖

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", false, /\.svg$/);
const requireAll = (requireContext) => requireContext.keys().map(requireContext);
requireAll(req);

5.在components下面新建一個SvgIcon文件

index.vue文件：

<template>
  <!-- <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /> -->
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" rel="external nofollow"  />
  </svg>
</template>
<script>
  // doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
  import { isExternal } from "@/utils/validate";
  export default {
    name: "SvgIcon",
    props: {
      iconClass: {
        type: String,
        required: true,
      },
      className: {
        type: String,
        default: "",
      },
    },
    computed: {
      isExternal() {
        return isExternal(this.iconClass);
      },
      iconName() {
        return `#icon-${this.iconClass}`;
      },
      svgClass() {
        if (this.className) {
          console.log(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;
    color: #fff;
  }
  .svg-external-icon {
    background-color: currentColor;
    mask-size: cover !important;
    display: inline-block;
  }
</style>

6.在main.js中引用就行

7.在需要用到的組件中使用

8.vue-cli2.0下找到build下webpack.base.config.js

在module中的rule下加入下面的規(guī)則：

{
        test: /\.svg$/,
        loader: "svg-sprite-loader",
        include: [resolve("src/icons")],
        options: {
          symbolId: "icon-[name]"
        }
},

如果存在file-loader的規(guī)則還需要更改路徑：

 {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: utils.assetsPath("img/[name].[hash:7].[ext]")
        },
        exclude: [resolve("src/icons")]//加入這句
      },

應(yīng)該就不會有什么問題了