一天一個知識點-----vue專案簡單引入svg

專案背景：vue3.0 + elementPlus

注意專案結構，主要涉及的幾個檔案及檔案夾
---直接上代碼----
1.最開始是要下載包 npm install svg-sprite-loader
2.配置專案的組態檔 vue.config.js

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  chainWebpack: config => {
    // set svg-sprite-loader
    // 清除配置
    config.module
      .rule('svg')  //找到svg-loader 
      .exclude.add(resolve('src/components/iconSvg/icons'))  //排除目錄
      .end()
    // 添加配置
    config.module
      .rule('icons')
      .test(/\.svg$/)  //正則匹配 格式為 svg
      .include.add(resolve('src/components/iconSvg/icons')) //只對src/icon 目錄生效  當前目錄指向自己專案svg的檔案夾
      .end()
      .use('svg-sprite-loader')  //注入插件svg-sprite-loader
      .loader('svg-sprite-loader')  //添加loader
      .options({    //配置為 icon-檔案名
        symbolId: 'icon-[name]'
      })
      .end()
  },
};

注意：resolve()里面的路勁，是要指向自己專案存放svg的檔案夾；svg-sprite-loader里面的配置symbolId選項 沒有配置的話 默認是檔案的名稱；
3.新建svg的組件

// src/components/iconSvg/index.vue
<template>
  <svg : aria-hidden="true">
    <use :xlink:href="https://www.cnblogs.com/zjxlicheng/archive/2022/08/23/iconName" :fill="iconColor"/>
  </svg>
</template>

<script>
/**
 *   <svg-icon icon-></svg-icon>
 */
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ""
    },
    iconColor: {
      type: String,
      default: ""
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;  //跟svg-sprite-loader 生成的symbolId相對應上
    },
    svgClass() {
      if (this.className) {
        return "svg-icon " + this.className;  //自定義樣式
      } else {
        return "svg-icon"; //默認樣式
      }
    }
  },
};
</script>

<style scoped>
.svg-icon {
  width: 16px;
  height: 16px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
	margin-right: 10px;
}
</style>

4.寫svg引入的plugin src/plugins/iconsSvg.js

import iconSvg from "@/components/iconSvg"; // svg組件

export default {
  install: (app) => {
    // 注冊全域組件
    app.component("iconSvg", iconSvg);
    const requireAll = reqireContext => reqireContext.keys().map(reqireContext);
    const req = require.context("@/components/iconSvg/icons", false, /\.svg$/);
    requireAll(req); //相當于引入components/iconSvg/icons檔案下的svg檔案
  },
};

注意：此時引入使用的是reqireContext 了解可看reqireContext入門

5.需要在 入口檔案main.js 內引入

import { createApp } from "vue";
import App from "./App.vue";
// 引入自定義的svg icon
import iconsSvg from "@/plugins/iconsSvg.js";

const app = createApp(App);
app.use(iconsSvg)

6.頁面使用

<icon-svg icon- icon-color="#304056"></icon-svg>

// icon-class后面接的是相應icon檔案夾下面svg的名稱

整體的svg整體的構建完成，后續要添加svg 只需要在相應的檔案夾內放入svg圖片即可，使用時使用相應的名稱進行引入；

如果你使用的是vue2.0的話需要注意的是第四步第五步

可以通過第四步引入vue進行全域注冊，第五步只要引入相應的js就行，不用use

//第四步
import iconSvg from "@/components/iconSvg"; // svg組件
import vue from "vue";
// 注冊全域組件
vue.component("iconSvg", iconSvg);
const requireAll = reqireContext => reqireContext.keys().map(reqireContext);
const req = require.context("@/components/iconSvg/icons", false, /\.svg$/);
requireAll(req); //相當于引入components/iconSvg/icons檔案下的svg檔案

//第五步
import "@/plugins/iconsSvg.js";

打完收工---------------------------這是webpack的插件使用，如果你是vite的話 不適用

標籤：其他

上一篇：JavaScript知識-簡介、語言規范、語言基礎

下一篇：小米商城購物車案例實作