快捷導(dǎo)航

vue項(xiàng)目引入svg圖標(biāo)的完整步驟

更新時間：2022年10月10日 14:16:00 作者：小灣_Shelby

在實(shí)際的項(xiàng)目開發(fā)中,使用svg圖標(biāo)占用內(nèi)存比圖片更小,映入圖片內(nèi)存比較大,同時也適用于不同屏幕的尺寸,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目引入svg圖標(biāo)的完整步驟,需要的朋友可以參考下

1. 安裝svg依賴

在vue中首先需要安裝可以加載svg的依賴。

npm安裝：npm install svg-sprite-loader --save-dev

2. 創(chuàng)建svg文件夾存放svg圖標(biāo)

創(chuàng)建icons文件夾，在icons文件夾下創(chuàng)建svg文件夾存放本地svg圖標(biāo)。

3. vue.config.js 中配置svg圖片

vue.config.js代碼：

const path = require('path')

module.exports = {
  chainWebpack:config=>{
    // svg圖標(biāo)加載
    config.module
      .rule('svg')
      .exclude.add(path.join(__dirname, 'src/assets/icons/svg'))
      .end()

    config.module
      .rule('icons')// 定義一個名叫 icons 的規(guī)則
      .test(/\.svg$/)// 設(shè)置 icons 的匹配正則
      .include.add(path.join(__dirname,'src/assets/icons/svg'))// 設(shè)置當(dāng)前規(guī)則的作用目錄，只在當(dāng)前目錄下才執(zhí)行當(dāng)前規(guī)則
      .end()
      .use('svg-sprite')// 指定一個名叫 svg-sprite 的 loader 配置
      .loader('svg-sprite-loader')// 該配置使用 svg-sprite-loader 作為處理 loader
      .options({// 該 svg-sprite-loader 的配置
        symbolId:'icon-[name]'
      })
      .end()
  }
}

include.add(路徑)–路徑不正確會報以下錯誤：

4. 創(chuàng)建index.js 導(dǎo)入所有svg圖標(biāo)

icons文件夾創(chuàng)建index.js 自動導(dǎo)入所有svg圖標(biāo)。

icons/index.js代碼：

const req = require.context('@/assets/icons/svg',false,/\.svg$/)
const requireAll = requireContext =>{
    // requireContext.keys()數(shù)據(jù)：['./404.svg', './agency.svg', './det.svg', './user.svg']
    requireContext.keys().map(requireContext)
} 
requireAll(req)

執(zhí)行 requireContext.keys().map(requireContext)得到返回的數(shù)據(jù)：

5. main.js中引入icons/index.js

6. 創(chuàng)建SvgIcon公用組件

SvgIcon/index.vue代碼：

<template>
    <i v-if="iconFileName.indexOf('el-icon-') === 0" :class="iconFileName" />
    <svg v-else class="svg-icon" aria-hidden="true" v-on="$listeners">
        <use :xlink:href="`#icon-${iconFileName}`" rel="external nofollow"  />
    </svg>
</template>

<script>
export default {
    name: 'SvgIcon',
    props: {
        iconFileName: {
            type: String,
            required: true
        }
    }
}
</script>

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

全局注冊SvgIcon組件：