前言
因為專案中有很多地方需要用到字體svg圖示，而專案中使用了很多不同來源的字體圖示導致維護很麻煩，每一次需要新添加字體圖示的時候就會有很麻煩的操作，因此想開發一個svg組件優化一下字體圖示的引入，只需要將要引入svg檔案放入指定檔案夾中，然后通過svg組件系結檔案名稱，就可以達到參考字體圖示的目的，
1.安裝loader
要處理svg檔案，需要要svg-sprite-loader，決議svg，因為是只在開發時需要決議，因此加上后綴 --save-dev或者-D，
npm install svg-sprite-loader --save-dev
2.使用svg-sprite-loader
在vue.config.js中去除舊的svg規則，然后添加新的svg規則
const path = require('path') //因為引入svg檔案時需要獲取檔案路徑，因此需要引入path
module.exports = {
chainWebpack: config => {
config.module
.rule('svg')
.exclude
.add(path.join(dirname, 'src/assets/icons'))
.end()
config.module
.rule('icons')
.test(/.svg$/)
.include
.add(path.join(dirname, 'src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({ symbolId: 'icon-[name]' })
.end()
}
}
3.創建SvgIcon組件
這個組件將會是一個公用組件，可以在很多專案中使用，因此建議放在公用組件檔案夾中
//此組件接收一個必傳的引數name：svg檔案的名稱
<template>
<svg aria-hidden="true">
<use :xlink:href="https://www.cnblogs.com/yangtao-s/archive/2022/08/03/`#icon-${name}`" />
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
name: { // svg檔案名稱
type: String,
required: true
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
4.注冊SvgIcon組件
組件注冊可以全域注冊，也可以區域注冊，鑒于有很多組件和頁面都要使用它，因此這里選擇全域注冊
// main.js 中 引入SvgIcon組件，全域注冊SvgIcon組件
import SvgIcon from '@/base-ui/svgIcon/SvgIcon.vue'
Vue.component('svg-icon', SvgIcon)
5.引入svg資源
使用require.context(directory,useSubdirectories,regExp) 工具函式將檔案夾所有后綴是svg的資源檔案引入，
// require.context(directory,useSubdirectories,regExp)
// 1.directory :檢索目錄
//2.useSubdirectories：是否檢索該目錄下的字檔案夾，true：檢索，false：不檢索
//3.regExp:匹配檔案的正則運算式,一般是檔案名
require.context(directory,useSubdirectories,regExp)回傳一個函式，它的原型上有1個id屬性2個方法：
- 1：id，
- 2：keys（）這是已個函式，呼叫可以得到匹配到的檔案名陣列
- 3：resolve（req） 這是一個函式，接受一個引數，回傳檔案資源的路徑
//main.js
// 1. 引入SvgIcon組件，全域注冊Svg
Icon組件
import SvgIcon from '@/base-ui/svgIcon/SvgIcon.vue'
Vue.component('svg-icon', SvgIcon)
// 2. 載入所有svg icon
const requireContext = require.context('./assets/icons', false, /\.svg$/)
requireContext.keys().forEach(requireContext)
6.使用效果
圖中svg來自阿里巴巴矢量圖,注意在下載的時候記得去掉svg圖示的顏色，這樣才可以修改圖示的顏色，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/500837.html
標籤：其他
下一篇：簡單使用vuex狀態管理