vue3 webpack項目中svg圖示處理方案

目錄結構

背景：

在我們的項目中所使用的 icon 圖示，一共分為兩類：

1、element-ui等第三方元件庫icon

2、自定義的 svg 圖示

對于element-plus的圖示我們可以直接通過 el-icon 來顯示，但是自定義圖示的話，我們暫時還缺少新顯示的方式，是以說我們需要一個自定義的元件，來顯示我們自定義的 svg 圖示

那麼這種自定義元件處理 自定義 svg 圖示的形式，就是我們在面臨這種問題時的通用解決方案

那麼對于這個元件的話，他就需要擁有兩種能力

1、顯示外部的svg圖示（http外鍊）

2、顯示項目内的svg圖示

基于以上概念，我們可以建立出以下對應代碼：

封裝通用元件

• 1、建立 components/SvgIcon/index.vue:

<template>
  <!-- 展示外部圖示 -->
  <div
    v-if="isExternal"
    :style="styleExternalIcon"
    class="svg-external-icon svg-icon"
    :class="className"
  ></div>
  <!-- 展示内部圖示 -->
  <svg v-else class="svg-icon" :class="className" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script setup>
import { isExternal as external } from '@/utils/validate'
import { defineProps, computed } from 'vue'
const props = defineProps({
  // icon 圖示
  icon: {
    type: String,
    required: true
  },
  // 圖示類名
  className: {
    type: String,
    default: ''
  }
})

/**
 * 判斷目前圖示是否為外部圖示
 */
const isExternal = computed(() => external(props.icon))
/**
 * 外部圖示樣式
 */
const styleExternalIcon = computed(() => ({
  mask: `url(${props.icon}) no-repat 50% 50%`,
  '-webkit-mask': `url(${props.icon}) no-repat 50% 50%`
}))
/**
 * 内部圖示
 */
const iconName = computed(() => `#icon-${props.icon}`)
</script>

<style lang="scss" 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>

           

• 2、建立utils/validdate.js:

/**
 * 判斷是否為外部資源
 * @param {*} path
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

           

• 3、使用(這裡還需要單獨局部引入，看下面寫完就不需要單獨引入，直接可以使用了)

<sapn class="svg-container">
	<svg-icon icon="https://xxxx.svg"></svg-icon>
</span>
           

處理内部圖示（本地svg）

• 1、在src根目錄下建立icons檔案夾，在icons下建立index.js檔案，該檔案中需要完成兩件事：

  * 1-1、導入所有的svg圖示

  * 2-2、完成SvgIcon的全局注冊

• 2、index.js中

// 1.導入所有的svg 圖示
// 2.完成SvgIcon 的全局注冊
import SvgIcon from '@/components/SvgIcon'
const svgRequire = require.context('./svg', false, /\.svg$/)
// 此時傳回了一個 require函數（svgRequire），可以接收一個 request的參數，用于require的導入
// 該函數提供了三個屬性，可以通過 svgRequire.keys() 獲得所有的 svg 圖示
// 周遊圖示，把圖示作為 request 參數傳入到 svgRequire 導入函數中，完成本地svg 圖示的導入
svgRequire.keys().forEach((svgIcon) => svgRequire(svgIcon))

export default (app) => {
  app.component('svg-icon', SvgIcon)
}

           

• 3、main.js中完成全局注冊

// 導入 svgIcon
import installIcons from '@/icons'
const app = createApp(App)
installIcons(app)
           

• 4、使用本地圖示，直接傳icon名稱

<sapn class="svg-container">
	<svg-icon icon="password"></svg-icon>
</span>
           

使用svg-sprite-loader處理svg圖示

做到上面你會發現本地圖示還無法展示，這是因為我們還需要處理一下

svg-sprite-loader 是 webpack 中專門用來處理 svg 圖示的一個loader

• 1、下載下傳該loader

• 2、在vue.config.js檔案，新增如下配置：

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = defineConfig({
  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()
  }
})

           

效果